babel-loader 8.0.6 → 8.2.2

package/README.md

@@ -1,10 +1,8 @@
 > 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)
-[![Build Status](https://travis-ci.org/babel/babel-loader.svg?branch=master)](https://travis-ci.org/babel/babel-loader)
-[![Build Status](https://ci.appveyor.com/api/projects/status/77y5mk6amwqt0q88/branch/master?svg=true)](https://ci.appveyor.com/project/babel/babel-loader/branch/master)
-[![codecov](https://codecov.io/gh/babel/babel-loader/branch/master/graph/badge.svg)](https://codecov.io/gh/babel/babel-loader)
+[![codecov](https://codecov.io/gh/babel/babel-loader/branch/main/graph/badge.svg)](https://codecov.io/gh/babel/babel-loader)
 
 <div align="center">
   <a href="https://github.com/babel/babel">
@@ -23,7 +21,7 @@ This package allows transpiling JavaScript files using [Babel](https://github.co
 
 <h2 align="center">Install</h2>
 
-> 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
@@ -40,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" }]
+          ]
         }
       }
     }
@@ -56,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']
         }
       }
     }
@@ -84,7 +86,7 @@ This loader also supports the following loader-specific option:
 
 * `cacheCompression`: Default `true`. When set, each Babel transform output will be compressed with Gzip. If you want to opt-out of cache compression, set it to `false` -- your project may benefit from this if it transpiles thousands of files.
 
-* `customize`: Default `null`. The path of a module that exports a `custom` callback [like the one that you'd pass to `.custom()`](#customized-loader). Since you already have to make a new file to use this, it is recommended that you instead use `.custom` to create a wrapper loader. Only use this is you _must_ continue using `babel-loader` directly, but still want to customize.
+* `customize`: Default `null`. The path of a module that exports a `custom` callback [like the one that you'd pass to `.custom()`](#customized-loader). Since you already have to make a new file to use this, it is recommended that you instead use `.custom` to create a wrapper loader. Only use this if you _must_ continue using `babel-loader` directly, but still want to customize.
 
 ## Troubleshooting
 
@@ -96,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.
@@ -114,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']
       }
     }
@@ -128,7 +161,7 @@ rules: [
 
 #### **NOTE**: transform-runtime & custom polyfills (e.g. Promise library)
 
-Since [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/master/packages/babel-plugin-transform-runtime) includes a polyfill that includes a custom [regenerator-runtime](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js) and [core-js](https://github.com/zloirock/core-js), the following usual shimming method using `webpack.ProvidePlugin` will not work:
+Since [@babel/plugin-transform-runtime](https://github.com/babel/babel/tree/main/packages/babel-plugin-transform-runtime) includes a polyfill that includes a custom [regenerator-runtime](https://github.com/facebook/regenerator/blob/master/packages/regenerator-runtime/runtime.js) and [core-js](https://github.com/zloirock/core-js), the following usual shimming method using `webpack.ProvidePlugin` will not work:
 
 ```javascript
 // ...
@@ -193,6 +226,59 @@ In the case one of your dependencies is installing `babel` and you cannot uninst
   }
 ```
 
+### Exclude libraries that should not be transpiled
+
+`core-js` and `webpack/buildin` will cause errors if they are transpiled by Babel.
+
+You will need to exclude them form `babel-loader`.
+
+```js
+{
+  "loader": "babel-loader",
+  "options": {
+    "exclude": [
+      // \\ for Windows, / for macOS and Linux
+      /node_modules[\\/]core-js/,
+      /node_modules[\\/]webpack[\\/]buildin/,
+    ],
+    "presets": [
+      "@babel/preset-env"
+    ]
+  }
+}
+```
+
+## Customize config based on webpack target
+
+Webpack supports bundling multiple [targets](https://webpack.js.org/concepts/targets/). For cases where you may want different Babel configurations for each target (like `web` _and_ `node`), this loader provides a `target` property via Babel's [caller](https://babeljs.io/docs/en/config-files#apicallercb) API.
+
+For example, to change the environment targets passed to `@babel/preset-env` based on the webpack target:
+
+```javascript
+// babel.config.js
+
+module.exports = api => {
+  return {
+    plugins: [
+      "@babel/plugin-proposal-nullish-coalescing-operator",
+      "@babel/plugin-proposal-optional-chaining"
+    ],
+    presets: [
+      [
+        "@babel/preset-env",
+        {
+          useBuiltIns: "entry",
+          // caller.target will be the same as the target option from webpack
+          targets: api.caller(caller => caller && caller.target === "node")
+            ? { node: "current" }
+            : { chrome: "58", ie: "11" }
+        }
+      ]
+    ]
+  }
+}
+```
+
 ## Customized Loader
 
 `babel-loader` exposes a loader-builder utility that allows users to add custom handling

package/lib/cache.js

@@ -23,11 +23,11 @@ const zlib = require("zlib");
 
 const crypto = require("crypto");
 
-const mkdirpOrig = require("mkdirp");
-
 const findCacheDir = require("find-cache-dir");
 
-const promisify = require("pify");
+const {
+  promisify
+} = require("util");
 
 const transform = require("./transform"); // Lazily instantiated when needed
 
@@ -37,17 +37,18 @@ const readFile = promisify(fs.readFile);
 const writeFile = promisify(fs.writeFile);
 const gunzip = promisify(zlib.gunzip);
 const gzip = promisify(zlib.gzip);
-const mkdirp = promisify(mkdirpOrig);
+
+const makeDir = require("make-dir");
 /**
  * Read the contents from the compressed file.
  *
  * @async
  * @params {String} filename
+ * @params {Boolean} compress
  */
 
-const read =
-/*#__PURE__*/
-function () {
+
+const read = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(function* (filename, compress) {
     const data = yield readFile(filename + (compress ? ".gz" : ""));
     const content = compress ? yield gunzip(data) : data;
@@ -63,13 +64,12 @@ function () {
  *
  * @async
  * @params {String} filename
+ * @params {Boolean} compress
  * @params {String} result
  */
 
 
-const write =
-/*#__PURE__*/
-function () {
+const write = /*#__PURE__*/function () {
   var _ref2 = _asyncToGenerator(function* (filename, compress, result) {
     const content = JSON.stringify(result);
     const data = compress ? yield gzip(content) : content;
@@ -108,9 +108,7 @@ const filename = function (source, identifier, options) {
  */
 
 
-const handleCache =
-/*#__PURE__*/
-function () {
+const handleCache = /*#__PURE__*/function () {
   var _ref3 = _asyncToGenerator(function* (directory, params) {
     const {
       source,
@@ -130,7 +128,7 @@ function () {
     const fallback = typeof cacheDirectory !== "string" && directory !== os.tmpdir(); // Make sure the directory exists.
 
     try {
-      yield mkdirp(directory);
+      yield makeDir(directory);
     } catch (err) {
       if (fallback) {
         return handleCache(os.tmpdir(), params);
@@ -166,38 +164,28 @@ function () {
  *
  * @async
  * @param  {Object}   params
- * @param  {String}   params.directory  Directory to store cached files
- * @param  {String}   params.identifier Unique identifier to bust cache
+ * @param  {String}   params.cacheDirectory   Directory to store cached files
+ * @param  {String}   params.cacheIdentifier  Unique identifier to bust cache
+ * @param  {Boolean}  params.cacheCompression Whether compressing cached files
  * @param  {String}   params.source   Original contents of the file to be cached
  * @param  {Object}   params.options  Options to be given to the transform fn
- * @param  {Function} params.transform  Function that will transform the
- *                                      original file and whose result will be
- *                                      cached
  *
  * @example
  *
- *   cache({
- *     directory: '.tmp/cache',
- *     identifier: 'babel-loader-cachefile',
+ *   const result = await cache({
+ *     cacheDirectory: '.tmp/cache',
+ *     cacheIdentifier: 'babel-loader-cachefile',
  *     cacheCompression: false,
  *     source: *source code from file*,
  *     options: {
  *       experimental: true,
  *       runtime: true
  *     },
- *     transform: function(source, options) {
- *       var content = *do what you need with the source*
- *       return content;
- *     }
- *   }, function(err, result) {
- *
  *   });
  */
 
 
-module.exports =
-/*#__PURE__*/
-function () {
+module.exports = /*#__PURE__*/function () {
   var _ref4 = _asyncToGenerator(function* (params) {
     let directory;
 

package/lib/index.js

@@ -32,12 +32,16 @@ const transform = require("./transform");
 
 const injectCaller = require("./injectCaller");
 
+const schema = require("./schema");
+
 const {
   isAbsolute
 } = require("path");
 
 const loaderUtils = require("loader-utils");
 
+const validateOptions = require("schema-utils");
+
 function subscribe(subscriber, metadata, context) {
   if (context[subscriber]) {
     context[subscriber](metadata);
@@ -64,6 +68,9 @@ function _loader() {
   _loader = _asyncToGenerator(function* (source, inputSourceMap, overrides) {
     const filename = this.resourcePath;
     let loaderOptions = loaderUtils.getOptions(this) || {};
+    validateOptions(schema, loaderOptions, {
+      name: "Babel loader"
+    });
 
     if (loaderOptions.customize != null) {
       if (typeof loaderOptions.customize !== "string") {
@@ -139,9 +146,13 @@ function _loader() {
 
     if (!babel.loadPartialConfig) {
       throw new Error(`babel-loader ^8.0.0-beta.3 requires @babel/core@7.0.0-beta.41, but ` + `you appear to be using "${babel.version}". Either update your ` + `@babel/core version, or pin you babel-loader version to 8.0.0-beta.2`);
-    }
+    } // babel.loadPartialConfigAsync is available in v7.8.0+
+
 
-    const config = babel.loadPartialConfig(injectCaller(programmaticOptions));
+    const {
+      loadPartialConfigAsync = babel.loadPartialConfig
+    } = babel;
+    const config = yield loadPartialConfigAsync(injectCaller(programmaticOptions, this.target));
 
     if (config) {
       let options = config.options;

package/lib/injectCaller.js

@@ -2,14 +2,21 @@
 
 const babel = require("@babel/core");
 
-module.exports = function injectCaller(opts) {
+module.exports = function injectCaller(opts, target) {
   if (!supportsCallerOption()) return opts;
   return Object.assign({}, opts, {
     caller: Object.assign({
       name: "babel-loader",
+      // Provide plugins with insight into webpack target.
+      // https://github.com/babel/babel-loader/issues/787
+      target,
       // Webpack >= 2 supports ESM and dynamic import.
       supportsStaticESM: true,
-      supportsDynamicImport: true
+      supportsDynamicImport: true,
+      // Webpack 5 supports TLA behind a flag. We enable it by default
+      // for Babel, and then webpack will throw an error if the experimental
+      // flag isn't enabled.
+      supportsTopLevelAwait: true
     }, opts.caller)
   });
 }; // TODO: We can remove this eventually, I'm just adding it so that people have

package/lib/schema.json

@@ -0,0 +1,28 @@
+{
+  "type": "object",
+  "properties": {
+    "cacheDirectory": {
+      "oneOf": [
+        {
+          "type": "boolean"
+        },
+        {
+          "type": "string"
+        }
+      ],
+      "default": false
+    },
+    "cacheIdentifier": {
+      "type": "string"
+    },
+    "cacheCompression": {
+      "type": "boolean",
+      "default": true
+    },
+    "customize": {
+      "type": "string",
+      "default": null
+    }
+  },
+  "additionalProperties": true
+}

package/lib/transform.js

@@ -6,15 +6,15 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 const babel = require("@babel/core");
 
-const promisify = require("pify");
+const {
+  promisify
+} = require("util");
 
 const LoaderError = require("./Error");
 
 const transform = promisify(babel.transform);
 
-module.exports =
-/*#__PURE__*/
-function () {
+module.exports = /*#__PURE__*/function () {
   var _ref = _asyncToGenerator(function* (source, options) {
     let result;
 
@@ -26,7 +26,7 @@ function () {
 
     if (!result) return null; // We don't return the full result here because some entries are not
     // really serializable. For a full list of properties see here:
-    // https://github.com/babel/babel/blob/master/packages/babel-core/src/transformation/index.js
+    // https://github.com/babel/babel/blob/main/packages/babel-core/src/transformation/index.js
     // For discussion on this topic see here:
     // https://github.com/babel/babel-loader/pull/629
 

package/package.json

@@ -1,51 +1,54 @@
 {
   "name": "babel-loader",
-  "version": "8.0.6",
+  "version": "8.2.2",
   "description": "babel module loader for webpack",
   "files": [
     "lib"
   ],
   "main": "lib/index.js",
   "engines": {
-    "node": ">= 6.9"
+    "node": ">= 8.9"
   },
   "dependencies": {
-    "find-cache-dir": "^2.0.0",
-    "loader-utils": "^1.0.2",
-    "mkdirp": "^0.5.1",
-    "pify": "^4.0.1"
+    "find-cache-dir": "^3.3.1",
+    "loader-utils": "^1.4.0",
+    "make-dir": "^3.1.0",
+    "schema-utils": "^2.6.5"
   },
   "peerDependencies": {
     "@babel/core": "^7.0.0",
     "webpack": ">=2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.2.0",
-    "@babel/core": "^7.2.0",
-    "@babel/preset-env": "^7.2.0",
-    "ava": "^1.1.0",
+    "@ava/babel": "^1.0.1",
+    "@babel/cli": "^7.12.1",
+    "@babel/core": "^7.12.3",
+    "@babel/preset-env": "^7.12.1",
+    "ava": "^3.13.0",
     "babel-eslint": "^10.0.1",
-    "babel-plugin-istanbul": "^5.1.0",
-    "babel-plugin-react-intl": "^3.0.1",
-    "cross-env": "^5.2.0",
-    "eslint": "^5.9.0",
+    "babel-plugin-istanbul": "^6.0.0",
+    "babel-plugin-react-intl": "^8.2.15",
+    "cross-env": "^7.0.2",
+    "eslint": "^7.13.0",
     "eslint-config-babel": "^9.0.0",
-    "eslint-config-prettier": "^4.1.0",
-    "eslint-plugin-flowtype": "^3.2.0",
+    "eslint-config-prettier": "^6.3.0",
+    "eslint-plugin-flowtype": "^5.2.0",
     "eslint-plugin-prettier": "^3.0.0",
-    "husky": "^1.2.0",
-    "lint-staged": "^8.1.0",
-    "nyc": "^14.1.1",
-    "prettier": "^1.15.3",
-    "react": "^16.0.0",
-    "react-intl": "^2.1.2",
+    "husky": "^4.3.0",
+    "lint-staged": "^10.5.1",
+    "nyc": "^15.1.0",
+    "pnp-webpack-plugin": "^1.6.4",
+    "prettier": "^2.1.2",
+    "react": "^17.0.1",
+    "react-intl": "^5.9.4",
     "react-intl-webpack-plugin": "^0.3.0",
-    "rimraf": "^2.4.3",
-    "webpack": "^4.0.0"
+    "rimraf": "^3.0.0",
+    "semver": "7.3.2",
+    "webpack": "^5.4.0"
   },
   "scripts": {
     "clean": "rimraf lib/",
-    "build": "babel src/ --out-dir lib/",
+    "build": "babel src/ --out-dir lib/ --copy-files",
     "format": "prettier --write --trailing-comma all 'src/**/*.js' 'test/**/*.test.js' 'test/helpers/*.js' && prettier --write --trailing-comma es5 'scripts/*.js'",
     "lint": "eslint src test",
     "precommit": "lint-staged",
@@ -90,9 +93,11 @@
       "!test/fixtures/**/*",
       "!test/helpers/**/*"
     ],
-    "sources": [
-      "src/**/*.js"
-    ]
+    "babel": {
+      "compileAsTests": [
+        "test/helpers/**/*"
+      ]
+    }
   },
   "lint-staged": {
     "scripts/*.js": [
@@ -116,4 +121,4 @@
       "git add yarn.lock"
     ]
   }
-}
+}