I am working on a components library (such as material-ui). I am using rollup for compiling.
For the moment I can generate a single package, and to import a component such as a button, I can do it like that :
import { Button } from "package-name";
Can I modify the rollup configuration to generate a separate package or chunk for each component.
In other word, can I split the big-size package in separate small-size packages (one for each component)
and use them in a way similar to this:
import { Button } from "package-name/Button";
I start looking to the Code Splitting...
But I am wandring if there is a known best practice to have this result?
Is there a specific way to write the rollup.config file ?
Related
I'm creating a game with sprays but I can't put all the sprays in the same folder because at least 50/ 100 and more are comming and I want to import all the images from a folder, the problem is that the name is variable.
Example :
import * as JhonImgs from "../images/Jhon/"
import * as JhonImgs from "../images/Lucas/"
Or something like that. All the images have the same extension, .png.
The problem is require.context() doesn't allow me use variables. And I can't call one by one, or use a cdn server.
Thanks.
Let's say I have a couple translation files like so:
import English from "./lang/compiled-en.json";
import Spanish from "./lang/compiled-es.json";
and so on for all the languages we plan to support. These are imported directly into the component they are used, and our app as a whole is split into chunks with webpack that may contain many components and thus, many strings.
It would be ideal to only be importing the languages.json file I need depending on the user's locale, and not import all of them while having to check the locale and using only one.
I tried a super naive stab at it here, but it certainly does it work:
Helper function existing in another directory:
export async function loadLocaleData(locale: string, path: string ) {
switch (locale) {
case "en-US":
return await import(path + "/lang/en-compiled.json");
case "pt-BR":
return await import(path + "/lang/pt-br-compiled.json");
default:
return await import(path + "/lang/en-compiled/en.json");
}
}
I was thinking that importing this helper function into my components that need translations would look in their own directory for the translation file. But even when I have that path hardcoded to specify exactly where the translation file is, I still get errors.
The above may be implemented into a component like so:
const localeContext = useContext(LocaleContext);
const messages = loadLocaleData(
localeContext.locale,
"packages/components/Preferences/Billing"
);
And then I'd ideally pass just that message into my IntlProvider that wraps this individual component.
This definitely isn't working. Is there a way to make it work? I know what I want to do, I'm just not sure how possible it is.
You can use dynamic imports like you are trying, but you need to use absolute paths. Otherwise your bundler (Webpack) won't actually know where to find them.
Alternatively, store your language files in your public/ directory and use the public path to it. Webpack won't touch those files (besides index.html) and might be your best option here.
I have some git libraries I am using for my app and using vscode. But I am a little unclear on how to reference these libraries and if I have to be specific in the 'from' part of not.
For example, my code below is something I copied from someone else code, and is at the top of my App.js file.
import {
Board,
BoardView,
} from 'cm-board';
Does vscode go search all subdirectories to find cm-board? Or, should I be using this instead:
import {
Board,
BoardView,
} from '../node-modules/cm-board';
And if I reference cm-board, does that also give me access to all files below cm-board too or do I have to import each one of those individually?
I have an ICM profile that I wish to import into a certain file. I need this because I need to fetch the contents of the file into a Uint8Array (array buffer). However, I can't get the file to import.
I've tried
import file from './tester.icm';
import { file } from './tester.icm';
const file = require('./tester.icm');
I would expect it to work like importing an image:
import logo from './logo.png';
However, this approach does not work.
This is a new question since it deals with a binary format, not a simple text file.
The import statement that you are using is done by Webpack and not by React. Webpack can not import all file types by default, for some file types you will need to configure your own loader. You can have a look at the docs for more information.
I have many imports for angular components, and it looks like I can write a function to simplify the import. I just don't know how, but this should be simple.
Sample imports:
import {DashboardComponent} from './app/components/dashboard/dashboard.component';
angular.module('app.components').component('dashboard', DashboardComponent);
import {HeaderComponent} from './app/components/header/header.component';
angular.module('app.components').component('header', HeaderComponent);
The function below demonstrates what I want to achieve, however I'm missing two concepts to make it work:
How do I put a variable (name) in the {}?
Can I use an Angular filter in a function like | ucfirst in a JS file?
componentImporter('header');
function componentImporter(name)
{
import {name | ucfirst + 'Component'} from './app/components/'+ name + '/' + name +'.component';
angular.module('app.components').component(name, name | ucfirst + 'Component');
}
Finally an error I run into is:
'import' and 'export' may only appear at the top level
So can this actually ever work?
So can this actually ever work?
Short Answer: No
Long Answer
The error you saw pretty much says it all... imports can't be nested inside conditionals, loops, or other expressions. Here's a great article on ES6 Modules that goes in depth on the subject. Another interesting note, also mentioned in that article, is that imports are hoisted, similar to functions.
How to put a name in the {} and 2) can I use an angular filter in the fuction like | ucfirst in a js file?
From the article:
...the structure of ES6 modules is static
Using a variable in the import would make it dynamic. The bracket syntax you're using can only be written to do a partial import (i.e. Importing named exports from the given module). This is really neat if you're using tree shaking, another article by Dr. Rauschmayer.
Personally I like keeping all my imports at the top of each file making it very easy to see what that particular module is dependent on.
Update
There is now the dynamic import() method. Some bundlers like webpack already support this method natively. This method is what should be used for dynamic importing of modules. Note that "Dynamic Imports" is an umbrella topic that contains a few subtopics including "Code Splitting", "Dynamic Module Expressions", as well as using logic to determine whether a module and its dependencies should be loaded.