[英]How to use babel/corejs3/webpack correctly for IE11?
With my current config (see below), I'm getting this error:使用我当前的配置(见下文),我收到此错误:
[object Error]{description: "Argument ob...", message: "Argument ob...", name: "TypeError", number: -2147418113, stack: "TypeError: ...", Symbol()_7.bs7gi3oa3wi: undefined}
I tried to dig based on Symbol()_... : undefined}
but I couldn't find any clear indication.我试图根据Symbol()_... : undefined}
进行挖掘,但我找不到任何明确的指示。
This is my .babel.config.js
:这是我的.babel.config.js
:
module.exports = function (api) {
api.cache(true);
const presets = [
[
'@babel/preset-env',
{
// modules: false,
corejs:"3.6.4",
useBuiltIns: 'usage',
targets: {
browsers: [
"edge >= 16",
"safari >= 9",
"firefox >= 57",
"ie >= 11",
"ios >= 9",
"chrome >= 49"
]
}
}
]
];
const plugins= [
["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
];
return {
presets,
plugins
}
}
This is my webpackconfig.js
这是我的webpackconfig.js
module.exports = {
module: {
rules: [
{
test: /\.js$/,
// exclude: /node_modules/,
exclude : [
/\bcore-js\b/,
/\bwebpack\/buildin\b/
],
use: {
loader: 'babel-loader',
options:{
sourceType: "unambiguous"
}
},
},
],
},
devtool:"cheap-source-map",
resolve: {
extensions: ['*', '.js'],
},
output: {
path: path.resolve(__dirname, './dist'),
filename: 'shim.js',
}
};
I've also tried many alternatives, this is my current one, with entry:"usage"
and not excluding node_modules
.我也尝试了很多替代方案,这是我目前的替代方案,带有entry:"usage"
并且不排除node_modules
。
This is from my package.json
:这是来自我的package.json
:
"devDependencies": {
"@babel/core": "^7.9.0",
"@babel/plugin-proposal-class-properties": "^7.8.3",
"@babel/plugin-proposal-decorators": "^7.8.3",
"@babel/preset-env": "^7.9.5",
"babel-loader": "^8.1.0",
"eslint": "^6.8.0",
"eslint-config-google": "^0.14.0",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3",
"dotenv-webpack": "^1.7.0"
},
"dependencies": {
"core-js": "^3.6.4",
"ismobilejs": "^1.0.3",
"localforage": "1.7.3",
"postmate": "^1.5.2",
"uuid": "^7.0.3"
}
Error seems to come from the first invocation of the Postmate library ie new Postmate({...})
(I have a console.log
just before).错误似乎来自Postmate库的第一次调用,即new Postmate({...})
(我之前有一个console.log
)。 Prior to this call, I have one to localforage
and the promise complete succesfully.在此调用之前,我有一个本地搜索和localforage
成功完成。
useBuiltIns: "usage"
使用useBuiltIns: "usage"
You'll have to normally import the modules you want to use ( ig Postmate ) inside your code entry file;您通常必须在代码输入文件中导入要使用的模块( ig Postmate ); no polyfills;没有填充物; every polyfill used will be handled accordingly by @babel/preset-env
.每个使用的 polyfill 都将由@babel/preset-env
相应地处理。 Also, the version of corejs
in @babel/preset-env
has to be a single number ( ie 3
or 2
).此外, @babel/preset-env
中corejs
的版本必须是单个数字(即3
或2
)。
babel.config.js
: babel.config.js
的内容:module.exports = function (api) {
api.cache(true);
const presets = [
[
'@babel/preset-env',
{
corejs : {
version : "3",
proposals : true
},
useBuiltIns: 'usage',
targets: {
browsers: [
"edge >= 16",
"safari >= 9",
"firefox >= 57",
"ie >= 11",
"ios >= 9",
"chrome >= 49"
]
}
}
]
];
const plugins= [
["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
];
return {
presets,
plugins
}
}
webpackconfig.js
: webpackconfig.js
的内容:const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: [
/\bcore-js\b/,
/\bwebpack\/buildin\b/
],
use: {
loader: 'babel-loader',
options: {
babelrc: false,
configFile: path.resolve(__dirname, 'babel.config.js'),
compact: false,
cacheDirectory: true,
sourceMaps: false,
},
},
},
],
},
devtool: "cheap-source-map",
output: {
path: path.resolve(__dirname, './dist'),
filename: 'shim.js',
}
}
src/index.js
:入口 JS 文件src/index.js
的内容:import Postmate from 'postmate';
// Postmate and rest of the code
...
It will generate:它将生成:
dist/shim.js 177K
dist/shim.js.map 140K
You can test an online distributed example working using useBuiltIns: "usage"
in IE 11 here: https://zikro.gr/dbg/so/61044894/usage/ .您可以在此处使用IE 11中的useBuiltIns: "usage"
测试在线分布式示例: https://zikro.gr/dbg/so/61044894/usage/ 。 ( The child iFrame has a button that changes parent window background color to a random color ) (子 iFrame 有一个按钮,可以将父 window 背景颜色更改为随机颜色)
You can find a repository with the whole project and the usage example branch in this Github repository/branch: https://github.com/clytras/ie11-postmate/tree/usage您可以在此 Github 存储库/分支中找到包含整个项目和使用示例分支的存储库: https://github.com/clytras/ie11-postmate/tree/usage
useBuiltIns: "entry"
使用useBuiltIns: "entry"
According to this issue disqussion "using Symbol causes exception in IE11" , you have to:根据此问题讨论“在 IE11 中使用符号导致异常” ,您必须:
@babel-runtime
and core-js
in the rule for .js
files.在.js
文件的规则中排除@babel-runtime
和core-js
。corejs: "3"
and useBuiltIns: 'entry'
to @babel/preset-env
preset inside babel.config.js
file. corejs: "3"
和useBuiltIns: 'entry'
设置为babel.config.js
文件中的@babel/preset-env
预设。core-js/stable
and postmate
imports inside your entry source JS file.在您的入口源 JS 文件中必须有core-js/stable
和postmate
导入。babel.config.js
: babel.config.js
的内容:module.exports = function (api) {
api.cache(true);
const presets = [
[
'@babel/preset-env',
{
corejs:"3",
useBuiltIns: 'entry',
targets: {
browsers: [
"edge >= 16",
"safari >= 9",
"firefox >= 57",
"ie >= 11",
"ios >= 9",
"chrome >= 49"
]
}
}
]
];
const plugins= [
["@babel/plugin-proposal-decorators", { decoratorsBeforeExport: true }],
["@babel/plugin-proposal-class-properties", { "loose": true }]
];
return {
presets,
plugins
}
}
webpackconfig.js
: webpackconfig.js
的内容:const path = require('path');
module.exports = {
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /@babel(?:\/|\\{1,2})runtime|core-js/,
use: {
loader: 'babel-loader',
options: {
babelrc: false,
configFile: path.resolve(__dirname, 'babel.config.js'),
compact: false,
cacheDirectory: true,
sourceMaps: false,
},
},
},
],
},
devtool:"cheap-source-map",
output: {
path: path.resolve(__dirname, './dist'),
filename: 'shim.js',
}
}
src/index.js
:入口 JS 文件src/index.js
的内容:import 'core-js/stable';
window.Postmate = require('postmate/build/postmate.min.js');
// Postmate and rest of the code
...
It will generate:它将生成:
dist/shim.js 641K
dist/shim.js.map 459K
You can test in IE 11 here: https://zikro.gr/dbg/so/61044894/ .您可以在此处在IE 11中进行测试: https://zikro.gr/dbg/so/61044894/ 。
You're probably missing some imports, I'd suggest looking at what react-app-polyfills imports under the hood for IE11 support - the error message relates to Symbol
.您可能缺少一些导入,我建议您查看react-app-polyfills导入的 IE11 支持 - 错误消息与Symbol
相关。 core-js>=3
no longer imports everything that IE11 needs with core-js/stable
. core-js>=3
不再使用core-js/stable
导入 IE11 需要的所有内容。 At the time of this writing this might suffice:在撰写本文时,这可能就足够了:
// If you need `fetch` or `Object.assign`
npm install whatwg-fetch object-assign
// Make sure we're in a Browser-like environment before importing polyfills
// This prevents `fetch()` from being imported in a Node test environment
if (typeof window !== 'undefined') {
// fetch() polyfill for making API calls.
require('whatwg-fetch');
}
// Object.assign() is commonly used with React.
// It will use the native implementation if it's present and isn't buggy.
Object.assign = require('object-assign');
/// This may rid you of your error message
// Support for...of (a commonly used syntax feature that requires Symbols)
require('core-js/features/symbol');
// Support iterable spread (...Set, ...Map)
require('core-js/features/array/from');
Hope this helps希望这可以帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.