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?
Related
Background:
I am building a reusable carousel component using react-multi-carousel library which requires a direct css import into my React component so the carousel component can render specific styles, ie import 'react-multi-carousel/lib/styles.css';. I am currently using tsc to bundle/compile my ts code, but when looking at the bundle, the css import/styles doesn't get resolved. Below is the compiled code (just the imports) in which you can see the css import is imported like so:
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useRef } from 'react';
import ScrollingCarousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
import styled from 'styled-components';
The issue I have is this forces the consuming app of this reusable component to have to use specific compiler to know how to handle css imports into a jsx file (such as css-loader and style-loader for webpack). Is there a way that I can compile this CSS file down to styles within the js file rather than an import so I can avoid css compiling in the consuming app?
Thanks in advance
I was wondering if it is beneficial for performance in Vue to only import necessary dependencies per component or if all dependencies that are used in some components should just be loaded globally? How does Vue compile the components? Is it the case that all of them are loaded anyway when one page of the app is loaded, or are components also loaded on-the-go?
More concrete:
Is it better to do this:
<template>
... Some template code
</template>
<script>
import { MdDialog, MdContent, MdButton } from 'vue-material/dist/components'
export default {
...
}
</script>
Or is it better to import these things globally in app.js, even if some components only use a fraction of them?
This should be a matter of preference.
It won't have a noticeable impact on performance as the build process handles these multiple imports.
If you chose to import locally you will see where things come from... Otherwise on larger codebase it could lead to a lot of confusion.
Another thing is if you decide to make async component import. If the imports are only used in the dynamically imported component they should come with it's chunk, otherwise if they get imported in more than one component local importing would mean code duplication...
I hope I was helpful.
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.
I’m running my react app via Node. Is there a way to easily handle this import hell?
I’m running
./node_modules/.bin/babel-node --presets react,es2015 server/server.js
as npm start. And server.js is a simple Express Server that serves a ReactDOMServer.renderToString(<MyApp />)
Some of my react components have something like this:
import GenericTemplate from "../../templates/GenericTemplate/GenericTemplate";
import Footer from "../../organisms/Footer/Footer";
import Header from "../../organisms/Header/Header";
import Hero from "../../organisms/Hero/Hero";
import MainMenu from "../../organisms/MainMenu/MainMenu";
import TodoList from "../../organisms/TodoList/TodoList";
this is prone to error, one changement like directory name would result in manually entering every file to update this.
do you have any idea how I can fix this. Ideally I would have something like this:
import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"
is that possible? How?
Thank you!
This also doesn't look a lot better to me:
import { Footer, Header, Hero, MainMenu, TodoList } from "myComponents"
... because in order to do that, you need to export / import to "myComponents" every time you create a new component.
The core issue I see in your example is that using relative paths for imports makes your code base very hard to maintain.
To escape the "import hell" in React, one popular option is to make the import statements without relative paths.
With a minor tweak to your Webpack configuration, you can get it to load files relative to the app root. See here and read more here.
You can create a common components file in your organisms directory to achieve that. Just create a new common.js or whatever name with the following:
export Footer from "./Footer/Footer";
export Header from "./Header/Header";
export Hero from "./Hero/Hero";
export MainMenu from "./MainMenu/MainMenu";
export TodoList from "./TodoList/TodoList";
Then in your other file:
import { Footer, Header, Hero, MainMenu, TodoList } from "path to common.js"
I've around 20 jsx files with the few repeated imports like :
import React from 'react';
import { Form } from 'formsy-react';
import AppActions from '../../utils/actions/app-actions';
import store, {formStore} from '../../utils/stores/stores';
import AppConstants from '../../utils/constants/app-constants';
which cause my bundle.js weight more than 1.7 Mb even after minification.
Is there any possiblity to import these modules from any where else so that I don't need to import these again and again.
I think there is a misunderstanding here between Webpack, ES6 and a module.
Webpack is going to analyse your javascript code and detect the dependencies, based on that it will include the modules you need in your bundle, there is no duplicate there, every module is added only once in the proper order to resolve the dependencies while avoiding duplicates of code.
ES6 import export syntax convention requires to define the imports you need in every file that requires them, so browsers or tools like Webpack can properly detect dependencies and only use files they need.
1.7 Mb can be considered as a big file for a web page, but with a proper caching/minification it can be loaded instantly