What is the best module system for a React component library?
- By : Mydatahack
- Category : Front-End, Web Technologies
- Tags: Frontend build, JavaScript, React
JavaScript module system has been evolving as the language and technology evolves. There are a few different modules systems you can choose when you are bundling a JS library.
The best module system for a frontend component library is ESM. It stands for ES Modules. It is It is the official standard format to package JavaScript (see the language spec). Node.js supports it, too (see the announcement).
Because:
1. ESM works in many modern browser (see browser support).
2. It uses import and export statement and compiled code has an easy-to-understand syntax.
3. Due to ES6’s static module structure, you can tree-shake it. This means using a bundler like Rollup can remove unnecessary code.
4. You can call it in HTML with adding type=”module” in the script tag.
5. ESM is a more secure system than CJS. While both module and exports can be replaced on the fly within the module itself in CJS, this is not possible with ESM because nothing outside the module itself can mutate is own export (by this mechanism).