I'm developing a micro frontend architecture using module federation in Webpack in order to develop and deploy all parts of my web application separately. Everything sounds great but the problem is all remote modules should be specified explicitly in the Webpack configuration file. I need something like /plugins in the root directory of my built project And I want to import All .js files in that directory and render all of them in my react project.
Is there a way to implement a plugin system for react components using Webpack? Is there any way at all to achieve this goal?
Related
I would like to develop a UI library using React (without CRA) with Webpack 5, Ts, Storybook, and Third Party Libraries and publish to NPM, and parts of the library components should know how to render SVG as props from the consumer app or in the design of the component.
I saw a couple examples, and they made me very confused. The different guides that I follow build a simple component called a button, and publish it to NPM.
In the first guide, the components were created, then compiled with TS, exported to NPM, and used in a React app created with CRA.
In the second guide, Webpack was used to create the dist folder, then it was published to NPM. And he imported the Button components and used them without any issues.
If you could share with me any knowledge from your experience, what kind of problems can come up, thanks.
Can I use a module bundler for an existing apache/mysql/php backend app (running in docker)? Im adding React components just here and there in some pages. Currently I`m using Babel (not a bundler) but I want to be able to add imports too.
Can some bundler build just the frontend portions of my app (maybe by ignoring php tags)?
I would like to make a new ReactJS component with Typescript and publish it on npm.
My idea is to have only a project folder with:
/dist build for final distribution on npm
node_modules
/public where I will have my index.js to locally run my app for development purposes and one folder components where all files for my distributed component will be stored (only component folder will be published)
and other files like .gitignore, .npmignore, package.json and so on..
Something like this:
I have seen many guides (and spent many hours) figuring out how to publish a ReactJS component like:
Create an NPM Package from a React Component
Create a React Component Library using TypeScript
How To Make a React Component Library - Making A React Library
Publish A React Component On NPM
create-react-library
But most of them have such a complicated structure (like script files, babel files, webpacks ..) and generated files that I don't understand.
My idea was to use react-script to run and develop the app locally and then run tsc to compile my component to build. I thought that I don't need create-react-app/library, babel or webpack to publish a react component - if they are necessary, why do we need them? I just thought it should be possible to do it simply and lightly - like just to take tsx files compile them into js..
To me, it seems that the process of publishing a ReactJS component library with TS to npm is not that well documented. Can you please provide steps or some well and easy-to-understand guide on how to publish react component? Also with all the configurations (configuration files), since I think I messed it somewhere there.
Thanks in advance!
I have 2 apps that have Highcharts already installed
and I developed a separate react component that uses the Highcharts lib.
So I used webpack to generate that component with its dependencies to be imported into the 2 apps.
I did that to make the code DRY so I don't have to write the component code into 2 Apps.
How to import the generated output file from webpack into these apps without giving me the error of reinitializing Highcharts?
In other words how to import the file without any conflicts with the already installed libs in the Apps?
Update
I want the lib to be in the bundled file when in case of importing it into an application that doesn't have the lib.
Update II
I want the lib to be in the bundled file when the client application doesn't have the lib, and when the application has the lib the bundled library is the one that is used by the component.
If you know that environment of your code already have some library you can exclude this library from bundle using externals: https://webpack.js.org/configuration/externals/
Lets say we make a react components library and we need to install react, but we know that we will use our components in our react application where react is already installed.
So, we can mark react as externals in our webpack config like:
module.exports = {
// ...
externals: {
react: 'React'
}
// ...
};
Also we can use DllPlugin for exclude any library or any code from our bundle. https://webpack.js.org/plugins/dll-plugin/
You should add external library to peerDependencies for your own library and add external library to dependencies for your application, then you should exclude external library from bundle of your own library using externals or DllPlugin and you will achieve your goal.
UPD:
If you want to include or exclude external library from your bundle depending on your application you should compile your library two times: with external library and without external library and import needed variant in your application.
Also you can use dynamic imports in your library: check exists the external library in current environment and if doesn't - import it.
But these two cases are not ok, we don't do so.
Webpack can't resolve dynamic imports and the external library anyway will still be bundled.
NPM team created peerDependencies specifically for occasions like yours. This is the industry standard.
Read these, please:
https://docs.npmjs.com/files/package.json#peerdependencies
https://webpack.js.org/guides/author-libraries/#externalize-lodash
https://nodejs.org/es/blog/npm/peer-dependencies/
I don't know how to convince you...
My web development is principally intranet sites and web front-ends for embedded devices using NodeJS.
My current structure is to have everything in one NPM package. I run NodeJS behind Nginx, and let Nginx serve css/image/client-side-javascript files directly from public.
I'm starting to use VueJS and Vuelidate, both of which use the now ES6 modules system - e.g. import { required, minLength } from 'vuelidate/lib/validators'.
While I've (rather hackily) made these work with my current structure, I think the time has come to get into the world of Javascript build-systems/bundlers.
If I use VueJS's preferred option of WebPack, how should I change the structure of my code?
Should I have one NPM package for the frontend (generated by vue-cli init) and another for the Express backend app?
Should I put my Express App into the generated Vue frontend package?
Should I use browserify to do the job of WebPack and stay with my existing structure?
Or something else entirely?
I’m not sure why you’re intent on putting your JavaScript code in other packages. If you have an application then you can keep your raw JavaScript files in there, along with the build script(s). Someone should be able to check your application out and be able to build it.
If you’re looking to get started with a build system, then a nice “bridge” might be to use Mix, a project created by Laravel for building front-end assets such as Sass and JavaScript. It uses Webpack under the hood, but in turn exposes a more user-friendly, fluid API.
If you go down this route, then you could put your raw JavaScript files in a lib/ or src/ directory. You could then use Mix to compile these components like this:
mix.js('lib/your-entry-point-script.js', 'public/js/app.js');
Your entry point script would just be the script that requires all your other scripts and components and the script that you want “built”. Mix would then compile that and place the resultant script at public/js/app.js.
Mix itself is just a npm package, so all you need to do is npm install laravel-mix --save-dev.
You can read more about Mix at https://laravel.com/docs/5.7/mix