我的React应用程序的构建过程出现问题。
我总是出现以下错误:
未找到模块:错误:无法解析'core-js / es6'
如果我在polyfill.js中使用它:
导入'core-js / es6';
那是我的package.json:
{
"name": "test",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"private": true,
"devDependencies": {
"@babel/core": "^7.4.0",
"@babel/preset-env": "^7.4.2",
"@babel/preset-react": "^7.0.0",
"@babel/runtime": "^7.4.2",
"babel-loader": "^8.0.5",
"babel-preset-es2015": "^6.24.1",
"copy-webpack-plugin": "^5.0.2",
"css-hot-loader": "^1.4.4",
"eslint": "5.15.3",
"eslint-config-airbnb": "^17.1.0",
"eslint-loader": "^2.1.2",
"eslint-plugin-import": "2.16.0",
"eslint-plugin-jsx-a11y": "6.2.1",
"eslint-plugin-react": "7.12.4",
"file-loader": "^3.0.1",
"node-sass": "^4.11.0",
"prettier": "^1.16.4",
"react-hot-loader": "4.8.0",
"sass-loader": "^7.1.0",
"webpack": "^4.29.6",
"webpack-cli": "^3.3.0",
"webpack-dev-server": "^3.2.1"
},
"dependencies": {
"axios": "^0.18.0",
"core-js": "^3.0.0",
"prop-types": "^15.7.2",
"react": "^16.8.5",
"react-dom": "^16.8.5",
"react-redux": "^6.0.1",
"react-string-replace": "^0.4.1",
"redux": "^4.0.1",
"slick-carousel": "^1.8.1"
},
"scripts": {
"dev": "webpack-dev-server --hot",
"build": "webpack --colors --profile --progress --env.mode production",
"lint": "eslint ./src/ --ext .js,.jsx"
}
}
有人可以在这里帮忙吗?
答案 0 :(得分:22)
在polyfills.ts和polyfills.ts中将所有“ es6”和“ es7”更改为“ es”(可选)。
import 'core-js/es6/symbol';
import 'core-js/es/symbol';
答案 1 :(得分:9)
我找到了可能的答案。您有 core-js 版本3.0,该版本没有用于 ES6 和 ES7 的单独文件夹;这就是应用程序找不到正确路径的原因。
要解决此错误,您可以将 core-js 版本降级为2.5.7。此版本使用单独的 ES6 和 ES7 文件夹生成正确的目录结构。
要降级版本,只需运行:
npm i -S core-js@2.5.7
就我而言,使用Angular可以正常工作。
答案 2 :(得分:4)
如果您使用@babel/preset-env
和useBuiltIns
,则只需在useBuiltIns选项旁边添加corejs: 3
,以指定要使用的版本,默认值为corejs: 2
。 / p>
presets: [
[
"@babel/preset-env", {
"useBuiltIns": "usage",
"corejs": 3
}
]
],
答案 3 :(得分:3)
当然,我有一个类似的问题和一个简单的
npm uninstall @babel/polyfill --save &&
npm install @babel/polyfill --save
是我的把戏。
答案 4 :(得分:2)
对于core-js 3.0.1版,导入已更改-例如
import 'core-js/es6/array';
和
import 'core-js/es7/array';
现在可以简单地由以下内容提供
import 'core-js/es/array';
如果您不希望引入整个core-js
答案 5 :(得分:1)
最终在 projectpath \ src \ polyfill.js 中有一个名为polyfill.js的文件 该文件仅包含以下行: import'core-js'; 该polyfill不仅填充了es-6,而且是从3.0.0版本开始使用core-js的正确方法。
我将 polyfill.js 添加到我的webpack-file条目属性中,如下所示:
entry: ['./src/main.scss', './src/polyfill.js', './src/main.jsx']
完美运行。
我还在这里找到了更多信息:https://github.com/zloirock/core-js/issues/184
图书馆作者( zloirock )声称:
ES6几乎改变了ES5中添加的所有功能的行为,因此core-js / es6 入口点几乎包括所有这些。而且,正如您所写, 修复损坏的浏览器实现所需。
(zloirock的报价https://github.com/zloirock/core-js/issues/184)
所以我认为 import'core-js'; 很好。
答案 6 :(得分:1)
答案 7 :(得分:0)
迁移到Angular 8后,'core-js / es6'或'core-js / es7'将不起作用。
您只需替换导入'core-js / es /'
例如导入“ core-js / es6 / symbol”以导入“ core-js / es / symbol”
这将正常工作。
答案 8 :(得分:0)
只需在tsconfig.json中将“ target”:“ es2015”更改为“ target”:“ es5”。
为我使用Angular 8.2.XX
在IE11和Edge上进行了测试