介绍
babel-preset-metalab 是由 Metalab 开源的一个 babel 预设，主要针对的是 React 和 ES6 开发。使用该预设可以将 ES6 代码转换成 ES5 的兼容代码，同时也可以加入 React JSX 的支持。
安装
在项目根目录下使用 npm 安装：
npm install babel-preset-metalab --save-dev
使用
在 .babelrc 文件中添加如下代码：
{
"presets": ["metalab"]
}指令
如果是使用命令行，使用如下命令：
babel src/index.js --out-file dist/index.js --presets metalab
配置
如需配置 babel-preset-metalab，可以在 .babelrc 文件中添加如下代码：
-- -------------------- ---- -------
-
---------- -
-
----------
-
-------- ----- -- -- ----- --
---------- ----- -- ------- --------
-
-
-
-示例代码
下面是一个使用 babel-preset-metalab 的示例代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
----- --- ------- --------- -
-------- -
------ -
-----
---------- -----------
------
--
-
-
------ ------- ----上面代码中，使用了 React 和 ES6 的语法。
使用 babel-preset-metalab 可以将上述代码转换为兼容的 ES5 代码：
-- -------------------- ---- -------
---- --------
------------------------------ ------------- -
------ ----
---
--------------- - ---- --
--- ------ - -----------------------------------------
--- ------------ - -------- -- -
-------- ------------------------ ------ -
--- ---- - - -- - - ------------- ---- -
--- ---------- - ---------
--------------------- - --------------------- -- ------
----------------------- - -----
-- -------- -- ----------- ------------------- - -----
----------------------------- --------------- ------------
-
-
------ -------- ------------- ----------- ------------ -
-- ------------ --------------------------------------- ------------
-- ------------- ----------------------------- -------------
------ ------------
--
----
-------- --------------------------- -
------ --- -- -------------- - --- - -
-------- ---
--
-
--- --- - --------------------- -- -
-------- ----- -
------ --------------------- -----
-
----------------- --
---- ---------
------ -------- -------- -
------ ------------------------------------------------ ----- ----------------------------------------------- ----- ------- ----------
-
----
------ ----
----
--------------- - ----可以看到，经过转换后的代码变得更加兼容，可以在更多的浏览器和设备上运行。同时，也可以很方便地使用 ES6 和 React 的语法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66419