1. 初始化环境
打开cmd(windows)或者终端(Mac,Linux),进入项目文件夹,执行:
// 命令行 输入:
npm init
会得到如下提示语,并开始生成 package.json 文件:
This utility will walk you through creating a package.json file. It only covers the most common items, and tries to guess sensible defaults. Use
npm install <pkg> --save
afterwards to install a package and save it as a dependency in the package.json file.
翻译:该命令会指引你逐步创建一个 package.json 文件。这个创建过程只包含了那些最常用的条目,并会给出尽可能有意义的默认值。随后你可以使用npm install <pkg> --save
命令安装一个 package (包) 并将其保存为 package.json 文件中的 dependencies (生产依赖,对应 devDependencies开发依赖) 条目的一项。
接下来,命令行会指引你一步一步设置 name, version, decription 等等,你可以一路回车下去,因为日后你还可以轻松的通过编辑器在 package.json 文件中对这些条目进行更改。如果你打算这么干,我可以推荐给你一种更便捷的初始化命令:
// 命令行 输入:
npm init -y
这样你就等于告诉了cmd或者终端:我同意你所有的默认值,赶快帮我生成 package.json 文件吧。这跟你执行npm init
后一路回车的效果是一样的。
2. 安装 babel-cli 模块,并对 babel 进行环境设置
在cmd或者终端执行(这里我用cnpm代替了npm,如果没有cnpm需要先全局安装和配置cnpm):
// 命令行 输入:
cnpm install babel-cli --save-dev
这样会在项目文件夹下生成一个node_modules文件夹,并在package.json文件里添加一个devDependencies属性,该属性的值是一个对象,对象里会包含一个babel-cli
的属性和对应的类似^6.24.1
的属性值。这说明我们已经安装了babel模块。
下面需要对babel进行环境设置,该设置文件名为.babelrc
。在项目文件夹下新建一个.babelrc
文件,打开该文件,进行如下设置:
// .babelrc 文件内容
{
"presets" : ["es2015"]
}
在命令行内安装 .babelrc
文件内设置的预置项(例如:这里是es2015
):
// 命令行 输入:
cnpm install --save-dev babel-preset-es2015
3. 将 es2015 语法编译为 es5 语法 (单文件)
在项目文件夹下新建一个名为es6.js
文件,编写内容为:
// es6.js 文件内容
let num = 10;
在命令行内执行:
// 命令行 输入:
babel es6.js
这时,命令行工具会显示:
// 命令行 生成:
"use strict";
var num = 10;
但是我们需要babel工具帮我们把编译过的文件保存下来,这是我们需要在命令行输入:
// 命令行 输入:
babel es6.js --out-file es5.js
或者使用简写方式:
// 命令行 输入:
babel es6.js -o es5.js
这时,项目文件夹下就会生成一个名为es5.js
的文件,文件内容为:
// es5.js 内容:
"use strict";
var num = 10;
4. 将 es2015 语法编译为 es5 语法 (批量)
在项目文件夹下新建一个名为src
的文件夹,并在该文件夹下创建index.js
文件,同样用es2015
的语法编写内容为:
// src 文件夹下的 index.js 文件内容
let num = 10;
在命令行内执行:
// 命令行 输入:
babel src --out-dir build
或者使用简写方式:
// 命令行 输入:
babel src -d build
这时,项目文件夹下就会生成一个名为build
的文件夹,该文件夹下有一个名为index.js
的文件,文件内容为:
// build 文件夹下的 index.js 文件内容
"use strict";
var num = 10;
5. 设置 babel 自动编译
在开发过程中,我们需要实时编译一个文件,只需在命令行输入:
// 命令行 输入:
babel --watch src --out-dir build
或者使用简写方式:
// 命令行 输入:
babel --watch src --d build
这时,每当我们保存src文件夹下的index.js
文件时,babel工具就会执行一次编译,更新build文件夹下的index.js
文件并在命令行显示一次:
// 命令行 显示:
src\index.js -> build\index.js
在命令行工具中按下ctrl+c
即可终止自动编译功能。
6. 在 package.json 文件中命名具体的命令
我们可以看到,一个babel模块就有很多种命令,虽然有些命令可以简写,但每次手动输入还是比较麻烦。并且,在团队开发中,我们通常不需要把build
文件夹和node_modules
文件夹上传,我们的同伴就应该能获取到跟我们本地电脑上一样的项目文件。怎么实现呢?答案就是在package.json
文件中命名具体的命令,让我们的同伴通过简单的命令达到目的。具体如下:
// package.json 文件中 scripts 属性
"scripts": {
"build": "babel src -d lib"
},
这时,只要有src
文件夹和package.json
文件,我们只需在命令行内执行:
// 命令行 输入:
npm run build
就能执行将src
文件夹中的文件用babel
编译并保存至lib
文件夹(自动创建)中。