webpack - Babel + Webpack 向 ie11 发送箭头函数
问题描述
我正在尝试修复 NextJS 应用程序以在 IE11 中工作。我使用 webpack 和 babel。在 Chrome 和其他现代浏览器中,应用程序运行良好,但在 IE11 上,错误指向 js 箭头函数。我正在使用 next.config.js 文件和 .babelrc。我有类似的项目在 IE11 上工作,它使用 nextjs 版本 8.0.3,而这不工作 9.2.0。
这是我的 package.json 文件
"dependencies": {
"@contentful/rich-text-react-renderer": "^13.4.0",
"@contentful/rich-text-types": "^13.4.0",
"@zeit/next-css": "^1.0.1",
"axios": "^0.19.0",
"babel-plugin-universal-import": "^4.0.0",
"chalk": "^3.0.0",
"classnames": "^2.2.6",
"compression": "^1.7.4",
"contentful-management": "^5.9.0",
"css-loader": "^3.2.0",
"dotenv-webpack": "^1.7.0",
"express": "^4.16.4",
"extract-text-webpack-plugin": "^3.0.2",
"isomorphic-style-loader": "^5.1.0",
"lodash": "^4.17.11",
"mini-css-extract-plugin": "^0.9.0",
"next": "^9.2.0",
"next-compose-plugins": "^2.2.0",
"next-offline": "^4.0.0",
"nextjs-sitemap-generator": "^0.1.1",
"prop-types": "^15.7.2",
"react": "^16.8.3",
"react-dom": "^16.8.3",
"react-markdown": "^4.0.6",
"react-redux": "^7.1.1",
"react-slick": "^0.25.2",
"react-universal-component": "^4.0.0",
"readdirp": "^3.0.1",
"redux": "^4.0.4",
"sass-loader": "^8.0.0",
"slick-carousel": "^1.8.1",
"style-loader": "1.0.0"
},
"devDependencies": {
"@babel/core": "^7.3.4",
"@babel/node": "^7.2.2",
"@babel/preset-env": "^7.3.4",
"@zeit/next-sass": "^1.0.1",
"babel-eslint": "^10.0.1",
"babel-loader": "^8.0.5",
"babel-preset-env": "^1.7.0",
"cross-env": "^5.2.0",
"dotenv": "^6.2.0",
"eslint": "^5.14.1",
"eslint-config-airbnb": "^17.1.1",
"eslint-plugin-import": "^2.18.2",
"eslint-plugin-jest": "^22.14.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"file-loader": "^5.0.2",
"husky": "^3.0.9",
"jest": "^24.1.0",
"node-sass": "^4.12.0",
"sass-lint": "^1.13.1",
"stylelint": "^9.10.1",
"stylelint-config-recommended": "^2.1.0"
这是我的 .babelrc 文件
{
"presets": [
"next/babel",
],
"plugins": [
"universal-import"
]
}
...最后是我的 next.config.js 文件
webpack: (config, { dev, isServer }) => {
config.module.rules.push({
test: /\.s?css$/,
use: [
isServer ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
options: {
importLoaders: 1,
},
},
'sass-loader',
],
});
config.module.rules.push({
test: /\.(woff(2)?|ttf|eot|svg|gif)(\?v=\d+\.\d+\.\d+)?$/,
use: [
{
loader: 'file-loader',
options: {
name: '[name].[ext]',
outputPath: 'fonts/',
},
},
],
});
config.plugins.push(new MiniCssExtractPlugin());
return {
...config,
devtool: dev ? 'source-map' : '',
};
},
我是 webpack 和 babel 一起工作的新手,所以如果有人能提供帮助,我将不胜感激。
解决方案
您可以尝试添加您的 package.json
"browserslist": [
"defaults"
]
并在 next.config.js 中添加如下所示的加载器
{
test: /\.js$/,
use:
{
loader: 'babel-loader',
options:
{
presets: ['@babel/preset-env']
}
}
}
推荐阅读
- java - 故障安全“运行”方法的机制
- mysql - Net Core 未在 Linux 生产环境中连接到 mysql
- python - 根据形成熊猫数据框的连接数自动向networkx中的边缘添加权重
- c# - 使用泛型从枚举中获取最大值
- c# - 隐藏组的所有单选按钮
- xcode11 - Xcode 11 beta 模拟器在尝试加载 AudioToolbox 时崩溃
- python - Python 3.7.3:我收到 SyntaxError:关键字不能是表达式
- php - 如何在 PHP 包中访问 Doctrine?
- scala - 从hdfs读取json数据时如何修复flink中的“NoMatchingTableFactoryException”错误
- android - 无法单击android AVD中的按钮