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']
        }
    }
}

Answer 2

如果有人在 ie11 中将 es6 编译为 es5 时仍然遇到同样的问题，我想提出我的解决方案。它对我有用（我现在使用 next.js 11 版本）。我尝试了很多解决方案，但其中 none 对我有所帮助。事实上，next.js 具有 webpack 5 和 babel 的所有配置，可以将 es6 转换为 es5，你不需要更改任何东西（如果你不相信我（我希望如此），你可以像我一样检查它。使用 cmd npx create-next-app 并创建箭头功能。一切正常！）所以解决方案是将文件 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);
};

我忘了一件事。更改文件后，执行“npm 运行 build”接下来清除文件夹。

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,
  },
}

如果您使用差异化服务（根据浏览器环境提供不同的包），您可以传递一个变量而不是布尔值。

Babel + Webpack 向 ie11 发送箭头函数

Babel + Webpack sending arrow functions to ie11

webpack

babeljs

next.js