diff --git a/README.md b/README.md index 13f0685e..0f236c3b 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,5 @@ > This README is for babel-loader v8 + Babel v7 -> Check the [7.x branch](https://github.com/babel/babel-loader/tree/7.x) for docs with Babel v6 +> If you are using legacy Babel v6, see the [7.x branch](https://github.com/babel/babel-loader/tree/7.x) docs [![NPM Status](https://img.shields.io/npm/v/babel-loader.svg?style=flat)](https://www.npmjs.com/package/babel-loader) [![codecov](https://codecov.io/gh/babel/babel-loader/branch/main/graph/badge.svg)](https://codecov.io/gh/babel/babel-loader) @@ -21,7 +21,7 @@ This package allows transpiling JavaScript files using [Babel](https://github.co

Install

-> webpack 4.x | babel-loader 8.x | babel 7.x +> webpack `4.x || 5.x` | babel-loader 8.x | babel 7.x ```bash npm install -D babel-loader @babel/core @babel/preset-env webpack @@ -38,11 +38,13 @@ module: { rules: [ { test: /\.m?js$/, - exclude: /(node_modules|bower_components)/, + exclude: /node_modules/, use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env'] + presets: [ + ['@babel/preset-env', { targets: "defaults" }] + ] } } } @@ -54,19 +56,21 @@ module: { See the `babel` [options](https://babeljs.io/docs/en/options). -You can pass options to the loader by using the [`options`](https://webpack.js.org/configuration/module/#rule-options-rule-query) property: +You can pass options to the loader by using the [`options`](https://webpack.js.org/configuration/module/#ruleoptions--rulequery) property: ```javascript module: { rules: [ { test: /\.m?js$/, - exclude: /(node_modules|bower_components)/, + exclude: /node_modules/, use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env'], - plugins: ['@babel/plugin-proposal-object-rest-spread'] + presets: [ + ['@babel/preset-env', { targets: "defaults" }] + ], + plugins: ['@babel/plugin-proposal-class-properties'] } } } @@ -94,6 +98,35 @@ To exclude `node_modules`, see the `exclude` option in the `loaders` config as d You can also speed up babel-loader by as much as 2x by using the `cacheDirectory` option. This will cache transformations to the filesystem. +### Some files in my node_modules are not transpiled for IE 11 + +Although we typically recommend not compiling `node_modules`, you may need to when using libraries that do not support IE 11. + +For this, you can either use a combination of `test` and `not`, or [pass a function](https://webpack.js.org/configuration/module/#condition) to your `exclude` option. You can also use negative lookahead regex as suggested [here](https://github.com/webpack/webpack/issues/2031#issuecomment-294706065). + +```javascript +{ + test: /\.m?js$/, + exclude: { + test: /node_modules/, // Exclude libraries in node_modules ... + not: [ + // Except for a few of them that needs to be transpiled because they use modern syntax + /unfetch/, + /d3-array|d3-scale/, + /@hapi[\\/]joi-date/, + ] + }, + use: { + loader: 'babel-loader', + options: { + presets: [ + ['@babel/preset-env', { targets: "ie 11" }] + ] + } + } + } +``` + ### Babel is injecting helpers into each file and bloating my code! Babel uses very small helpers for common functions such as `_extend`. By default, this will be added to every file that requires it. @@ -112,11 +145,13 @@ rules: [ // require the runtime instead of inlining it. { test: /\.m?js$/, - exclude: /(node_modules|bower_components)/, + exclude: /node_modules/, use: { loader: 'babel-loader', options: { - presets: ['@babel/preset-env'], + presets: [ + ['@babel/preset-env', { targets: "defaults" }] + ], plugins: ['@babel/plugin-transform-runtime'] } } @@ -202,9 +237,9 @@ You will need to exclude them form `babel-loader`. "loader": "babel-loader", "options": { "exclude": [ - // \\ for Windows, \/ for Mac OS and Linux - /node_modules[\\\/]core-js/, - /node_modules[\\\/]webpack[\\\/]buildin/, + // \\ for Windows, / for macOS and Linux + /node_modules[\\/]core-js/, + /node_modules[\\/]webpack[\\/]buildin/, ], "presets": [ "@babel/preset-env"