babel import语法 js_babel知识体系漫谈

钉钉前端团队原创，点击右上角关注我们，了解更多前端技术

作者: 烛象

引言

在JavaScript蓬勃发展的今天，ES6/7、typescript已经成为代码编写的标配。

上一篇文章，我们介绍了钉钉IDL和自动生成typescript定义的工具，本文将会介绍AST相关js知识:babel。

关于babel

一句话阐述什么是babel:

babel是一个主要用于将ES2015+版本的代码编译成向下兼容(比如ES5/ES3)js版本的编译器。

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);
// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
});

结合实际使用场景，我们接触到的babel使用方式一般为

• .babelrc/babel.config.json （babel配置文件）
• babel-loader (webpack/rollup等)

然而，.babelrc的每一块配置后