如何使用 useBuiltIns 排除 core-js："usage"

Question

使用 babel 7.5.5、core-js 3.1.4 和 webpack 4.38.0，如何从转译中排除 core-js？

我不想完全排除 node_modules 因为我有需要转译的库

如果我使用 exclude: /node_modules\/(core-js)/，一个 core-js 模块会抛出

TypeError: $ is not a function

这给我留下了另外两个选择。

改用 include，包括我的 src 目录和每个需要一个一个转译的依赖项
使用 useBuiltIns: entry 而不是用法，因为在这种情况下 exclude: /node_modules/\(core-js)/ 有效，并且 import core.js 在 main.js[=47= 的顶部]

这两个选项对我来说都不是很好的解决方案，因为从 7.4 开始 usage 是 "no longer experimental"。

有什么方法可以使用 usage 让它工作吗？它是 babel-loader 还是 babel 中的错误？还是我的配置有问题？

这是我的 Webpack 配置：

const path = require('path');
const webpack = require('webpack');

module.exports = {
    mode: 'production',
    entry: {
        main: ['./src/main'],
    },
    output: {
        path: path.resolve(__dirname, './build/'),
        publicPath: '/build/'
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /node_modules\/(core-js)/,

                use: {
                    loader: 'babel-loader'
                },
            },
            {
                test: require.resolve('jquery'),
                use: [
                    {
                        loader: 'expose-loader',
                        options: 'jQuery'
                    },
                    {
                        loader: 'expose-loader',
                        options: '$'
                    }
                ]
            }
        ]
    },
    plugins: [
        new webpack.ProvidePlugin({
            $: 'jquery',
            jQuery: 'jquery',
            'window.jQuery': 'jquery'
        })
    ],
};

这是我的 babel 配置：

module.exports = function (api) {
    api.cache(true);

    return {
        presets: [
            [
                '@babel/preset-env',
                {
                    corejs: {
                        version: 3,
                    },
                    useBuiltIns: 'usage',
                }
            ]
        ],
    };
};

您可以使用以下存储库重现错误：https://github.com/tomm1996/usebuiltins-exclude-test

Answer 1

您需要从 Babel 转译中排除 core-js 和 webpack/buildin。

您可以使用以下排除正则表达式：

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/
]

这里还有一个完整的 babel-loader 配置和一些有用的注释：

{
  module : {
    rules : [{
      test : /\.js$/,
      // Some module should not be transpiled by Babel
      // See https://github.com/zloirock/core-js/issues/743#issuecomment-572074215
      exclude : [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/
      ],
      loader : "babel-loader",
      options : {
        babelrc : false,
        // Fixes "TypeError: __webpack_require__(...) is not a function"
        // https://github.com/webpack/webpack/issues/9379#issuecomment-509628205
        // https://babeljs.io/docs/en/options#sourcetype
        sourceType : "unambiguous",
        presets : [
          ["@babel/preset-env", {
            // Webpack supports ES Modules out of the box and therefore doesn’t require
            // import/export to be transpiled resulting in smaller builds, and better tree
            // shaking. See https://webpack.js.org/guides/tree-shaking/#conclusion
            modules : false,
            // Adds specific imports for polyfills when they are used in each file.
            // Take advantage of the fact that a bundler will load the polyfill only once.
            useBuiltIns : "usage",
            corejs : {
              version : "3",
              proposals : true
            }
          }]
        ]
      }
    }
  }
}

见https://github.com/zloirock/core-js/issues/743#issuecomment-572074215

编辑：另外，如果您尝试使用 @babel/plugin-transform-runtime:

plugins : [
  // Require the Babel runtime as a separate module to avoid the duplication
  // https://webpack.js.org/loaders/babel-loader/#babel-is-injecting-helpers-into-each-file-and-bloating-my-code
  ["@babel/plugin-transform-runtime", {
    // Requires @babel/runtime-corejs3
    // https://babeljs.io/blog/2019/03/19/7.4.0#migration-from-core-js-2
    corejs : { version: 3, proposals: true }
  }],
}

您可能运行陷入类似的错误：

Uncaught TypeError: _typeof2 is not a function
    at _typeof (typeof.js:8)
    at eval (sockjs.js:123)
    at Object.eval (sockjs.js:131)
    at eval (sockjs.js:6565)
    at Object../node_modules/sockjs-client/dist/sockjs.js (main.js:13790)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)-dev-server/client/clients/SockJSClient.js?:110:14)
    at Object../node_modules/webpack-dev-server/client/clients/SockJSClient.js (main.js:13874)
    at __webpack_require__ (main.js:70)
    at eval (webpack://PUBLIC_ENGINE/(:8000/webpack)-dev-server/client/socket.js?:56:41)

这可以通过从转译中排除 @babel/runtime-corejs3 来解决：

exclude : [
  /\bcore-js\b/,
  /\bwebpack\/buildin\b/,
  /@babel\/runtime-corejs3/
]

如何使用 useBuiltIns 排除 core-js："usage"

How to exclude core-js using useBuiltIns: "usage"

javascript

webpack

babeljs

babel-loader

core-js