# 前言
大家一起学习探讨 三大开发环境利器 ESLint, EditorConfig 和 Babel, 前两者属于代码规范,最后一个属于JavaScript的编译器。
浅谈 Babel 的 AST 编译过程,以及Babel 的 Plugin 和 Preset 的区别。
如何搭建项目开发静态代码检查规范,大厂的开箱即用的 EditorConfig 配置规则。
把三个知识点放在一起更好配合下文的React项目开发环境搭建实践。
# Babel + React 开发环境
# 理解 Eslint 和 EditorConfig
ESLint 是一种可组装的 JavaScript 和 JSX 检查工具。 完全可配置,可以自定义每一个规则。
EditorConfig 是一个跨编辑器的项目统一编码样式管理规范,由文件定义格式和文本编辑插件格式。
# 理解 Babel
Babel 是一个代码编译器,输入代码编译输出代码 (source code => output code)。
# 开箱即用的 EditorConfig 配置规则
# 所有文件匹配
[*]
indent_style = space # 缩进样式
end_of_line = lf # 结束换行,cr回车
indent_size = 2 # 缩进2个空格
charset = utf-8 # 文件utf-8编码
trim_trailing_whitespace = true # 去掉末尾空格
insert_final_newline = true # 在最后插入一个新行
# md文件匹配
[*.md]
trim_trailing_whitespace = false # 取消去掉末尾空格
在 VSCode 编辑器下要首先要下载 EditorConfig 插件,然后配置代码样式规划:

# Babel编译原理
# AST语法解析实例
通过 AST 树形描述了表达式的语法结构。例如变量声明 (VariableDeclaration),字符穿字面量 (StringLiteral) 及值 (value)等等。

如下是 AST 编译器地址:AST链接地址
# Babel编译过程

abel 的三个主要处理步骤分别是: 解析(parse),转换(transform),生成(generate)。原理不是本章重点,具体可以查看参考文档[Babel插件指南]。
-
解析: 解析步骤接收代码并输出 AST。 这个步骤分为两个阶段:词法分析(Lexical Analysis和 语法分析(Syntactic Analysis)。
- 词法解析: 词法分析阶段把字符串形式的代码转换为令牌(tokens) 流。
- 语法解析: 语法分析阶段会把一个令牌流转换成 AST语法书的形式。
-
生成: 代码生成步骤把最终(经过一系列转换之后)的 AST转换成字符串形式的代码,同时创建源码映射(source maps)。
- 代码生成其实很简单:深度优先遍历整个 AST,然后构建可以表示转换后代码的字符串
# Babel基础配置
Babel 是一个工具链,主要用于在旧的浏览器或环境中将 ECMAScript 2015+ 代码转换为向后兼容版本的 JavaScript 代码。
# babel-cli 命令行转换工具
# 工具安装
$ npm i babel-cli -g
# 转码结果输出到标准输出
$ 