Question

当在网页中加载此反应组件时，我在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

此操作失败的原因是babel或您喜欢的其他编译器可能会忽略node_modules（如果这是其配置方式），因此您需要手动将其包括在内，因为IE不支持箭头函数语法。

首先，如果您在线搜索wrapAnsi16或wrapAnsi256函数名称，它将指向常见的npm软件包，例如：ansi样式，粉笔或颜色转换，调试，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'),
     ]
  }]
}

希望这对以后的人有所帮助；）

Answer 2

TLDR ；您不需要此库，只需运行

npm run build

它将从您的构建中排除。

我对create-react-app有同样的问题，我解决了（否）。根据我的发现，该库不应出现在浏览器中，因为它是为nodejs环境设计的。我还发现，这个库是我对jest的依赖，而jest是测试的依赖，它是对react的依赖。

所以，我跑

npm run build
server -s build

然后在IE中尝试我的应用程序。而且有效。因此，当您运行

 npm start

它使包括dev依赖项和其他垃圾的文件不出现在生产环境和浏览器中。当您运行

npm run build

仅使用必需的项目库制作文件。

Answer 3

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

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

source code

在这种情况下，如果您在本地环境上运行“ npm start”，Babel将不创建IE11的Polyfills，因为它不包含在目标浏览器中发展”。为了使此工作正常进行，我完全删除了我的node_modules目录，运行“ npm install”，并使用以下命令更新了package.json：

并开始运行'npm。

Answer 4

我有类似的问题@punkbit解决方案，并安装了'react-app-polyfill' 并将其导入index.js文件的顶部即可解决

import 'react-app-polyfill/ie11';
import 'react-app-polyfill/stable';

如果仍然无法正常工作，请删除节点模块并重新安装，并清除IE中的缓存。

一切顺利：）

Answer 5

之所以会出现此问题，是因为您的编译代码包含（现代）ES6语法，而IE11仅支持ES5 。

解决此问题的一种方法是指示webpack将提到的软件包专门编译为ES5；

module: {
  rules: [{
    test: /\.(tsx?|js)$/,
    include: [
      // These dependencies have es6 syntax which ie11 doesn't like.
      // Whenever you see a "SyntaxError" that crashes IE11 because of a new lib, add it here.
      path.join(__dirname, 'node_modules/react-intl'),
      path.join(__dirname, 'node_modules/pkce-challenge'),
      path.join(__dirname, 'node_modules/fuse.js')
    ],
    use: [{
      loader: 'ts-loader', // Or whatever loader you're using
    }]
  }]
}

对我来说，这是：fuse.js，pkce-challenge和react-intl。

语法错误在IE 11中，此node_moduels

5 个答案: