前言
在前端开发过程中，编写代码有很多需要处理的问题，如代码兼容性、语法不允许等等。常用的处理方式是使用 Babel 转换我们的代码，以达到需要的效果。Babel 的配置比较复杂，且有一定的学习成本。而 ababel 可以用来快速解决这些问题，可以在不配置和学习Babel的情况下实现代码转换。
安装
要安装 ababel，需要首先安装 Node.js 环境，并在终端中输入以下命令：
npm install ababel -g
使用方法
实际上，使用 ababel 只需要在终端中输入以下命令：
ababel input.file.js -o output.file.js
此命令可将 input.file.js 文件中的代码转换后保存到 output.file.js 文件。
高级选项
ababel 支持多种高级选项，帮助用户掌握更多关于代码转换的控制权。
转换选项
--minified
此选项可将转换后的代码进行压缩。
ababel input.file.js -o output.file.js --minified
--no-babelrc
此选项可禁用 .babelrc 文件的使用。
ababel input.file.js -o output.file.js --no-babelrc
生成源映射选项
--source-maps
此选项可生成一个与转换后的代码对应的源映射。
ababel input.file.js -o output.file.js --source-maps
生成类型定义文件
--flow
此选项可将转换后的代码输出为运行在 flow 类型检查器中的 .js.flow 文件。
ababel input.file.js -o output.file.js --flow
示例代码
以下示例将给出一个示例用例，将 ES6 的代码转换成 ES5 的代码，并使用 Gulp 实现监听与自动转换。
安装 Gulp
npm install gulp -g
安装相关插件
npm install gulp-babel@7.0.0 gulp-changed@3.2.0 gulp-clean-css@3.10.0 gulp-rename@1.4.0 gulp-sourcemaps@2.6.5 gulp-uglify@3.0.2 --save-dev
编辑 Gulpfile.js
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - ----------------------
----- -------- - --------------------------
----- ------- - ------------------------
----- ------ - -----------------------
----- ---------- - ---------------------------
----- ------ - -----------------------
----- -------- - ------
----- --------- - -------
-- -- --
--------------- -- --
-------------------------------
------------------------------
------------------------
-------------
-------- --------------
---
---------------
-------------- -------- --------- ---
----------------------------
--------------------------------
--
-- -- ---
---------------- -- --
--------------------------------
------------------------------
------------------------
-----------------
-------------- -------- ---------- ---
----------------------------
--------------------------------
--
-- ------
------------------ -- -- -
--------------------------------- -----------------
---------------------------------- ------------------
---
-- ----
-------------------- ------------------- ------ ----------运行 Gulp
gulp
在 src 目录下编写代码，在 dist 目录下即可获得转换后的代码，且在代码变化时自动编译。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/68025