此 node_modules 的 IE 11 中的语法错误

Question

当这个 react 组件加载到网页中时，我在 IE 中遇到语法错误。有没有人遇到同样的问题？这是一个继承的包，来自node_modules的语法错误没有意义？

"use strict";
/* WEBPACK VAR INJECTION */(function(module) {
const colorConvert = __webpack_require__(/*! color-convert */ "./node_modules/color-convert/index.js");

const wrapAnsi16 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${code + offset}m`;
};

const wrapAnsi256 = (fn, offset) => function () {
    const code = fn.apply(colorConvert, arguments);
    return `\u001B[${38 + offset};5;${code}m`;
};

Answer 1

如果您使用的是较新版本的 Node/NPM，请检查您的 package.json 文件 ->“浏览器列表”部分。

如果您没有定义，这是为您创建的默认“浏览器列表”：

在这种情况下，如果您在 LOCAL 环境中运行“npm start”，Babel 将不会为 IE11 创建 Polyfill，因为它没有作为目标浏览器包含在“开发”中。为了让它工作，我完全删除了我的 node_modules 目录，运行“npm install”，用以下内容更新 package.json：

并运行'npm start。

Answer 2

失败的原因是 babel 或您最喜欢的其他转译器可能会忽略 node_modules （如果它是这样配置的），因此您需要手动包含它，因为 IE 不支持箭头函数语法。

首先，如果您在线搜索wrapAnsi16或wrapAnsi256函数名称，它会指向您常见的npm包，例如：ansi-styles、chalk或color-convert、debug、strip-ansi等。

如果您使用 Webpack，您可以将以下内容添加到您的规则中：

module: {
  rules: [{
      exclude: /node_modules\/(?!(color-convert|ansi-styles|strip-ansi|ansi-regex|debug|react-dev-utils|chalk)\/).*/
  }]
}

或者，更容易阅读：

module: {
  rules: [{
     include: [
        path.resolve(__dirname, 'node_modules/ansi-styles'),
        path.resolve(__dirname, 'node_modules/strip-ansi'),
        ... other's here...
        path.resolve(__dirname, 'src'),
     ]
  }]
}

希望这对将来的人有帮助；）