如何使用useBuiltIns排除core-js: [英] How to exclude core-js using useBuiltIns: "usage"

问题描述

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

Using babel 7.5.5, core-js 3.1.4 and webpack 4.38.0, how can I exclude core-js from transpiling?

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

I do not want to exclude node_modules altogether since I have libs that need transpiling

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

If I use exclude: /node_modules\/(core-js)/, a core-js module throws

TypeError:$不是函数

TypeError: $ is not a function

这给了我另外两个选择.

This leaves me with two other options.

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

1. Use includes instead, include my src directory and every dependency that needs transpiling one by one
2. Use useBuiltIns: entry instead of usage, since in this case exclude: /node_modules/\(core-js)/ works, and import core.js at the top of main.js

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

Both of these options don't really seem like good solutions to me since usage is "no longer experimental" since 7.4.

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

Is there any way to make it work using usage? Is it a bug in either babel-loader or babel? Or is my configuration at fault?

这是我的Webpack配置:

This is my Webpack config:

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配置:

This is my babel config:

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

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

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

You can reproduce the error with the following repository: https://github.com/tomm1996/usebuiltins-exclude-test

推荐答案

您需要将core-js和webpack/buildin都从Babel翻译中排除.

You need to exclude both core-js and webpack/buildin from the Babel transpilation.

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

You can use the folling exclude Regexes:

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

这也是完整的babel-loader配置，其中包含一些有用的注释:

Here is also a complete babel-loader configuration with some useful comments:

{
  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 }
  }],
}

您可能会遇到类似的错误:

You may run into a similar error:

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来解决:

This can be solved by excluding @babel/runtime-corejs3 from the transpilation:

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

这篇关于如何使用useBuiltIns排除core-js:的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！