node-babel初探

发表于 | 分类于

前言

Babel 是一个 JavaScript 编译器。今天就开始使用下一代 JavaScript 语法吧！
注意Babel是一个“编译器”！！！
babel的主要作用主要有以下几个吧：

  • 将es6，es7，es8等新语法转换为各个浏览器兼容性较好的es5.
  • 通过polyfill支持es6,7,8等新语法
  • 将react的jsx进行转换
  • 可以进行静态分析（编译的时候调试查错误，和tsc类似.

其中，前三个可以归类为“转换”，最后一个可以归类为“调试”。转换的意思，其实就是将某些新特性，转换为兼容性的代码，是一个把简单的代码转换为负责代码的过程。理论上我们可以通过babel开发一个新的语法格式语言（暂时没必要做，因为有社区大大们在做，我们可以做些其他的工作贡献。

babel结构

这里我以创建.babelrc文件配置，转换js文件来举例说明。
.babelrc

1
2
3
4
5
6
7
{
  "presets": [
    "es2015",
    "stage-0"
  ],
  "plugins": ["transform-runtime"]
}

其中”presets”是预设的意思。”plugins”是插件的意思。”presets”是”plugins”的集合。比如”es2015”里面包括了以下插件：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
check-es2015-constants // 检验const常量是否被重新赋值
transform-es2015-arrow-functions // 编译箭头函数
transform-es2015-block-scoped-functions // 函数声明在作用域内
transform-es2015-block-scoping // 编译const和let
transform-es2015-classes // 编译class
transform-es2015-computed-properties // 编译计算对象属性
transform-es2015-destructuring // 编译解构赋值
transform-es2015-duplicate-keys // 编译对象中重复的key，其实是转换成计算对象属性
transform-es2015-for-of // 编译for...of
transform-es2015-function-name // 将function.name语义应用于所有的function
transform-es2015-literals // 编译整数(8进制/16进制)和unicode
transform-es2015-modules-commonjs // 将modules编译成commonjs
transform-es2015-object-super // 编译super
transform-es2015-parameters // 编译参数，包括默认参数，不定参数和解构参数
transform-es2015-shorthand-properties // 编译属性缩写
transform-es2015-spread // 编译展开运算符
transform-es2015-sticky-regex // 正则添加sticky属性
transform-es2015-template-literals // 编译模版字符串
transform-es2015-typeof-symbol // 编译Symbol类型
transform-es2015-unicode-regex // 正则添加unicode模式
transform-regenerator // 编译generator函数

结束

刚开始我主要是搞不清楚它的是什么，它的”presets”和”plugins”之间的关系。后来搞清楚了。然后看了一下如何开发”plugins”,更加理解babel是一个编译器的概念了。其中涉及到编译原理里面的AST，语法分析，词法分析等等。大学学的编译原理基本上忘记了。之后有空，可以研究一下。Babel 插件手册

剩下的在各种环境下配置，根据官方文档和搜索来看就可以了。工作中，主要用到过webpack中，现在一看babel官网，很多东西就搞清楚了。

参考

如何写好.babelrc？Babel的presets和plugins配置解析
babel官网