javascript - 如何使用 useBuiltIns : "usage" 排除 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)/ , core-js 模块抛出

TypeError: $ is not a function

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

改用包含，包括我的 src 目录和需要一个一个转换的每个依赖项

使用useBuiltIns: entry而不是使用，因为在这种情况下 exclude: /node_modules/\(core-js)/工作，和import main.js 顶部的 core.js

自从 usage 以来，这两个选项对我来说似乎都不是好的解决方案。自 7.4 起“不再是实验性的”。

有什么方法可以让它使用用法吗？它是 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

您需要同时排除 core-js和 webpack/buildin来自 Babel 转译。

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

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/
]