问题描述
使用我当前的配置(见下文),我收到此错误:
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}
我试图根据 Symbol()_ ...:undefined}
进行挖掘,但是找不到任何明确的指示.
I tried to dig based on Symbol()_ ... : undefined}
but I couldn't find any clear indication.
这是我的 .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
}
}
这是我的 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',
}
};
我还尝试了许多替代方法,这是我目前的替代方法,使用 entry:"usage"
,但不排除 node_modules
.
I've also tried many alternatives, this is my current one, with entry:"usage"
and not excluding node_modules
.
这来自我的 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"
}
错误似乎来自第一次调用 Postmate 库,即 new Postmate({...})
(我之前有一个 console.log
).在进行此呼叫之前,我已经完成了 localforage
的工作,并且诺言成功完成了.
Error seems to come from the first invocation of the Postmate library i.e. new Postmate({...})
(I have a console.log
just before). Prior to this call, I have one to localforage
and the promise complete succesfully.
推荐答案
使用 useBuiltIns:用法"
您通常必须在代码输入文件中导入要使用的模块(例如Postmate );没有polyfills;每个使用的polyfill将由 @ babel/preset-env
进行相应处理.另外, @ babel/preset-env
中的 corejs
的版本必须为单个数字(即 3
或2
).
Using useBuiltIns: "usage"
You'll have to normaly import the modules you want to use (i.g. Postmate) inside your code entry file; no polyfills; every polyfill used will be handled accordingly by @babel/preset-env
. Also, the version of corejs
in @babel/preset-env
has to be a single number (i.e. 3
or 2
).
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
的内容:
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',
}
}
入口JS文件 src/index.js
的内容:
import Postmate from 'postmate';
// Postmate and rest of the code
...
它将生成:
dist/shim.js 177K
dist/shim.js.map 140K
您可以在以下 IE 11 中使用 useBuiltIns:"usage"
来测试在线分布式示例,该示例如下: https://zikro.gr/dbg/so/61044894/usage/.(子iFrame具有将父窗口背景颜色更改为随机颜色的按钮)
You can test an online distributed example working using useBuiltIns: "usage"
in IE 11 here: https://zikro.gr/dbg/so/61044894/usage/. (The child iFrame has a button that changes parent window background color to a random color)
您可以在此Github存储库/分支中找到包含整个项目和使用示例分支的存储库: https://github.com/clytras/ie11-postmate/tree/usage
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
根据此问题,讨论使用符号会导致IE11中出现异常" ,您必须:
According to this issue disqussion "using Symbol causes exception in IE11", you have to:
- 在
.js
文件的规则中排除@ babel-runtime
和core-js
. - 将
corejs:"3"
和useBuiltIns:'entry'
设置为在babel内部预设的
文件.@ babel/preset-env
.config.js - 进入源JS文件中必须有
core-js/stable
和postmate
导入.
- Exclude
@babel-runtime
andcore-js
in the rule for.js
files. - Have
corejs: "3"
anduseBuiltIns: 'entry'
to@babel/preset-env
preset insidebabel.config.js
file. - There have to be
core-js/stable
andpostmate
imports inside your entry source JS file.
bavel.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
的内容:
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',
}
}
入口JS文件 src/index.js
的内容:
import 'core-js/stable';
window.Postmate = require('postmate/build/postmate.min.js');
// Postmate and rest of the code
...
它将生成:
dist/shim.js 641K
dist/shim.js.map 459K
您可以在以下的 IE 11 中进行测试: https://zikro.gr/dbg/so/61044894/.
You can test in IE 11 here: https://zikro.gr/dbg/so/61044894/.
这篇关于如何为IE11正确使用babel/corejs3/webpack?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!