javascript - 为什么看起来整个 core-js 库都与我的 webpack 设置捆绑在一起?

标签 javascript webpack babeljs core-js

我正在使用带有 Babel 的 Webpack,并且 @babel/preset-env希望只导入我需要的 polyfill。似乎正在安装整个库,导致一个大包(~250kb)
我的 package.js:

    {
      "name": "holidaynewtheme",
      "version": "0.1",
      "description": "Starter theme for holidaynewbase",
      "private": true,
      "main": "webpack.config.js",
      "dependencies": {
        "core-js": "^3.6.5",
        "element-closest": "^3.0.2",
        "flickity": "^2.2.1",
        "gsap": "^3.4.2",
        "js-cookie": "^2.2.1",
        "turbolinks": "^5.2.0",
        "vanilla-lazyload": "^17.1.0",
        "whatwg-fetch": "^3.4.0"
      },
      "devDependencies": {
        "@babel/core": "^7.11.0",
        "@babel/plugin-transform-runtime": "^7.8.3",
        "@babel/preset-env": "^7.8.4",
        "@babel/runtime": "^7.8.4",
        "@shopify/theme-cart": "^3.0.3",
        "@shopify/theme-product": "^3.0.3",
        "@shopify/theme-product-form": "^3.0.3",
        "@shopify/themekit": "^1.1.3",
        "autoprefixer": "^9.7.4",
        "babel-loader": "^8.0.6",
        "bluebird": "^3.5.3",
        "copy-webpack-plugin": "^5.1.1",
        "cross-env": "^7.0.2",
        "css-loader": "^3.4.2",
        "eslint": "^6.8.0",
        "file-loader": "^3.0.1",
        "glob": "^7.1.6",
        "html-includes": "^4.3.3",
        "mini-css-extract-plugin": "^0.9.0",
        "modernizr": "^3.6.0",
        "modernizr-loader": "^1.0.1",
        "node-sass": "^4.13.1",
        "postcss-loader": "^3.0.0",
        "pre-commit": "^1.2.2",
        "sass-loader": "^8.0.2",
        "svg-symbols": "^1.0.5",
        "url-loader": "^1.1.2",
        "webpack": "^4.41.6",
        "webpack-bundle-analyzer": "^3.8.0",
        "webpack-cli": "^3.3.11",
        "webpack-shell-plugin-next": "^1.1.5"
      },
      "browserslist": [
        "last 1 version",
        "> 2%",
        "Explorer >= 11"
      ]
    }
我的 babel.config.json:
            {
                "presets": [
                    [
                        "@babel/preset-env",
                        {
                            useBuiltIns: "entry",
                            debug: true,
                            corejs: "3.6.4"
                        }
                    ]
                ],
                "plugins": [
                    "@babel/plugin-transform-runtime"
                ]
            }
我在主入口点设置了以下导入:
import 'core-js/stable';
import 'regenerator-runtime/runtime';
我正在使用 BundleAnalyzerPlugin 并为 core-js 获得 250kb 的压缩大小:
BundleAnalyzerPlugin
当我更改 browserslist设置只是 Chrome 85 , 没有任何形式的 core-js 被导入。
当我删除导入行时,也没有导入任何内容。

最佳答案

好吧,感觉很傻。
我的 webpack.config.jsbabel-loader 设置了此配置:

{
    test: /\.js$/,
    exclude: /node_modules/,
    loader: 'babel-loader',
    query: {
      presets: ['@babel/env'],
    }
  }, 
...我不是 webpack 设置的 au faix,所以我认为这是覆盖我的 babel.config.json 的任何东西 .js .
另外,我删除了导入行,并更改了 useBuiltIns成为 usage一切都按预期进行。
赠品应该是我的 debug: true在编译 webpack 时不会导致记录调试信息。现在是,而且我的捆绑包要小得多。

关于javascript - 为什么看起来整个 core-js 库都与我的 webpack 设置捆绑在一起?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63821778/

相关文章:

javascript - 使用 webpack-stream & gulp 不会转译 ES6 导入

javascript - Grunt watch 任务无法转换 ES6 代码

node.js - 如何在 Heroku 上运行启用了 ES2017 功能的 Node.js 应用程序?

reactjs - webpack 生成的源映射可以工作,但无法正确调试

javascript - 为什么我不能将对变量的引用作为 JSON 属性的键传递?

Javascript - 如何遍历给定页面的所有 URL

javascript - 如何将包含 JSON 的 JSON NSString 从 Objective C 方法传递给 Javascript 方法

javascript - 根据特定的onChange更新mysql

javascript - 包含 JavaScript 代码而不打包为模块

webpack - 使用 babel 6 时为 ` __webpack_require__(...) is not a function`