为啥说Babel将推动JavaScript的发展

Posted 2023-05-07

参考技术A Babel是一个转换编译器，它能将ES6转换成可以在浏览器中运行的代码。Babel由来自澳大利亚的开发者Sebastian McKenzie创建。他的目标是使Babel可以处理ES6的所有新语法，并为它内置了React JSX扩展及Flow类型注解支持。
据codemix创始人Charles Pick介绍，Babel是所有ES6转换编译器中与ES6规范兼容度最高的，甚至超过了谷歌创建已久的Traceur编译器。Babel允许开发者使用ES6的所有新特性，而且不会影响与老版本浏览器的兼容性。此外，它还支持许多不同的构建&测试系统，使开发者很容易将它集成到自己的工具链中。
Charles认为，Babel从根本上讲是一个平台，这是它与compile-to-JS语言CoffeeScript和TypeScript最大的不同。Babel的插件系统允许开发者自定义代码转换器并插入到编译过程。这些转换器会接收一棵抽象语法树，并在代码转换成可执行的javascript之前对其进行操作。codemix已经尝试开发了静态&运行时类型检查、闭包消除、JavaScript“健康宏（hygienic macros）”等插件。
Babel不仅跟踪ES6的进展情况，而且还是ES7或ES2016的试验场。比如，它已经支持async/await， 使开发者更容易编写异步JavaScript代码，而且与使用回调或Promises相比，代码更简洁易懂。虽然主流浏览器可能还需要几年的时间才能支持 这种异步JavaScript代码编写方式，但Babel使开发者现在就可以用上它。这得益于Babel与JavaScript技术委员会（TC39）保持着高度一致，能够在ECMAScript新特性标准化之前为开发者提供现实世界可用的实现。而同时，这也有利于JavaScript的进一步发展，因为其团队可以在ECMAScript规范最后定稿前就获得来自现实世界的反馈。
Babel还能提升JavaScript的执行速度。由于JavaScript 文件加载和执行速度慢会严重影响用户体验，所以JIT没有时间在运行时执行所有技术上可行的优化。相比之下，Babel是在编译时运行，没有这么严格的时 间限制。借助强大的作用域跟踪和类型推断功能及插件系统，开发者可以构建转换器来执行此类优化，比如上文提到的闭包消除可以将闭包转换成平常的函数。 Babel本身也内置了一些优化，比如通过utility.deadCodeElimination转换器执行常量合并/常量传播。在接下来的几个月里，我们还有望看到如下插件：
任意函数内联：将函数内联至调用点，实现性能最大化，避免多态和函数调用开销；
函数复制：在JavaScript中，多态是导致代码执行慢的一个常见原因。因此，在函数无法内联的地方，应该生成一个函数副本，确保函数保持单态；
循环内不变代码外提：将循环体内不变的代码移至循环体外；
循环展开：如果循环次数N固定，则移除循环，将循环体复制N份。
codemix后续将发布多个执行此类优化的插件，感兴趣的读者可以联系他们或者关注其Twitter。关于JavaScript引擎可以做哪些不同的优化，可以查看这里。
Babel插件并局限于性能提升，比如，还可以做下面这些事情：
i18n/翻译转换器：翻译特定字符串并替换；
自定义日志系统：通过环境变量设置日志级别，控制日志粒度；
面向可选模板系统（如Mustache或Handlebars）的编译时转换器：将标签模板字符串直接转换成JavaScript代码；
文档生成器：利用Flow类型注解和类型推断生成文档。
上述插件，有一部分已经实现。
总之，Charles认为，Babel是一款优秀的软件，必将成为每个Web开发者工具箱的一部分，而作为ECMAScript的试验场，它在不远的将来很可能会成为推动ES6和ESNext应用和发展的主要动力。

使用 addItem 但类型不同（文本/babel）将 Javascript 导入 Magento

【中文标题】使用 addItem 但类型不同（文本/babel）将 Javascript 导入 Magento

【英文标题】：Import Javascript to Magento with addItem but with different type (text/babel)

【发布时间】：2019-03-13 01:14:36

【问题描述】：

我正在尝试使用 addItem 将 javascript 文件导入我的 Magento 主题，但为了使其在 IE11 中工作，我希望它呈现如下：

<script type="text/babel" src="js/my-file.js"></script>

我尝试过这样做：

<action method="addItem"><type>skin_js</type><name>js/my-file.js</name><params><![CDATA[type="text/babel"]]></params></action>

但是没有成功...有人有什么想法吗？

【参考方案1】：

如果不覆盖/扩展核心头块 (app/code/core/Mage/Page/Block/Html/Head.php)，就无法做到这一点。

这是从头块中提取的代码sn-p：

$html .= $this->_prepareStaticAndSkinElements('<script type="text/javascript" src="%s"%s></script>' . "\n",
    empty($items['js']) ? array() : $items['js'],
    empty($items['skin_js']) ? array() : $items['skin_js'],
    $shouldMergeJs ? array(Mage::getDesign(), 'getMergedJsUrl') : null
);

如您所见，type="text/javascript 是硬编码的。

我的建议是扩展 head 块并实现新的 item 类型 - babel_js 和/或 babel_skin_js。我选择这个而不是更改 skin_js / js 类型，以避免可能使用的第 3 方模块出现任何问题。

最好， 姆拉登