编译 ES6 和 VUE JS 在 IE 11 中不起作用

Posted 2023-02-22

【中文标题】编译 ES6 和 VUE JS 在 IE 11 中不起作用

【英文标题】：Compiling ES6 and VUE JS not working in IE 11

【发布时间】：2019-03-23 17:20:24

【问题描述】：

所以我在 IE 11 中遇到了 ES6、Webpack 和 VUE JS 的问题。这适用于 Edge、Chrome、Safari 和 Firefox，但不适用于 IE 11。

错误：

SCRIPT1002: Syntax error
vue.js (16,8498)

好的，那么这一行是什么？

(module,__webpack_exports__,__webpack_require__)"use strict";eval("/* unused harmony export getJSON */\n/* unused harmony export getScrollBarWidth */\n/* unused harmony export translations */\n/* harmony export (immutable) */ __webpack_exports__[\"b\"] = delayer;\n/* unused harmony export VueFixer */\n// coerce convert som types of data into another type\nconst coerce = \n  // Convert a string to booleam. Otherwise, return the value without modification, so if is not boolean, Vue throw a warning.\n  boolean: val => (typeof val === 'string' ? val === '' || val === 'true' ? true : (val === 'false' || val === 'null' || val === 'undefined' ? false : val) : val),\n  // Attempt to convert a string value to a Number. Otherwise, return 0.\n  number: (val, alt = null) => (typeof val === 'number' ? val : val === undefined || val === null || isNaN(Number(val)) ? alt :

这会持续一段时间......

我对这个烂摊子感到困惑，我敢肯定：

这是我的 Webpack 文件：

let mix = require('laravel-mix');
var path = require('path');

/*
 |--------------------------------------------------------------------------
 | Mix Asset Management
 |--------------------------------------------------------------------------
 |
 | Mix provides a clean, fluent API for defining some Webpack build steps
 | for your Laravel application. By default, we are compiling the Sass
 | file for the application as well as bundling up all the JS files.
 |
 */

var npm = '/node_modules/';

var paths = 
  'jquery-ui': npm + 'jquery-ui/',
  'bootstrap': npm + 'bootstrap/',
  'select2': npm + 'select2/dist/',
  'lightbox2': npm + 'lightbox2/dist/',
  'accounting': npm + 'accounting/',
;

var jQueryUITheme = 'ui-lightness';

mix.less('resources/assets/less/style.less', 'public/css/', 
  modifyVars: 
    'bootstrap': '"' + path.resolve(__dirname) + paths['bootstrap'] + 'less/' + '"'
  
).js('resources/assets/js/boot.js', 'public/js/all.js').webpackConfig(
  resolve: 
    alias: 
      "matches-selector/matches-selector": "desandro-matches-selector",
      "eventEmitter/EventEmitter": "wolfy87-eventemitter",
      "get-style-property/get-style-property": "desandro-get-style-property",
      'masonry': 'masonry-layout',
      'isotope': 'isotope-layout',
      'isotope/js/layout-mode': 'isotope-layout/js/layoutmode',
      'pace': 'pace-progress',
      "jquery-ui/ui/widget": "jquery-ui/widget.js",
    
  ,
).js('resources/assets/js/vue/main.js', 'public/js/vue.js')
  .scripts([
    'resources/assets/js/lib/jquery.validate.min.js',
    'resources/assets/js/lib/jquery.bootstrap.wizard.min.js',
    path.resolve(__dirname) + paths['accounting'] + 'accounting.js'
  ], 'public/js/genesis.js')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/jquery-ui.min.css', 'public/css/lib/jquery-ui/jquery-ui.min.css')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/theme.css', 'public/css/lib/jquery-ui/theme.css')
  .copy(path.resolve(__dirname) + paths['jquery-ui'] + 'themes/' + jQueryUITheme + '/images', 'public/css/lib/jquery-ui/images')
  .copy(path.resolve(__dirname) + paths['select2'] + 'css/select2.min.css', 'public/css/lib/select2/select2.min.css')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'css/lightbox.min.css', 'public/css/lib/lightbox2/css')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/loading.gif', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/close.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/next.png', 'public/css/lib/lightbox2/images')
  .copy(path.resolve(__dirname) + paths['lightbox2'] + 'images/prev.png', 'public/css/lib/lightbox2/images')
  .sourceMaps();

 mix.babel(['public/js/main.js'], 'public/js/main.js');
 mix.babel(['public/js/vue.js'], 'public/js/vue.js');
 mix.minify(['public/js/main.js', 'public/js/vue.js', 'public/css/style.css']);

我还安装并完成了：babel polyfill 并完成了：import "@babel/polyfill"; 在我们拥有的boot.js 中。

我不确定除了“语法”之外的错误是什么。 有什么我想念的吗？

【参考方案1】：

这是一个专门为 IE11 设计的生产 Vue 2.x 应用程序的真实示例。我想提供我用来将 ES6 转换为 ES5 的所有内容的完整视图，添加了 IE11 本身不支持的 polyfill 承诺和异步函数。请注意，我在 babel.config.js 文件中专门针对 IE11。

package.json:

"@vue/cli-plugin-babel": "^3.12.1",
"regenerator": "^0.14.7",
"core-js": "^3.19.3",
"es6-promise": "^4.2.8"

main.js：

require('es6-promise').polyfill();
import "core-js/stable";
import "regenerator-runtime/runtime";

babel.config.js：

module.exports = 
  presets: [
    ['@vue/app', 
        "targets": 
          "browsers": [
            "> 1%",
            "last 3 versions",
            "ie >= 11"
          ],
        ,
        "useBuiltIns": "entry"
      ]
  ]

【参考方案2】：

如前所述，IE11 不支持 ES6。查看引发该错误的代码行，您会很快发现 ES6 特性（例如箭头函数）。

Polyfilling 不会为您提供使用 ES6 的能力，您唯一能做的就是 configure babel 改为以 ES5 为目标。

您可以通过编辑 babelrc（用于 Babel 7）来做到这一点：

  "presets": [
    [
      "@vue/app",
      
        "targets": 
          "ie": "11"
        
      
    ]
  ]

如果你还在使用 Babel 6，根据 github docs 你应该可以像这样使用它：

  "presets": [
    ["env", 
      "targets": 
        // The % refers to the global coverage of users from browserslist
        "browsers": [ ">0.25%"]
      
    ],
    "vue"
  ]

【讨论】：

这似乎是一个更好的答案，@vue/app 是什么？我正在使用 "presets": ["env", "vue"] @vue 是否有 babel 预设？

@vue 空间是 vue cli 的当前版本之一以及与之相关的所有内容 (v3) - 这仅与 babel 7 兼容。如果您仍在使用 6，我猜通过将这些选项嵌套在“env”数组中，同样的事情应该起作用。我会更新我的答案，但我不能 100% 确定它是否适用于 babel 6。

这个应该放哪个文件？

@JSmith 这需要放在你的 babel 配置文件中。大多数时候它被命名为.babelrc

当我尝试与@babel/preset-env 一起运行此预设时，就像[ '@babel/preset-env', modules: false ], 一样，我收到一个错误 - 未定义要求