简介
babel-preset-universal 是一个可以在前端和 Node.js 同时使用的 babel preset。它可以将最新的 ECMAScript 语法转换成常规的 ES5 语法，并且同时支持模块化语法转换。
安装
将 babel-preset-universal 添加到你的项目中：
npm install --save-dev babel-preset-universal
配置
在 .babelrc 文件中添加以下配置：
{
"presets": [
["universal", {
"modules": false,
"decoratorsBeforeExport": true
}]
]
}其中，"modules": false 表示不进行模块化语法转换，"decoratorsBeforeExport": true 表示支持装饰器语法。
使用
假设你的项目有一个 src 目录，你可以使用以下命令来将该目录下所有的 .js 文件转换成 ES5 语法：
babel src --out-dir lib
示例代码
在 src 目录下创建一个文件 index.js，内容如下：
-- -------------------- ---- ------- ------ - --------- - ---- ---------------- ------------ --------- ------ --------- ----------- ------------ -- ------ ----- ------------ - ------------- -- -
运行以下命令来将该文件转换成 ES5 语法：
babel src --out-dir lib
转换后的文件 lib/index.js 的内容如下：
-- -------------------- ---- -------
--- ----- - -------------------------
--- ------------ -
-------------
-------- -- -
-------- -------------- -
--------------------------------- --------------
-
-------------------------------------- --
---- -------
------ -------- ------ -- -- ---
----
------ -------------
----
-----------------
--------- ------
--------- ----------- ------------
-----------------深度解析
模块化语法转换
babel-preset-universal 默认会将模块化语法转换成 CommonJS 格式，但是如果在配置中设置 "modules": false，则不会进行转换。
CommonJS 是 Node.js 中使用的模块化规范，它的主要特点是同步加载，即调用 require() 方法时会阻塞后续代码的执行，直到得到一个可用的模块。
ES6 的模块化语法可以通过 import 和 export 关键字来定义，它具有异步加载和静态解析的优点。
当我们把 ES6 代码转换成 CommonJS 格式后，就可以在浏览器端使用，但是这种方式由于同步加载的特点，在性能上有一定的问题，尤其是在大项目中。
装饰器语法
babel-preset-universal 默认不支持装饰器语法，但是在配置中设置 "decoratorsBeforeExport": true，就可以支持了。所谓装饰器是一种特殊的语法，它可以在不修改原有代码的前提下，给类的属性或方法添加新的功能。
例如，在 Angular 应用中，@Component 装饰器就可以用来定义组件。在转换前的代码中，该组件的定义使用了装饰器语法：
@Component({
selector: 'app',
template: '<h1>Hello, World!</h1>'
})
export class AppComponent {
constructor() {}
}转换后的代码中，装饰器变成了一个函数调用，它的参数是该类的原型对象：
-- -------------------- ---- -------
--- ----- - -------------------------
--- ------------ -
-------------
-------- -- -
-------- -------------- -
--------------------------------- --------------
-
-------------------------------------- --
---- -------
------ -------- ------ -- -- ---
----
------ -------------
----
-----------------
--------- ------
--------- ----------- ------------
-----------------可以看到，装饰器语法将 ES6 的类语法扩展了一些新的特性，使得代码更加简洁、可读性更强。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005680d81e8991b448e42f0