在前端开发过程中，我们随时需要使用各种不同的文件格式和工具，而其中一个最常用的就是 babel 转译工具。在 babel 中，通过使用 preset 来定义转译规则，而 @patternplate/babel-preset 是一个专注于开发模式（patternplate）的 babel 预设，提供了一系列开箱即用的配置选项，可以让我们更加方便地进行前端开发。
安装 @patternplate/babel-preset
在使用 @patternplate/babel-preset 前，需要先进行安装：
npm install --save-dev @patternplate/babel-preset
安装完成后，在你的 .babelrc 文件中配置 @patternplate/babel-preset：
{
"presets": ["@patternplate/babel-preset"]
}以上配置即可将 @patternplate/babel-preset 应用到你的项目中。
可用配置
@patternplate/babel-preset 提供了以下可以配置的选项：
typeScript: boolean = false
是否使用 TypeScript。
compileTemplates: boolean = false
是否开启模版编译。
objectAssign: string = undefined
设置 Object.assign 的转译方式。
classProperties: boolean = false
是否使用类属性语法。
optimized: "es5" | "es6" = "es5"
优化方式，可选 "es5" 或 "es6"。
runtime: "classic" | "automatic" = "classic"
运行时方式，可选 "classic" 或 "automatic"。
示例代码
以下代码展示了如何使用 @patternplate/babel-preset 来处理源代码：
-- -------------------- ---- -------
------ ----- ---- --------
----- ----------- ------- --------------- -
-------- -
------ -----------------------------
-
-
------ ------- ------------ 经过 @patternplate/babel-preset 转换后的代码如下：
-- -------------------- ---- -------
---- --------
--- ------ - -----------------------------------------
-------- --------------------------- - ------ --- -- -------------- - --- - - ---------- --- -- -
--- ----------- - --------------------- ------ -
--------------------------- ------
-------- ------------- -
------ ---------------- ---------- -- -----
-
--- ------ - ----------------------
------------- - -------- -------- -
------ --------------------------------------------------- ----- -----------------
--
------ ------------
-------------------------------
--------------------- - ---
------------------------ - ---
--- -------- - ------------
------------------ - --------- 可以看到，在经过 @patternplate/babel-preset 转换之后，代码结构更加清晰，同时也增加了一些额外的元数据。通过使用 @patternplate/babel-preset，我们可以方便地进行前端开发，并且不需要手动编写繁琐的 babel 配置文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5f3f7f23dbf7be33b25671a3