javascript - How to exclude core-js using useBuiltIns: "usage" - Stack Overflow

admin管理员组

文章数量:1291041

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

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

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

TypeError: $ is not a function

This leaves me with two other options.

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

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

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?

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'
        })
    ],
};

This is my babel config:

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

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

You can reproduce the error with the following repository:

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

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

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

TypeError: $ is not a function

This leaves me with two other options.

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

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

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?

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'
        })
    ],
};

This is my babel config:

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

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

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

• javascript
• webpack
• babeljs
• babel-loader
• core-js

Share Improve this question Follow edited Jan 8, 2020 at 12:21 Tom M asked Aug 5, 2019 at 15:11 Tom MTom M 2,90422 gold badges2222 silver badges4848 bronze badges 2

• I'm facing the same problem, you may have a look at github./babel/babel/issues/7559 and github./zloirock/core-js/issues/743 I don't have a solution at the moment but I'll keep you updated – Yves M. Commented Jan 8, 2020 at 11:34
• @YvesM. much appreciated. I've been falling back to just using entry instead since running into this issue – Tom M Commented Jan 8, 2020 at 12:24

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 9

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

Here is also a plete babel-loader configuration with some useful ments:

{
  module : {
    rules : [{
      test : /\.js$/,
      // Some module should not be transpiled by Babel
      // See https://github./zloirock/core-js/issues/743#issuement-572074215
      exclude : [
        /\bcore-js\b/,
        /\bwebpack\/buildin\b/
      ],
      loader : "babel-loader",
      options : {
        babelrc : false,
        // Fixes "TypeError: __webpack_require__(...) is not a function"
        // https://github./webpack/webpack/issues/9379#issuement-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/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
            }
          }]
        ]
      }
    }
  }
}

See https://github./zloirock/core-js/issues/743#issuement-572074215

---

Edit: Also if you try to use @babel/plugin-transform-runtime:

plugins : [
  // Require the Babel runtime as a separate module to avoid the duplication
  // https://webpack.js/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)

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

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

本文标签： javascriptHow to exclude corejs using useBuiltIns quotusagequotStack Overflow