[英]Webpack and Babel not transpiling a dependency inside node_modules that breaks IE 11 and Edge due to ES6's spread syntax
我有一个使用@mdx-js/runtime
的项目,它在 IE 11 或 Edge( Edge 44.18362.449.0
)上完全中断:
SCRIPT1028: SCRIPT1028: Expected identifier, string or number
由于这里的传播语法,它实际上中断了:
const allNodes = sortedNodes.map(({ start: _, ...node }, i) => {
这行代码来自remark-mdx
,它是@mdx-js/runtime
的依赖项,特别是这个文件和行: https : //github.com/mdx-js/mdx/blob/master/packages/remark- mdx/extract-imports-and-exports.js#L66
我一直在尝试让 Webpack 和 Babel 转换该文件,以便不再存在传播:
浏览器列表:
如果我运行npx browserslist
我可以看到 IE 11 在那里。
"browserslist": [
"> 0.5%",
"last 2 version",
"Firefox ESR",
"not dead",
"iOS >= 9"
]
.babelrc:
我尝试禁用loose
模式并添加@babel/plugin-transform-spread
和@babel/plugin-proposal-object-rest-spread
,但没有解决问题。
{
"presets": [[
"@babel/preset-env", {
"useBuiltIns": "usage",
"loose": false, // Was true before
"modules": "auto",
"corejs": 3
}],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-proposal-decorators", {
"legacy": true
}],
["@babel/plugin-proposal-class-properties", {
"loose": true
}],
"@babel/plugin-transform-spread", // Just added
"@babel/plugin-proposal-object-rest-spread", // Just added
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"react-hot-loader/babel"
]
}
webpack.config.js:
在这里,我尝试明确包含remark-mdx
和@mdx-js/runtime
并删除exclude
属性或将其更改为/node_modules\\/(?!(remark-mdx|@mdx-js\\/runtime)\\/).*/
,但似乎没有任何效果:
{
test: /\.(j|t)sx?$/,
include: [
path.resolve(__dirname, 'src'),
// Tried explicitly adding these 2:
path.resolve('node_modules/remark-mdx'),
path.resolve('node_modules/@mdx-js/runtime'),
],
// Tried removing `exclude` or not excluding those 2 packages:
// exclude: /node_modules/,
// exclude: /node_modules\/(?!(remark-mdx|@mdx-js\/runtime)\/).*/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
babelrc: true,
}
}],
}
我正在使用 Babel 7 和 Webpack 4。
好的,事实证明处理node_modules
内的文件你需要使用babel.config.js
而不是.babelrc
解释here和here :
你的用例是什么?
- 您正在使用 monorepo 吗?
你想编译 node_modules 吗?
babel.config.json
适合你!您的配置仅适用于项目的一个部分?
.babelrc.json
适合你!
此外,如果您使用的是monorepo你需要设置rootMode: 'upward'
让巴贝尔可以找到新的配置文件,如解释在这里。
Webpack 的babel-loader
配置应该是这样的:
{
test: /\.(j|t)sx?$/,
include: [
path.resolve(__dirname, 'src'),
// No need to add @mdx-js/runtime, just add the problematic package:
path.resolve('node_modules/remark-mdx'),
],
// You also need to exclude it from the exclusions:
exclude: /node_modules\/(?!(remark-mdx)\/).*/,
use: [{
loader: 'babel-loader',
options: {
cacheDirectory: true,
// And replace .babelrc with babel.config.json...
babelrc: false,
// ...which might also mean you need this if you are using a monorepo:
rootMode: 'upward',
}
}],
}
在此更改之后,正在处理文件,但我收到了不同的错误:
Uncaught TypeError: Cannot assign to read only property 'exports' of object '#<Object>'
在这种情况下,我必须将sourceType: "unambiguous"
添加到babel.config.json
,因为remark-mdx
使用的是 CommonJS 模块而不是 ES6 模块。 您可以在babel.config.json
文件的根目录或overrides
内部node_modules
它,以便它仅针对node_modules
包。
有关为什么会发生这种情况的更多信息,请参阅如何在供应商捆绑包上使用 babel 的 `useBuiltIns: 'usage'` 选项? .
Babel 的babel.config.json
最终看起来像这样:
{
"presets": [[
"@babel/preset-env", {
"useBuiltIns": "usage",
"loose": true,
"modules": "auto",
"corejs": 3
}],
"@babel/preset-react",
"@babel/preset-typescript"
],
"plugins": [
["@babel/plugin-proposal-decorators", {
"legacy": true
}],
["@babel/plugin-proposal-class-properties", {
"loose": true
}],
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
"react-hot-loader/babel"
],
"overrides": [{
"test": "./node_modules",
"sourceType": "unambiguous"
}]
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.