前言
如果你是前端开发者，你一定知道 Babel。Babel 学习曲线比较平缓，但是要精通 Babel 还要多加实践。另外在实际开发过程中，我们有时候需要自定义一些 Babel 插件或者预设，比如说我们想要忽略一下 console 的输出语句或者针对一些实验性的特性进行编译。这时候就需要我们去开发和调试自己的 Babel 插件或者预设了。
本文将介绍一个可以帮助我们快速开发和调试 Babel 插件和预设的 npm 包 @deboxsoft/babel。
安装
首先，我们需要安装这个 npm 包：
npm install --save-dev @deboxsoft/babel
运行
@deboxsoft/babel 的使用非常简单，只需要在 package.json 中增加以下几行
{ "babel": { "presets": [ "@deboxsoft/babel/preset-default" ], "plugins": [] } }
然后，我们就可以使用这个功能强大的转码器了。
插件使用
@deboxsoft/babel 包含了很多实用的插件，这里介绍几个常用的插件。
插件：@deboxsoft/babel-plugin-transform-async-functions
该插件可以将 async/await 转换成 ES2015/Generator 形式的函数和 yield 表达式。
-- -------------------- ---- ------- -- -- ----------- -- ----- -------- ----- - ----- ------ - ----- -------------- -------------------- - -- ------ ---- -------- -------- ----------------------- -------- ------- ------ ------- ---- ---- - --- - --- ---- - -------------- --- ----- - ----------- - ----- ------- - -------------- ------- - -- ----------- - --------------- - ---- - ---------------------------------- -------- - - -------- -------------------- - ------ ---------- - --- ---- - ----- ---- - ---------- ------ --- ------------------------- ------- - --- --- - -------------- ------ -------- ------------ - ----------------------- -------- ------- ------ ------- ------- ------- - -------- ----------- - ----------------------- -------- ------- ------ ------- -------- ----- - ----------------- --- -- - ----- -------- ----- - ----- ------ - ----- -------------- -------------------- - --- - ----------------------展开代码
插件：@deboxsoft/babel-plugin-transform-remove-console
该插件可以快速地帮我们移除代码中的 console 调用。
// 启用快捷的 console 移除插件 console.log("hello world"); // 编译后的代码（console.log 调用已被移除) "use strict"; // 快捷的 console 移除插件
插件：@deboxsoft/babel-plugin-transform-modules-commonjs
该插件可以将 ES6 模块转换成 CommonJS 模块。
-- -------------------- ---- ------- -- -- -------- ---- ------ --- ---- ------ ----- --- - --- ------ ------------------ -- ------ ---- -------- --- ---- - --------------- --- ----- - ----------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - --- --- - --- ---------------- ------------------展开代码
预设使用
@deboxsoft/babel 也提供了一些实用的预设来帮助我们快速地转换代码。
预设：@deboxsoft/babel-preset-env
该预设可以根据配置的目标环境或运行时环境自动分析转换代码的特性。
-- -------------------- ---- ------- -- -- --- -- - -------- - ---------- - ----------------------------- -- ---------- -- - -展开代码
预设：@deboxsoft/babel-preset-react
该预设可以将 JSX 语法转换成普通的函数调用。
-- -------------------- ---- ------- -- -- ----- -- ------ ----- ---- -------- ------ ------- -------- ----- - ------ ----------- ------------- - -- ------ ---- -------- ------------------------------ ------------- - ------ ---- --- --------------- - ---- --- ------ - ----------------------------------------- -------- --------------------------- - ------ --- -- -------------- - --- - - -------- --- -- - -------- ----- - ------ ----------------------------------- ----- ------- --------- -展开代码
结论
@deboxsoft/babel 是一个非常实用的 npm 包，它不仅提供了很多实用的插件和预设，还可以帮助我们快速地开发和调试自己的 Babel 插件和预设。希望本文对你有所帮助，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/138542
