我最近将babel更新为使用babel7。我设法使其与chrome一起使用。 IE11无法正常工作，我不确定如何修复它。我正在使用webpack3。它失败的行是
exports = module.exports = function (...args) {
这是我的package.json
{
"name": "ccp",
"version": "0.2.0",
"private": true,
"scripts": {
"dev": "npm run development",
"development": "cross-env NODE_ENV=development node_modules/webpack/bin/webpack.js --progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"watch": "npm run development -- --watch",
"watch-poll": "npm run watch -- --watch-poll",
"hot": "cross-env NODE_ENV=development node_modules/webpack-dev-server/bin/webpack-dev-server.js --inline --hot --config=node_modules/laravel-mix/setup/webpack.config.js",
"prod": "npm run production",
"production": "cross-env NODE_ENV=production node_modules/webpack/bin/webpack.js --no-progress --hide-modules --config=node_modules/laravel-mix/setup/webpack.config.js",
"lint": "eslint src/",
"lint:fix": "eslint src/ --fix",
"start": "node src/server.js",
"test": "node_modules/.bin/jest"
},
"dependencies": {
"@babel/runtime": "^7.4.5",
"@fortawesome/fontawesome-svg-core": "^1.2.15",
"@fortawesome/free-solid-svg-icons": "^5.7.2",
"@fortawesome/react-fontawesome": "^0.1.4",
"audit": "0.0.6",
"axios": "^0.18.1",
"body-parser": "^1.19.0",
"bootstrap-fileinput": "^4.5.2",
"braces": "^2.3.2",
"console-polyfill": "^0.3.0",
"core-js": "^2.5.7",
"cors": "^2.8.5",
"crypto-js": "^3.1.9-1",
"cssnano": "^4.1.10",
"dompurify": "^1.0.10",
"es5-shim": "^4.5.13",
"express": "^4.17.1",
"extract-text-webpack-plugin": "^3.0.2",
"file-loader": "^1.1.11",
"file-saver": "^2.0.1",
"font-awesome": "^4.7.0",
"html-react-parser": "^0.4.7",
"jquery": "^3.4.0",
"jsx-to-string": "^1.4.0",
"lodash": "^4.17.11",
"moment": "^2.24.0",
"node-sass": "^4.12.0",
"npm": "^6.9.0",
"npm-audit": "0.0.3",
"postcss-cssnext": "^3.0.2",
"postcss-import": "^11.1.0",
"prop-types": "^15.7.2",
"pusher": "^2.2.0",
"pusher-js": "^4.4.0",
"react": "^16.8.4",
"react-app-polyfill": "^1.0.1",
"react-bootstrap": "^0.32.4",
"react-bootstrap-table": "^4.3.1",
"react-bootstrap-table-next": "^0.1.15",
"react-dates": "^17.2.0",
"react-dom": "^16.8.4",
"react-dropzone": "^4.3.0",
"react-fontawesome": "^1.6.1",
"react-ga": "^2.5.7",
"react-html-parser": "^2.0.2",
"react-moment": "^0.8.4",
"react-quill": "^1.3.3",
"react-redux": "^5.1.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"react-router-redux": "^4.0.8",
"react-scripts": "^3.0.1",
"react-select": "^1.3.0",
"react-sortable-tree": "^2.6.0",
"react-stringify": "^1.0.0",
"react-table": "^6.9.2",
"react-tooltip": "^3.10.0",
"react-vis": "^1.11.6",
"react-websocket": "^2.0.1",
"react-widgets": "^4.4.10",
"redux": "^3.7.2",
"redux-file-upload": "0.0.19",
"redux-form": "^7.4.2",
"redux-listeners": "^0.4.1",
"redux-logger": "^3.0.6",
"redux-promise": "^0.5.3",
"redux-title": "0.0.3",
"regenerator-runtime": "^0.13.2",
"single-spa": "^4.3.5",
"single-spa-react": "^2.10.2",
"socket.io": "^2.2.0",
"socket.io-client": "^2.2.0",
"sugarss": "^1.0.1",
"supervisor": "^0.12.0",
"url-search-params": "^0.10.2",
"viz": "0.0.1"
},
"devDependencies": {
"@babel/cli": "^7.4.4",
"@babel/core": "^7.4.5",
"@babel/plugin-proposal-class-properties": "^7.4.4",
"@babel/plugin-proposal-decorators": "^7.4.4",
"@babel/plugin-proposal-object-rest-spread": "^7.4.4",
"@babel/plugin-syntax-dynamic-import": "^7.2.0",
"@babel/plugin-transform-react-constant-elements": "^7.2.0",
"@babel/plugin-transform-react-inline-elements": "^7.2.0",
"@babel/plugin-transform-regenerator": "^7.4.5",
"@babel/plugin-transform-runtime": "^7.4.4",
"@babel/polyfill": "^7.4.4",
"@babel/preset-env": "^7.4.5",
"@babel/preset-react": "^7.0.0",
"@babel/register": "^7.4.4",
"autoprefixer-loader": "^3.2.0",
"axios-mock-adapter": "^1.16.0",
"babel-jest": "^24.4.0",
"babel-loader": "^8.0.6",
"bootstrap": "^4.3.1",
"clean-webpack-plugin": "^3.0.0",
"copy-webpack-plugin": "^4.6.0",
"cross-env": "^5.1",
"css-loader": "^2.1.1",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.16.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-config-rallycoding": "^3.2.0",
"eslint-plugin-babel": "^5.3.0",
"eslint-plugin-import": "^2.17.2",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"expect": "^24.4.0",
"fetch-mock": "^6.5.2",
"html-loader": "^0.5.5",
"html-webpack-plugin": "^2.30.1",
"jest": "latest",
"jest-html-reporter": "^2.5.0",
"laravel-mix": "^4.0.15",
"lodash": "^4.17.5",
"popper.js": "^1.14.7",
"prettier": "1.11.1",
"react-addons-test-utils": "^15.6.2",
"react-test-renderer": "^16.8.6",
"redux-devtools-extension": "^2.13.8",
"redux-mock-store": "^1.5.3",
"resolve-url-loader": "^2.3.2",
"riek": "^1.1.0",
"sass": "^1.17.2",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"uglifyjs-webpack-plugin": "^1.3.0",
"vue": "^2.6.8",
"webpack": "^3.12.0",
"webpack-cli": "^3.3.5",
"webpack-dev-server": "^3.7.2"
}
}
我的webpack文件
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const ExtractTextPlugin = require("extract-text-webpack-plugin");
//const CleanWebpackPlugin = require('clean-webpack-plugin');
const UglifyJsPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
entry: [
'./src/index.js',
],
output: {
filename: '[name].bundle.js',
path: __dirname + '/docs',
publicPath: '/'
},
devServer: {
historyApiFallback: true
},
module: {
rules: [
{
test: /\.json$/,
loader: "json-loader"
},
{
test: /\.js[x]?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: [ '@babel/preset-react' ],
plugins: [ '@babel/transform-runtime', '@babel/transform-regenerator' ]
}
},
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: [
{ loader: 'css-loader', options: { importLoaders: 1 } },
'postcss-loader'
]
})
},
{
test: /\.(png|woff|woff2|eot|ttf|svg)$/,
use: 'url-loader?limit=100000'
},
{
test: /\.png$/,
use: 'url-loader?limit=100000'
},
{
test: /\.jpg$/,
use: 'file-loader'
},
{
test: /\.(woff|woff2) (\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/font-woff'
},
{
test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=application/octet-stream'
},
{
test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
use: 'file-loader'
},
{
test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
use: 'url-loader?limit=10000&mimetype=image/svg+xml'
}
]
},
node: {
fs: 'empty'
},
resolve: {
modules: [path.resolve(__dirname, 'node_modules')],
},
plugins: [
new HtmlWebpackPlugin({
template: __dirname + '/src/index.html',
filename: 'index.html',
inject: true
}),
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV || 'development'),
'REACT_APP_GA_TRACKING_ID' : JSON.stringify('UA-101927425-1'),
'VERSION': JSON.stringify('57')
}
}),
new UglifyJsPlugin(),
new webpack.ProvidePlugin({
jQuery: "jquery",
$: "jquery",
jquery: 'jquery'
}),
new ExtractTextPlugin("[name].bundle.css")
],
devtool: 'source-map',
externals: [],
};
我的babel文件
module.exports = function(api) {
api.cache(true);
const presets = [
[
"@babel/preset-env", {
"targets": {
"browsers": ["> 0.25%, not dead"]
},
"modules": false,
"debug":true,
"useBuiltIns": 'entry'
}
],
["@babel/preset-react"],
];
const plugins = [
"@babel/plugin-syntax-dynamic-import",
"@babel/plugin-proposal-object-rest-spread",
"@babel/plugin-transform-regenerator",
"@babel/plugin-proposal-class-properties",
[
"@babel/plugin-proposal-decorators",
{
legacy: true
}
],
"@babel/plugin-transform-react-constant-elements",
//"@babel/plugin-transform-react-inline-elements"
];
return {
presets,
plugins,
"env": {
"test": {
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
}
}
]
]
}
}
}
}
我尝试关注https://babeljs.io/docs/en/babel-polyfill/。在调试模式下运行webpack时，我得到很多Import of @babel/polyfill was not found.，我正在使用SPA，并且src索引看起来像
import 'core-js/es6/map';
import 'core-js/es6/set';
import 'raf/polyfill';
import '../scripts/api';
import React, { Component } from 'react'
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware, combineReducers } from 'redux';
import { titleReducer, syncReduxAndTitle } from 'redux-title'
import { BrowserRouter } from 'react-router-dom';
import promise from 'redux-promise';
import { composeWithDevTools } from 'redux-devtools-extension/developmentOnly';
import App from '../App'
import reducers from '../reducers';
import 'react-quill/dist/quill.snow.css'; // ES6
import 'core-js/modules/es6.string.starts-with';
import { library } from '@fortawesome/fontawesome-svg-core'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faSpinner, faPlus, faEdit, faTrashAlt } from '@fortawesome/free-solid-svg-icons'
library.add(faSpinner);
library.add(faPlus);
library.add(faEdit);
library.add(faTrashAlt);
require("@babel/register");
require("@babel/polyfill");
const store = createStore(
reducers,
composeWithDevTools(applyMiddleware(promise))
);
syncReduxAndTitle(store);
class CCPApp extends Component {
render() {
return (
<Provider store={store}>
<BrowserRouter>
<App/>
</BrowserRouter>
</Provider>
)
}
}
export default CCPApp;