Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Why would we exclude node_modules when using babel-loader?

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?

like image 752
Isaac Avatar asked Jan 12 '19 03:01

Isaac


People also ask

Why do we need babel-loader?

babel-loader exposes a loader-builder utility that allows users to add custom handling of Babel's configuration for each file that it processes.

How does a babel-loader work?

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.

Why does Webpack need babel?

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.


1 Answers

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

like image 154
Austin Mehmet Avatar answered Sep 27 '22 02:09

Austin Mehmet