Most of the question asking on the site is to how to exclude node_modules
but instead, I'm wondering why would we want to exclude node_modules
?
module.exports = { mode: 'production', entry: './src/index.js', output: { path: path.join(__dirname, 'dist'), filename: 'app.bundle.js' }, module: { rules: [ { test: /\.js$/, loader: 'babel-loader', exclude: /node_modules/, options: { presets: ['@babel/preset-env'] } } ] } };
Can anyone explain to me to the reason behind excluding node_modules
?
babel-loader exposes a loader-builder utility that allows users to add custom handling of Babel's configuration for each file that it processes.
Babel is a compiler; it takes an ESNext program and produces an equivalent ES3+ compatible program. babel-loader does what ts-loader does for TypeScript; passes off files to the Babel compiler, and returns the result to be used in the bundle in-place of the original source program.
If Babel is a translator for JS, you can think of Webpack as a mega-multi-translator that works with all kinds of languages (or assets). For example, Webpack often runs Babel as one of its jobs. Another example, Webpack can collect all your inline CSS styles in your Javascript files and bundle them into one.
In short, transpiling is an expensive process and many projects have thousands (if not hundreds of thousands) of lines of code imported in that babel would need to run over. Your node_modules
should already be runnable without transpiling as said already and there are simple ways to exclude your node_modules
but transpile any code that needs it. See https://github.com/babel/babel-loader/issues/171.
I have seen a lot of arguments back and forth about whether or not it should be the developer consuming the applications job of transpiling the library or the library developer's responsibility. Most of the time transpiling is done for browser support and the library creator has no knowledge of what browsers you need to support so they end up either transpiling or not transpiling leaving it in your hands. If they transpile to ES5 you are golden, if not it is usually a simple enough task to figure out which libraries are causing issues and transpile them yourself
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With