如何使用useBuiltIns排除core-js：“用法”

Question

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

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

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

TypeError：$不是函数

这给了我另外两个选择。

1. 改为使用包括，包括我的src目录和每个需要一个一编译的依赖项
2. 使用useBuiltIns: entry代替用法，因为在这种情况下exclude: /node_modules/\(core-js)/有效，并且import core.js位于main.js的顶部

这两个选项对我来说似乎都不是很好的解决方案，因为从7.4开始，usage不再“处于试验阶段。

有什么方法可以使它通过使用来工作？是babel-loader还是babel中的bug？还是我的配置有问题？

这是我的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 same 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/
]