如何正确连接Polyfill?我阅读了Babel 7的所有文档并遵循了它。在下面可以看到我的设置。如果我将其添加到webpack配置中
entry: [
'core-js/stable',
'regenerator-runtime/runtime',
'./main.js'
],
然后一切正常。但根据文档,此行可以删除,因为babel.config.js中的所有设置]
如果我从此行中删除,则Redux存储在IE11中不起作用
babel.config.js
module.exports = function (api) { api.cache(true); return { presets: [ [ '@babel/preset-env', { debug: true, useBuiltIns: 'entry', corejs: { version: '3.6', proposals: false }, } ], '@babel/preset-react', 'rsuite' ], plugins: [ 'react-hot-loader/babel', '@babel/plugin-proposal-class-properties', '@babel/plugin-proposal-export-default-from', '@babel/plugin-proposal-object-rest-spread', '@babel/plugin-syntax-object-rest-spread', '@babel/plugin-transform-arrow-functions', '@babel/plugin-transform-async-to-generator', '@babel/plugin-transform-classes', '@babel/plugin-transform-parameters', '@babel/plugin-transform-property-literals', ['@babel/plugin-transform-runtime', { corejs: { version: 3, proposals: true } } ], '@babel/plugin-transform-spread', '@babel/plugin-transform-template-literals', 'babel-plugin-styled-components', ] }; };
package.json
"devDependencies": { "@babel/core": "^7.9.0", "@babel/plugin-proposal-class-properties": "^7.8.3", "@babel/plugin-proposal-export-default-from": "^7.8.3", "@babel/plugin-proposal-export-namespace-from": "^7.8.3", "@babel/plugin-proposal-object-rest-spread": "^7.9.5", "@babel/plugin-syntax-object-rest-spread": "^7.8.3", "@babel/plugin-transform-arrow-functions": "^7.8.3", "@babel/plugin-transform-async-to-generator": "^7.8.3", "@babel/plugin-transform-classes": "^7.9.5", "@babel/plugin-transform-parameters": "^7.9.5", "@babel/plugin-transform-property-literals": "^7.8.3", "@babel/plugin-transform-runtime": "^7.9.0", "@babel/plugin-transform-spread": "^7.8.3", "@babel/plugin-transform-template-literals": "^7.8.3", "@babel/preset-env": "^7.9.5", "@babel/preset-react": "^7.9.4", "@devexpress/dx-react-grid-material-ui": "^2.4.0", "babel-eslint": "^7.2.3", "babel-helper-annotate-as-pure": "^7.0.0-beta.3", "babel-jest": "^23.6.0", "babel-loader": "^8.0.2", "babel-plugin-styled-components": "^1.10.7", "babel-preset-rsuite": "^4.0.1", "clean-webpack-plugin": "^3.0.0", "colors": "^1.3.2", "copy-webpack-plugin": "^4.5.2", "cross-env": "^5.2.0", "css-loader": "^3.2.0", "eslint": "^4.19.1", "eslint-config-airbnb": "^16.1.0", "eslint-loader": "^2.1.1", "eslint-plugin-import": "^2.14.0", "eslint-plugin-jsx-a11y": "^5.1.1", "eslint-plugin-react": "^7.11.1", "extract-text-webpack-plugin": "^4.0.0-beta.0", "file-loader": "^2.0.0", "html-webpack-plugin": "^3.2.0", "image-webpack-loader": "^6.0.0", "less": "^3.8.1", "less-loader": "^4.1.0", "mini-css-extract-plugin": "^0.7.0", "optimize-css-assets-webpack-plugin": "^3.2.1", "react-highlight-words": "^0.10.0", "react-hot-loader": "^4.7.2", "redux-saga": "^0.16.2", "style-loader": "^0.23.1", "terser-webpack-plugin": "^1.2.3", "webpack": "^4.42.1", "webpack-bundle-analyzer": "^3.6.1", "webpack-cli": "^3.1.0", "webpack-dev-server": "^3.1.8" }, "dependencies": { "@babel/runtime": "^7.9.2", "@babel/runtime-corejs3": "^7.9.2", "@hot-loader/react-dom": "^16.13.0", "axios": "^0.19.2", "c3": "0.4.11", "cookie": "^0.3.1", "core-js": "^3.6.5", "date-fns": "^2.0.0", "file-saver": "^2.0.2", "jquery": "^3.4.1", "js-base64": "^2.5.2", "lodash": "^4.17.11", "moment": "^2.24.0", "normalizr": "^3.3.0", "prop-types": "^15.7.2", "query-string": "^5.1.1", "ramda": "^0.26.1", "rc-tree": "^3.1.1", "react": "^16.8.3", "react-datepicker": "^2.8.0", "react-dom": "^16.8.3", "react-html-parser": "^2.0.2", "react-paginate": "^6.3.0", "react-redux": "^7.1.0-rc.1", "react-router-dom": "^4.4.0-beta.7", "react-scrollbar": "^0.5.6", "react-select": "^2.4.1", "redux": "^4.0.5", "redux-devtools-extension": "^2.13.8", "redux-thunk": "^2.3.0", "regenerator-runtime": "^0.13.5", "reselect": "^3.0.1", "rsuite": "^4.1.4", "styled-components": "^4.1.3" }
Webpack规则
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/,
use: 'babel-loader',
},
{
test: /\.css$/,
use: cssLoaders()
},
{
test: /\.less$/,
exclude: /node_modules/,
use: cssLoaders('less-loader')
},
{
test: /\.(png|jpg|svg|gif?)$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2|eot|ttf|otf?)$/,
use: 'file-loader'
},
]
},
如何正确连接Polyfill?我阅读了Babel 7的所有文档并遵循了它。在下面可以看到我的设置。如果我在webpack配置条目中添加此代码:['core-js / stable','...
我认为这是由于反应不支持ie10的事实。我在未定义的ie10中设置和在ie11中未加载redux存储时出错。根据文档,反应需要全局导入polyfill。https://reactjs.org/docs/javascript-environment-requirements.html
仅不要删除为polyfill添加的这些行