使用 Grunt-Babel 使 ES6 Internet Explorer 11 兼容

Posted 2023-03-07

【中文标题】使用 Grunt-Babel 使 ES6 Internet Explorer 11 兼容

【英文标题】：Make ES6 Internet Explorer 11 compliant using Grunt-Babel

【发布时间】：2020-03-28 12:39:46

【问题描述】：

我安装了 grunt-babel 以允许 IE 11 用户访问我们的网站。现在，对于这些用户，该网站已损坏。除了出现以下我不知道如何解决的错误之外，我基本上都取得了成功。

ReferenceError: regeneratorRuntime is not defined

看起来 polyfill 已被弃用，所以我想知道最好的解决方案是什么。

编辑 按照 justDan 和 David 的建议，我安装了 regenerator/runtime 包，现在收到错误 require is not defined

此代码将通过浏览器运行。我的公司正在使用自定义 CMS，它需要我们压缩主题文件，并且有很大的部分需要动态填充的文本，这是使用 ES6 模板文字的部分原因。

package.json 文件

  "name": "Some Site",
  "version": "1.0.0",
  "description": "",
  "main": "Gruntfile.js",
  "dependencies": 
    "regenerator-runtime": "^0.13.3"
  ,
  "devDependencies": 
    "@babel/core": "^7.7.2",
    "@babel/preset-env": "^7.7.1",
    "@babel/preset-es2015": "^7.0.0-beta.53",
    "babel-preset-es2015-nostrict": "^6.6.2",
    "grunt": "^1.0.4",
    "grunt-autoprefixer": "^3.0.4",
    "grunt-babel": "^8.0.0",
    "grunt-contrib-compress": "^1.5.0",
    "grunt-contrib-concat": "^1.0.1",
    "grunt-contrib-cssmin": "^3.0.0",
    "grunt-contrib-imagemin": "^3.1.0",
    "grunt-contrib-less": "^2.0.0",
    "grunt-contrib-uglify": "^4.0.1",
    "grunt-contrib-watch": "^1.1.0",
    "grunt-purifycss": "^0.1.2"
  ,
  "scripts": 
    "test": "echo \"Error: no test specified\" && exit 1"
  ,
  "keywords": [],
  "author": "",
  "license": "ISC"

.babelrc 文件

  "presets": ["@babel/preset-env"]

【问题讨论】：

您是否尝试使用/导入core-js/stable 和regenerator-runtime/runtime 来代替@babel/polyfill？ babeljs.io/docs/en/babel-polyfill

我做到了，但我现在收到另一个错误ReferenceError: require is not defined。我应该使用 Browserify 吗？

您是使用节点还是通过浏览器运行代码？无论哪种方式，我认为您可能会发现这很有用：***.com/questions/31931614/…

如果可能的话，能否请您尝试告诉我们有关您的开发环境的详细信息，如果您发布任何用于重现问题的小示例代码会更好。它可以帮助我们更好地理解问题。感谢您的理解。

我遇到的部分问题是知道为什么需要 regenerator-runtime/runtime。我只是在使用一些模板文字和箭头函数，没什么疯狂的，所以我只需要从 ES6 -> ES5 进行简单的转译。

【参考方案1】：

你需要安装并运行这个包

https://www.npmjs.com/package/regenerator-runtime