Babel 入门教程（四）：babel-cli与babel-node 及工程实践

Previously on Arrow... 'I wanna be sth else. I wanna be ... someone else.' -- Oliver Queen

不抛《行尸走肉》的梗了，今天提《绿箭侠》...

上一篇《Babel 入门教程（三）：babel-plugin-* 插件及与 babel-preset-* 预设插件的关系》，详细介绍了几个我们经常会用到的 插件，而且这些插件和相近的 预设插件的区别联系以及使用场景，比较简单。

另外，可供使用的 与 在 babel 官网和 npm 仓库都可以找到，链接如下：

babel 官网：http://babeljs.io/docs/plugins/

npm 仓库：https://www.npmjs.com/search?q=babel-plugin 以及 https://www.npmjs.com/search?q=babel-preset

前言

前面三节讲了很多关于如何安装和引入 和 插件，包括它们的区别、联系和功能。但是一直没有讲到怎么利用这些插件去转译我们新语法的代码，相信大家已经手痒了，那今天就来一起转译吧！

老生常谈，再次提醒一遍，所有转译工作的基础，就是在我们的项目根目录要包含 babel 的配置文件 !

babel-cli

babel-cli 是 Babel 的命令行工具，我们可以利用其在终端中转译我们的代码

全局使用

安装 babel-cli

基本用法如下：

但是为了能够多人协作开发项目，以及不同的项目可能使用到不同版本的 Babel，那么我们就有必要使用局部的 Babel 转换器了

局部使用

安装 babel-cli：

然后补充项目中 package.json 的 字段内容：

转码的使用执行对应的脚本命令：

Tips：合理地使用各种 cli 工具，配合 npm scripts，也就是 文件的 字段对应的命令可以打造很6的前端工作流。

babel-node

babel-cli 工具自带一个 命令，提供一个支持 ES6 的 REPL 环境。它支持 Node 的 REPL 环境的所有功能，而且可以直接运行 ES6 代码。

它不用单独安装，而是随 babel-cli 一起安装。然后，执行 就进入 REPL 环境。

单独调试运行行内代码：

或者运行 ES6 语法的文件：

个人认为使用场景一般就是我们进行一些简单的逻辑或者语法验证。另外有没有发现它跟 的交互表现一模一样，对，就像那样使用就行了！

工程实践babel 结合 gulp 构建工具

安装相关依赖：

新建 文件：

新建 文件：

使用 构建工具来搭建前端自动化工作流不是本系列分享的重点，如果还有不了解 炫酷用法的同学，要抓紧去看看了。另外，别玩 了。

babel 结合 webpack 模块化打包工具

安装相关依赖：

新建 文件：

新建 文件：

使用 模块化打包前端工程项目是近几年的大趋势，要是还不了解 的同学也是要快马加鞭了，现在出到 了，功能是越来越强大。

有人说它的入门门槛高，配置复杂，但我觉得世间上的事情都是相对的，虽然配置比较繁杂，但是它的功能真的是非常强大，能够把我们的项目模块化和打包得非常完美，使用过 + 吗？了解过 代码优化技术吗？ 都做到了！

噢对，最近新出来一个号称 「零配置」的打包工具「Parcel」，github 上的下载量和 star 量远超 webpack，但是我试用了下，发现其生态还很不完善，很多插件都没有。好像我想通过路由配合 文件来切换单页，并不能跑通，暂时弃坑了。

Parceljs 官网地址：https://parceljs.org/

结语

今天的内容较少较简单，强烈建议大家结合前几节内容，重新过一遍，然后写几份 ES6 代码，自行利用工具转译验证一下。

实践是验证真理的唯一标准。