babel安装

1、babel配置步骤
一、准备
系统环境：win7
配置环境：node，npm（如何安装node以及npm请另寻文档）
项目文件夹：新建一个文件夹做为一个项目文件夹，打开cmd（快捷键：window+R），进入新建的这个文件夹的目录下，执行npm init（相关信息可一路按Enter键，设置为默认信息），最终生成了package.js文件。

二、配置 .babelrc 文件
2.1建立.babelrc文件
由于在windows系统中，不容许直接右键创建没有文件名的文件，因此建立 .babelrc 文件有两个方式，第一个是直接经过编辑器建立，第二个是直接经过cmd命令行建立。
如下是cmd命令行建立方式：
在当前项目文件夹下，使用命令行：

type nul>.babelrc

 

2.2编写.babelrc文件内容
该文件用来配置转码规则和插件，基本格式以下：

{
"presets": [], //设置转码规则
"plugins": [] //设置插件
}

官方提供如下的规则集，能够根据须要安装：

# ES2015转码规则
npm install --save-dev babel-preset-es2015

# react转码规则
npm install --save-dev babel-preset-react

# ES7不一样阶段语法提案的转码规则（共有4个阶段），选装一个
npm install --save-dev babel-preset-stage-0
npm install --save-dev babel-preset-stage-1
npm install --save-dev babel-preset-stage-2
npm install --save-dev babel-preset-stage-3

而后，将这些规则加入 .babelrc

{
"presets": [
"es2015"
],
"plugins": []
}

注意：Babel工具和模块的使用以前，都必须先写好 .babelrc。

 

三、使用命令行转码 babel-cli
Babel提供babel-cli工具，用于命令行转码。它的安装命令以下：

# 全局安装
npm install --global babel-cli

# 在项目文件中安装
npm install --save-dev babel-cli

在全局安装babel-cli，这意味着，若是项目要运行，全局环境必须有Babel，也就是说项目产生了对环境的依赖， 而且这样作也没法支持不一样项目使用不一样版本的Babel。因此官网强烈建议咱们使用后一种方式，在项目中安装。
在项目中安装以后，须要改写package.js：

{
//...略去了其余的内容
"devDependencies": {
"babel-cli": "^6.0.0" //这里的版本号为安装的时候的版本号，通常安装的时候就会自动写入
},
"scripts": {
"build": "babel src -d lib"
//编译整个 src 目录并将其输出到 lib 目录。这里的src指的是须要转换的目录，lib指的是输出的内容的存放目录
},
}

注意：若是建立的目录文件夹名称不为src和lib，请记得必定要替换，否则后续转换时会报错。

转码的时候，就执行下面的命令：

npm run build

babel-cli基本用法以下：

# 转码结果输出到标准输出
babel example.js

# 转码结果写入一个文件
# --out-file 或 -o 参数指定输出文件
babel example.js --out-file compiled.js
# 或者
babel example.js -o compiled.js

# 整个目录转码
# --out-dir 或 -d 参数指定输出目录
babel src --out-dir lib
# 或者
babel src -d lib

# -s 参数生成source map文件babel src -d lib -s