babel 安装 指令 用法 (含图)

**# 安装 babel

1. 跟着步骤走,先安装 babel-cli 打开黑框框 输入npm install -g babel-cli
   图示
   
2. 安装需要的插件 我的是需要把 ES6 的 代码 转换成 ES5
   在黑框框中 安装babel-preset-es2015插件 指令 : npm install --save babel-preset-es2015
   注意路径 你需要的地方 我的是 ES6 练习 10-12 babel 路径 路径 路径 注意 !!!
   图示
   
   3. 然后创建一个文件夹,存放一个写着ES6的js文件
   图示: 我的文件
   
3. 黑框框进入到es6文件夹中
   图示:
   
4. 输入指令　babel es6.js --presets es2015
   图示
   
   先看一眼我的es6.js内容
   
   转换后的
   
   每次都要重复写好长的指令,有的时候还记不住,下面的办法可以解决此问题
   可以在当前的目录下常见一个 .babelrc 这个文件
   图示
   
   **.babelrc 里面的内容 格式一定要对齐啊 emm 我就是没对齐 找 了半个小时 **

{
  "presets": ["es2015"]
}

然后在输入指令的时候就不会长了 直接输入 babel es6.js 就可以了
图示


除了建立.babelrc文件之外，也可在package.json中进行配置，添加以下属性即可：

  babel: {
   　　"presets": ["es2015"]
  }

Babel常用命令：

1. babel es6.js 这个演示过了 转换es6.js文件并在当前命名行程序窗口中输出
2. 将es6.js转换后输出到es5.js文件中（使用 -o 或 --out-file ）
babel es6.js(这个是你的写了es6代码的文件) --out-file es5.js(这个是你要转化成的es5的文件名字可以自取,es6的文件名字一样)
简写 babel es6.js -o es5.js
图示


3. 编译整个src文件夹并输出到你指定的文件夹中（使用 -d 或 --out-dir ）
我创建的是es5 指令 : babel 需要转换的文件 -d 转换的位置
图示



看一下es5里面的es6 已经转换成 es5的写法了
**

4. 编译整个src文件夹并输出到一个文件中 指令 babel src --out-file es5.js
　　babel 你需要转化的es6文件 --out-file es5.js(地址和传化好的名字.js ,es5的)
　　图示:
　　
　　已经把es6文件家里面的es6文件转化成es5并移动到了es5文件家里面了

5. 直接输入babel-node命令，可以在命令行中直接运行ES6代码
   　　babel-node