在前端开发中，babel 成为了必不可少的工具。babel 能够将下一代 JavaScript 的代码（ES6、ES7等）转换成当前主流浏览器或旧版浏览器可以运行的代码。在 meteor 应用中使用 babel，可以借助 meteor-babel 这个 npm 包。本文章将详细介绍如何使用 meteor-babel。
安装 meteor-babel
首先，在 meteor 应用根目录下安装 meteor-babel，使用 npm 命令：
--- ------- ------------
安装成功后，在项目下会出现 node_modules 文件夹，内部包含了 meteor-babel 相关模块和依赖。
配置 .babelrc 文件
接下来，在 meteor 的项目根目录下新建 .babelrc 文件，文件内容如下：
-
---------- --------
---------- --------------------------------
-这个配置文件使用了 env 这个 preset，也就是说默认使用最新的转换规则。这样在动态语法支持方面，就能够支持 ES6 和 ES7 的新特性。同时，plugins 中指定了 transform-object-rest-spread 这个插件，规定了 babel 对于 ES6 中的展开操作符 ... 语法的转换规则。
以上这部分是 meteor-babel 最基础的配置。如果需要更深入的配置，可以查看项目的 Github 主页。
配置 meteor-build-client
接下来，需要修改 meteor-build-client，才能让 meteor 应用成功使用 meteor-babel。打开项目中的 package.json，找到 scripts 部分，将 build 部分修改为如下内容：
---------- -
-------- ------- -----
-------- -------------------- ------ -------------------
--------------- ------ ------------ ------------- -- ----------------- -- ------ ------ -------
-解释一下这个配置：
- meteor-build-client --path ../private/bundle 将打包结果存放到 ../private/bundle 目录下。
- meteor-babel 使用 babel 命令，将服务端和客户端的 JS 代码转换并复制到 ../private/bundle 目录下。
为了便于理解，可以将上述命令拆成三部分：
- --copy-files 将文件原封不动复制到输出目录下，因此 .css 等文件不用额外处理。
- --source-maps 生成 sourcemap 文件。
- -d ../private/bundle 指定输出目录为 ../private/bundle。
最后，可以运行以下命令进行编译及转换：
--- --- ----- --- --- ------------
运行完毕后，项目根目录下会多出一个 private 文件夹，里面包含了所有编译转换后的文件。
示例代码
最后，提供一个示例代码，演示如何在项目中使用 ES6、ES7 特性：
----- --- - - -- -- -- -- -- - -- ----- --- -------- - ---- -------------- ------ ----- --- - -------- ----- ------- --------- - ---- ------------------ -------
代码的第一部分使用了对象解构，将 obj 中的 a 属性解构出，余下的都被生成到了一个名字叫做 rest 的变量中。第二部分使用了数组解构，类似的原理，将 arr 中的第一个元素解构出，余下的生成到一个数组中。
指导意义
本文介绍了在 meteor 应用中使用 babel 的详细步骤，具体来说，使用了 meteor-babel 以及 meteor-build-client 命令等工具。同时，给出了示例代码来演示如何使用 ES6 及 ES7 的一些新特性。
对于前端开发者而言，熟练使用 babel 能够让自己的开发体验更舒适，同时享受到新语法带来的好处。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/66716