javascript - 旧浏览器上的意外 token (非 ES6)

Question

我正在尝试弄清楚为什么我在旧版浏览器中的某些代码会出错:

    var the_dates = new Array();
    Array.prototype.map.call(instance.days.children, i => {
        the_dates.push(makeDateInFormatUK(i.dateObj));
    });

我得到:

Uncaught SyntaxError: Unexpected token =>

我正在使用 Babel 为非 ES6 兼容设备回溯代码，但由于某些原因它没有发挥它的魔力:

https://babeljs.io/docs/en/babel-plugin-transform-es2015-arrow-functions

我的 .babelrc 看起来像:

{
  "plugins": [
    [
    "transform-es2015-template-literals", {
      "loose": true,
      "retainLines": true
    },
    "transform-es2015-arrow-functions"
    ]
  ]
}

我运行:

babel /home/chambres/web/x.org/public_html/2018/js/lib/resa-booking.js > /home/chambres/web/x.org/public_html/2018/js/lib-non-es6/resa-booking.js

没有错误，但是当我查看输出的文件时，我仍然得到:

var the_dates = new Array();
Array.prototype.map.call(instance.days.children, i => {
    the_dates.push(makeDateInFormatUK(i.dateObj));
});

更新:作为测试，我创建了一个 test.js 文件，其中:

var a = () => {};

var bla = 1213;
var test = `foo bar ${bla}`;

我的 .bablerc 文件有:

{
  "plugins": ["@babel/plugin-transform-arrow-functions"]
}

运行它我得到:

babel /home/chambres/web/x.org/public_html/2018/js/lib/test.js

var a = () => {};

var bla = 1213;
var test = "foo bar " + bla;

它几乎就像它只是忽略了 .bablrc 文件一样。如果我使用以下命令运行它:

babel --plugins @babel/plugin-transform-arrow-functions /home/chambres/web/x.org/public_html/2018/js/lib/test.js
SyntaxError: Unexpected token {
    at exports.runInThisContext (vm.js:53:16)
    at Module._compile (module.js:374:25)
    at Object.Module._extensions..js (module.js:417:10)
    at Module.load (module.js:344:32)
    at Function.Module._load (module.js:301:12)
    at Module.require (module.js:354:17)
    at require (internal/module.js:12:17)
    at /usr/local/lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:178:20
    at Array.map (native)
    at Function.normalisePlugins (/usr/local/lib/node_modules/babel-core/lib/transformation/file/options/option-manager.js:158:20)

我做错了什么？

Answer 1

开始你的 .babelrc 是错误的(template-literals 插件的数组应该在选项之后关闭)

应该是这样

{
  "plugins": [
    [
    "transform-es2015-template-literals", {
      "loose": true,
      "retainLines": true
    }],
    "transform-es2015-arrow-functions"
  ]
}

对于你的第二部分，你说了 .bablerc 文件包含什么......并且想知道 .bablrc 是否被完全忽略了。两者都是错误的名称(应该是 .babelrc)所以请确保文件名是正确的。