Let's say I have multiple javascript files, along with several node modules, and in each file I do something like this:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
I find myself repeating this same code across all my javascript files, so I'm wondering is there a compact way (like bundling) to add all this to a single file, and just import from that?
Like:
in all_the_things.js:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
Then add only this line in all javascript files:
import * from 'all_the_things.js'
I tried reading some documentation to give me ideas, but I'm at a loss here.
I had no idea I literally wrote the answer in the question. I tried all kinds of stuff, except what I posted. When I tried it, it worked.
If you put
in all_the_things.js:
import 'node_module_a'
import 'node_module_b'
import 'node_module_c'
then you do this in the caller js file:
import 'all_the_things'
it will import all the nodes. Also, I found out if you put those imports in a parent file, loading only once, it will be viewed by other child components.
Related
If there's a zero-dependencies function zdfun, but in a module/file foo.js that imports further dependencies, and I'm solely interested in zdfun, is it possible to import it without Node trying to load all the other dependencies in foo.js?
Obviously one should normally just pull zdfun out, place it in its own module, and import that in foo.js. Sadly this is not feasible in this case for various reasons.
if zdfun is declared in its own file where no other depencies are imported you can do :
import { zdfun } from '<module_name>';
And this will not import useless depencies.
I hope this answer your question
Having the following import done into a test file:
This works fine, but the problem appears when I want to import it into another file, here it is:
What is wrong with this import?
If you're in the components directory already, going up 3 levels takes you to /libs so you don't need the /libs in your path just
../../../shared
By the way - screenshots not so good text better.
I have read somewhere that importing module in react with curly braces around imports the entire library instead and effectively increases the bundle size. I was using this concept and was successfull in importing modules without curly braces, like this:
import Jumbotron from 'reactstrap';
and it was working fine. I don't know why the next time I build the code, it started showing me this warning:
WARNING in ./React Coursera/Header.js 5:71-77
export default (imported as Jumbotron) was not found in reactstrap.
Also the app didn't run in browser.
Then I went to node_modules to check if export default is present in jumbotron or not, and I found this statement:
export default Jumbotron;
It means that indeed it was exporting the Jumbotron as default, then why it showed me this warning.
Can you help me guys to fix this problem?
Thanks in advance!
Where did you read that importing with curly will increase the bundle size, it's reverse,
// below line will import everything
import * as reactstrap from 'reactstrap'
But
// this will import only specific module
import { Jumbotron } from 'reactstrap'
By this line :
// will import from /reactstrap/index.js
import Jumbotron from 'reactstrap';
You are importing nothing https://github.com/reactstrap/reactstrap/blob/master/src/index.js , as there is export default
So I don't know how it worked before in your case
Below line :
// and this line is not inside the /reactstrap/index.js but /reactstrap/Jumbotron.js
export default Jumbotron;
is here : https://github.com/reactstrap/reactstrap/blob/master/src/Jumbotron.js
So you can do :
import { Jumbotron } from 'reactstrap'
It depends on your build setup and/or how the library code is setup. Some libraries are built in a way that won't import the entire library when you use curly braces. You can also have something enabled in your build tools called "tree shaking" which will remove all code that is unused.
I'm guessing what you were trying to do was import Jumbotron individually which is a safe bet when you are unsure if the whole lib will be imported. Again, it depends on the file structure of the library but you are probably missing the sub-directory in your import. There should be directories inside of the node_module folder for each component. Might be something like node_modules/reactstrap/Jumbotron. The default export you saw was probably on the Jumbotron file. When you use import Jumbotron from 'reactstrap' you are asking it do find a default export for the "main" file of the library. This would be defined in the package.json file of the library.
What you need to do is add the sub-directory to your import like so (just guessing here) import Jumbotron from 'reactstrap/Jumbotron'. Just think of reactstrap/ being the root directory of the library, you can select any file like you normally would.
If you are using webpack, there's this awesome plugin where you can check to see what is included in your bundles just to make sure you are indeed only importing the code that you need https://github.com/webpack-contrib/webpack-bundle-analyzer
i have a question about multiple imports in React.
i have a structure like that eg:
src
validations
required
index.js
number
index.js
and i basically import these files to my React component with this way and everything works well
import {required} from "validations/required";
import {number} from "validations/number";
but when these imports is to much my file is getting so much line of code and looks ugly.
so i tried to make it like that:
import {required, number} from "validations";
and like that:
import {required, number} from "validations/";
booth solutions not worked.
It's giving to me error:
Module not found: Can't resolve 'validations/' in '/Users/...../Components/MyComponent'
i didn't understand why but seems like react search that files in my MyComponent folder.
how can handle it ?
So my understanding is that when you are distributing a React component for others to use, you should ship the compiled version of it, rather than the source and expecting the end-user to deal with integrating it into their own build process.
That sounds reasonable, but I am not sure the best strategy for bundling css and other assets like images.
One way would be to inline, but inlining seems discouraged for anything of moderate size.
Another way could be to import the css and images into the file that is importing the component from the library. Then the build process of the end-user's app would handle the rest. Like:
import CoolComponent from 'CoolReactLibrary';
import 'CoolReactLibrary/css/styles.css';
import 'CoolReactLibrary/images/logo.png';
...
That seems cumbersome and even more so if I have a component library of a bunch of smaller components like this:
import PrimaryButton from 'CoolReactLibrary/buttons';
import 'CoolReactLibrary/buttons/primary-button/styles.css';
import Card from 'CoolReactLibrary/layout';
import 'CoolReactLibrary/layout/card/styles.css';
import VerticalMenu from 'CoolReactLibrary/menus';
import 'CoolReactLibrary/menus/vertical-navigation/styles.css';
My preference would be to just have the end-user do this:
import PrimaryButton from 'CoolReactLibrary/buttons';
import Card from 'CoolReactLibrary/layout';
import VerticalMenu from 'CoolReactLibrary/menus';
And everything from there just work.
Anyone find a clean solution for this?