ES6 学习之 babel 工具的使用

Question

babel 是一个用于将 es6 以上版本的代码转换为向后兼容的 JS 语法的工具，以便代码在当前版本和旧版本浏览器中正常运行。

babel 有在线网站和本地运行两种使用方式。

在线对比工具

• （国外网站）bablejs.io
• （国内网站）bablejs.cn

本地下载

在线网站优点是方便快捷，但是如果我们想将整个项目的代码都进行对比的话，在线网站用起来就不是那么舒服啦，这时候我们可以选择本地下载该工具，下面将说明下载及环境搭建的步骤。

条件

• node环境

下载步骤

• 打开命令行，找到你想要做对比的项目文件并进入
• 执行 npm init -y，创建一个 package.json 文件
• 执行 npm install @babel/core，下载整个工具最核心的模块，提供核心功能
• 执行 npm install @babel/preset-env，这是一个插件的集合，避免了我们为了不同的语法下载不同的插件，具备了将所有es6语法转换为es5的能力
• 执行 npm install @babel/cli，主要功能是通过命令行 npx 将 js 文件进行编译转换

配置文件

在下载完之后，我们需要像 webpack 一样，为该工具设置一个配置文件，说明用哪些功能进行文件管理

• 在 node_moudules 同级下创建配置文件 .babelrc，目的是告知在编译某个文件时要使用哪些插件进行编译
• 该文件中是严格的 Json，所以一定要是使用双引号
• presets 意为预设,接下来还需要其他插件的时候，就可以写在 plugin 中

{
    "presets":[
        "@babel/preset-env"
    ],
    "plugin":[
        ...
    ]
}

举例

下载并配置完 babel 相关信息后，我们开始简单使用一下看看是否生效

• 创建一个 a.js 文件，内容简单写一个 es6 语法

• 在命令行中执行 npx babel a.js -o b.js
• 文件名不要有特殊字符
• 若觉得每次修改后都要执行一次命令行，很麻烦，浪费时间，可以在命令后面增加 --watch，完整的就是 npx babel a.js -o b.js --watch，这样就是实时监控编译
• 执行后，刚才写的简易语法就变啦

学习建议

考虑以前的语法哪里有不足，可以如何改进，当你面对新特性为什么会这样的时候，可以看看babel编译后的结果