Babel + Webpack将箭头函数发送到ie11

Question

我正在尝试修复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的新手，所以如果有人可以帮助我将不胜感激。

Answer 1

您可以尝试在package.json中添加

  "browserslist": [
    "defaults"
  ]

并在next.config.js中添加如下所示的加载器

{
    test: /\.js$/,
    use:
    {
        loader: 'babel-loader',
        options:
        {
            presets: ['@babel/preset-env']
        }
    }
}