🔥码云GVP开源项目 12k star Uniapp+ElementUI 功能强大 支持多语言、二开方便! 广告
# 安装 babel-cli 首先需要安装 babel-cli,以使用 Babel。 ```bash $ yarn global add babel-cli ``` 检查是否安装成功 ```bash $ babel -V 6.26.0 (babel-core 6.26.0) ``` # 使用 Babel 首先使用 `npm init` 初始化一个项目。 ## 将命令添加到 `package.json` 在 `package.json` 的 `script` 中添加以下语句: ```json { "scripts": { "build": "babel src -d output" } } ``` 将源文件放置在 `src` 目录下,以后只需要使用 `npm run build` 即可将目标文件释放到 `output` 目录下。 ## 创建 .babelrc 配置文件 现在我们已经可以使用命令生成目标文件了,但是事实上 Babel 并未生效,执行 `npm run build` 仅仅是将目录进行一份拷贝,而要使 Babel 生效,需要创建 Babel 配置文件,也就是 `.babelrc`。 首先安装依赖 ```bash $ yarn add babel-preset-env ``` 在项目目录下使用以下命令: ```bash $ touch .babelrc $ vim .babelrc ``` 输入 ```json { "presets": ["env"] } ``` `:wq` 保存退出后再执行 `npm run build`,可以看到控制台输出: ``` src\main.js -> output\main.js ``` 此时 Babel 已经生效了。 ## 简单测试 我们创建文件 `src/main.js`,输入 ```js let a = 0 ``` 执行 `npm run build` 可以看到 `output/main.js` 内容如下 : ```js "use strict"; var a = 0; ``` 注,当前的目录结构如下图: :-: ![](http://xiaoyulive.oss-cn-beijing.aliyuncs.com/imgs/babel/001.png)