Babel + Webpack向ie11发送箭头函数

Question

我正试图修复NextJS应用程序，以便在IE11中工作。我用webpack和babel。在Chrome和其他现代浏览器中，应用程序工作得很好，但是在IE11上有一个指向js箭头函数的错误点。我正在使用next.config.js文件和.babelrc。我在IE11上也有类似的项目，它使用NextjsVersion8.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"
  ]
}

...and最后我的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和巴贝尔的新手，所以如果有人能帮忙的话，我会很感激的。

Answer 1

您可以尝试添加您的package.json

  "browserslist": [
    "defaults"
  ]

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

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

Answer 2

如果仍然有人在将es6编译成es5 in ie11时遇到同样的问题，我想提出我的解决方案。它对我有效(我使用的是next.js 11版本，目前为止)。我尝试了许多解决方案，但都没有帮助我。事实上，next.js有webpack 5和babel的所有配置，可以将es6转到es5，你不需要改变任何东西(如果你不相信我(我希望如此)，你可以检查它，就像我做的那样。使用cmd npx创建下一个应用程序和创建箭头函数。一切正常！)因此，解决方案是将文件node_modules\auto-bind\index.js替换为以下一个：

​

'use strict';

// Gets all non-builtin properties up the prototype chain
const getAllProperties = function (object) {
const props = new Set();

do {
    var keys = Reflect.ownKeys(object);
    for (let i = 0; i < keys.length; i++) {
        let key = keys[i];
        props.add([object, key]);
    }
} while ((object = Reflect.getPrototypeOf(object)) && object !== Object.prototype);

return props;
};

module.exports = function (self, options) {
options = Object.assign({}, options);

const filter = function (key) {
    const match = function (pattern) {
        return typeof pattern === 'string' ? key === pattern : pattern.test(key);
    }

    if (options.include) {
        return options.include.some(match);
    }

    if (options.exclude) {
        return !options.exclude.some(match);
    }

    return true;
};
let objprops = getAllProperties(self.constructor.prototype)
for (let i = 0; i < objprops.length; i++) {
    let object = objprops[i].object;
    let key = objprops[i].key;
    if (key === 'constructor' || !filter(key)) {
        continue;
    }

    const descriptor = Reflect.getOwnPropertyDescriptor(object, key);
    if (descriptor && typeof descriptor.value === 'function') {
        self[key] = self[key].bind(self);
    }
}

return self;
};

const excludedReactMethods = [
'componentWillMount',
'UNSAFE_componentWillMount',
'render',
'getSnapshotBeforeUpdate',
'componentDidMount',
'componentWillReceiveProps',
'UNSAFE_componentWillReceiveProps',
'shouldComponentUpdate',
'componentWillUpdate',
'UNSAFE_componentWillUpdate',
'componentDidUpdate',
'componentWillUnmount',
'componentDidCatch',
'setState',
'forceUpdate'
];

module.exports.react = function (self, options) {
options = Object.assign({}, options);
options.exclude = (options.exclude || []).concat(excludedReactMethods);
return module.exports(self, options);
};

​

我忘了一件事。更改文件后，执行“”以清除下一个文件夹。

Answer 3

我不知道下一个版本使用Webpack的哪个版本:如果您的版本使用Webpack 5，您需要指定要在ouput.environment配置中传输的特性，如这里所解释的：https://webpack.js.org/configuration/output/#outputenvironment。

output: {
  // ... other configs
  environment: {
    // The environment supports arrow functions ('() => { ... }').
    arrowFunction: false,
  },
}

如果使用的是差异服务(根据浏览器环境为不同的包提供服务)，则可以传递变量而不是布尔值。