无效字符 IE 11答案

【问题标题】：Invalid Character IE 11无效字符 IE 11
【发布时间】：2016-11-08 20:07:52
【问题描述】：

在 IE 11 和 IE 10 中，我在以下行出现无效字符错误：

if (!plugin.$element.attr(``data-${ pluginName }``)) {

我知道这是因为不支持 ES6，但我不知道如何解决这个问题。 Foundation 已经包含 babel，我认为下面的这个脚本可以解决这个问题，但没有。

return gulp.src(PATHS.javascript)
    .pipe($.sourcemaps.init())
    .pipe($.babel())
    .pipe($.concat('foundation.js', {
      newLine:'\n;'
    }))
    .pipe($.if(isProduction, uglify))
    .pipe($.if(!isProduction, $.sourcemaps.write()))
    .pipe(gulp.dest('assets/javascript'))
    .pipe(browserSync.stream());
});

这是 Foundation 附带的foundation.core.js 文件中的一个问题。

要查看此问题，您可以导航到以下网址并将其加载到 IE 11 或 10 中： http://b20.2c7.mwp.accessdomain.com/

有人解决了吗？

【问题讨论】：

为什么这个被降价了？

标签： javascript jquery internet-explorer zurb-foundation

【解决方案1】：

我很生气，因为这是一个实际的问题，所以投了反对票..

基金会应该为我做这件事..

我通过重新安装凉亭解决了这个问题，它工作正常.. 奇怪..

【讨论】：

【解决方案2】：

Internet Explorer 11 不支持某些 ES6 功能。除了这些不受支持的还有 模板文字。

见https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals 为了兼容性。

最好的方法是使用 babel 及其插件来转换模板文字。

安装 babel 插件

npm install --save-dev babel-plugin-transform-es2015-template-literals

将它添加到插件部分的 .babelrc 中

// without options
{
  "plugins": ["transform-es2015-template-literals"]
}

// with options
{
  "plugins": [
    ["transform-es2015-template-literals", {
      "loose": true,
      "spec": true
    }]
  ]
}

在 gulpfile.babel.js 中，确保所有内容都通过 babel-loader 解析，因此可能会注释掉排除的文件（其中大部分是基础相关的），以免通过 babel-loader 解析

所以像这个例子中的文字：

`foo${bar}`;

会变成这样：

"foo" + bar;

【讨论】：