我正在尝试配置babel preset-env,以自动注入polyfills,与指定的目标浏览器列表相关。文档说明,使用形式为"useBuiltIns":"usage"的属性配置preset-env预设将完全做到这一点。(我注意到仅指定此属性会在控制台中显示警告,建议我应该指定要使用的core-js版本,因此我也添加了它。)因此,我的babel.config.js看起来像这样:
我已经做了一些研究(只有大约3个小时!),我理解这是babel试图转译babel的结果,或者类似的情况...我需要将一些文件添加到忽略列表中,这些文件不会被转译,或者说不会被双重转译。
我还尝试了在忽略模式中添加一些变化,但我仍然遇到致命的控制台错误。
另一件我尝试过的事情是忽略
如果有人能够解释为什么
编辑:以下内容建议让babel忽略
然而,这会引起另一个相当的、看似不具体的错误出现:
module.exports = {
"presets": [
"@babel/preset-react",
"@babel/preset-typescript",
[
"@babel/preset-env",
{
"useBuiltIns": "usage",
"corejs": 3
}
]
],
"plugins": ['macros'],
};
太棒了!这应该很容易!
然而,使用webpack重新编译后,我的应用现在在浏览器中崩溃了,并显示控制台消息:
Uncaught TypeError: __webpack_require__(...) is not a function
at Module../node_modules/webpack/buildin/harmony-module.js (harmony-module.js:24)
我已经做了一些研究(只有大约3个小时!),我理解这是babel试图转译babel的结果,或者类似的情况...我需要将一些文件添加到忽略列表中,这些文件不会被转译,或者说不会被双重转译。
在我的webpack配置中,我添加了以下内容。(请注意排除条目)。
module: {
rules: [
{
test: /\.(js|jsx|ts|tsx)$/,
exclude: [/core-js/, /regenerator-runtime/],
use: [
{
loader: 'babel-loader',
options: {
presets: babelConfig.presets,
cacheDirectory: babelCacheDir
}
},
'eslint-loader'
]
}
]
}
我还尝试了在忽略模式中添加一些变化,但我仍然遇到致命的控制台错误。
另一件我尝试过的事情是忽略
node_modules
文件夹,但是那样我就有了大块未进行转码的代码。例如,在IE11中,我会得到有关ES6箭头函数的语法错误,这些错误源于未进行转码的供应商脚本。如果有人能够解释为什么
__webpack_require__
以一种不希望的方式被更改,我将非常感激,因为这个问题需要确切的解决方案,很难找到。编辑:以下内容建议让babel忽略
core-js
,这似乎非常合理。它建议在babel配置文件中使用以下内容:{
ignore: [
/\/core-js/,
],
sourceType: "unambiguous",
presets: [
['@babel/preset-env', { modules: false, useBuiltIns: 'usage' }],
],
}
然而,这会引起另一个相当的、看似不具体的错误出现:
has.js:4 Uncaught TypeError: Cannot convert undefined or null to object
at hasOwnProperty (<anonymous>)
at push../node_modules/core-js/internals/has.js.module.exports (has.js:4)
useBuiltIns: 'usage'
设置带来了比以前更多的 Babel 管道,以前可以正常工作的事情(在我的情况下,导入使用赋值到module.exports
的 node.js 风格代码)现在会出现问题。使用sourceType: "unambiguous"
对我有所帮助,但可能因人而异。(https://dev59.com/i1QK5IYBdhLWcg3wHsdJ#52415747) - DomQ