Question

4个月后，我回到了Webpack 4配置和所有软件包。它总是让我感到惊讶，软件包更新或淘汰的速度有多快。

我有这个问题，我曾经将@ babel / polyfill和其他JS和SASS源一起直接包含在Webpack的入口=> src中。

这是我当前的.babelrc文件：

{
    "presets": [
        [
            "@babel/preset-env",
            {
                "useBuiltIns": "entry",
                "corejs": "core-js@2",
                "debug": false
            }
        ]
    ]
}

我的Webpack的输入设置：

entry: {
    src: [paths.entry.polyfill(), paths.entry.js(), paths.entry.sass()]
},

还有我设置所有导出的配置：

entry: {
    sass: () => path.resolve(module.exports.sass(), './style.scss'),
    js: () => path.resolve(module.exports.js(), './index.js'),
    polyfill: () => '@babel/polyfill'
},

我的带有Babel文件的package.json：

"@babel/core": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.4",
"autoprefixer": "^9.4.4",
"babel-eslint": "10.0.1",
"babel-loader": "^8.0.5",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.7.0",

从今天开始，我可以将任何替代品用于@ babel / polyfill吗？

我想保留一个polyfill，但用不推荐使用的包装替换它。

谢谢！

Answer 1

core-js当前正在替换bable-polyfill。除了.babelrc文件外，您无需在其他任何地方进行设置我有一个问题，为什么您要复制拥有@babel/polyfill和babel-pollyfill的库 @babel/preset-env和babel-preset-en也是如此。您已经在.babelrc corejs中声明了，但是我看不到已经安装了package.json吗？

我的example可能并不完美，但我努力争取：）

.babelrc

{
 "presets": [
   [
    "@babel/preset-env",
    {
     "useBuiltIns": "usage",
     "corejs": 3
    }
   ]
  ]
}

package.json

"devDependencies": {
  "@babel/core": "^7.5.5",
  "@babel/preset-env": "^7.5.5",
  "babel-loader": "^8.0.6",
  "core-js": "^3.1.4" // this is now your polyfill
  ...
}

webpack，config.js

entry: {
  app: './index.js',
},

index.js

import './style.scss';
import module from './module.js';
...

更新

添加到package.json，您可以准备自己的受支持浏览器列表browserl.ist

"browserslist": [
  "last 2 version",
  ">1%",
  "not dead"
],

添加到.babelrc

{
  "debug": true,
  "useBuiltIns": "usage",
  "corejs": 3
}

在控制台中进行所有这些其他更改之后，将显示支持哪些浏览器和添加了哪些pollyfill。当然，最重要的是在IE11中对其进行测试。我总是在6-7个台式机和3-4个移动浏览器上进行测试。

Answer 2

UPD

对于webpack 5：

必要时在运行时代码中关闭ES2015语法

默认情况下，webpack的运行时代码使用ES2015语法来构建较小的捆绑。如果您的构建针对不支持此功能的环境语法（例如IE11），则需要将目标：['web'，'es5']设置为恢复为ES5语法（如果目标环境是浏览器，则为“ web”）。

source。

Webpack-软件包：@ babel / polyfill已被弃用-如何使用替代方法？

2 个答案: