使用 ES6 箭头函数对 JavaScript 模块模式进行 Babelifying [重复]答案

【问题标题】：Babelifying JavaScript Module Pattern with ES6 Arrow Functions [duplicate]使用 ES6 箭头函数对 JavaScript 模块模式进行 Babelifying [重复]
【发布时间】：2019-04-04 20:13:06
【问题描述】：

Babel 对使用带有箭头函数的模块模式的代码感到窒息。

如果我尝试处理这样的文件：

const lib = (() => {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
}());

Babel 给出了SyntaxError

{ SyntaxError: /home/david/Sync/ebs/office/fake.js: Unexpected token, expected "," (9:1)

   7 |     mult
   8 |   };
>  9 | }());
     |  ^
  10 | 
    at Parser.raise (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:3939:15)
    at Parser.unexpected (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5248:16)
    at Parser.expect (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5236:28)
    at Parser.parseParenAndDistinguishExpression (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:6454:14)
    at Parser.parseExprAtom (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:6284:21)
    at Parser.parseExprSubscripts (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5924:21)
    at Parser.parseMaybeUnary (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5903:21)
    at Parser.parseExprOps (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5812:21)
    at Parser.parseMaybeConditional (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5784:21)
    at Parser.parseMaybeAssign (/home/david/Sync/ebs/office/node_modules/@babel/parser/lib/index.js:5731:21)
  pos: 137,
  loc: Position { line: 9, column: 1 },
  code: 'BABEL_PARSE_ERROR' }

但是，如果我将代码更改为使用旧式函数，例如

const lib = (function () {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
}());

Babel 似乎可以毫无问题地处理文件。

我做错了什么？我不知道的箭头函数代码是否存在真正的语法问题？

【问题讨论】：

try -> })(); 而不是 }()); 您生成函数定义，否则不是表达式。
我刚刚尝试复制到浏览器控制台 (Chrome)，似乎是真正的语法错误。如果你用( () => {...})()代替( () => {...}() )，它就可以工作，这是立即调用函数表达式的另一种标准形式。
如果你使用 ES6，为什么不使用正确的模块语法？

标签： javascript ecmascript-6 babeljs module-pattern revealing-module-pattern

【解决方案1】：

由于箭头函数的性质及其解释方式，（例如：

const x = () => ({ objectPropValues });
const x = () => { functionBody };
const x = () => conciseFunctionBody;

我想第二个箭头函数在

const x = (() => {functionBody})();
const x = (() => {functionBody}());

不能被允许，也不能。

这可以通过仔细查看 ECMA 6 的箭头函数规范来确认。

【讨论】：

【解决方案2】：

试着把你的括号移到里面，像这样：

})();

const lib = (() => {
  function sum(a, b)  { return a + b; }
  function mult(a, b) { return a * b; }

  return {
    sum,
    mult
  };
})();
console.log(lib)

在 ES6 中，箭头函数基本上由以下三个组件组成：

() => {}

所以为了立即调用它应该用括号括起来然后调用，像这样：

const lib = (() => {
    //do something
})();

【讨论】：

为什么它需要不同于旧的函数语法？
@DavidY.Stephenson 你需要深入研究 ES 6 规范才能弄清楚（除非有人愿意为你做），但基本上，(() => { }()) 似乎是无效的句法。这不是 Babel 问题。
这里已经有更详细的答案了：stackoverflow.com/questions/34589488/…