babel转码器的使用

我所使用的编辑器: Visual Studio Code 简称 "VS Code"

文件目录示意图:

操作步骤: 

注意: 以下操作，在 nodeJS 基础上操作并完成,所以在这之前你需要确认是否安装与配置了nodejs
1.npm项目初始化操作
(1)新建文件夹 babelDemo
(2)cmd 进入当前目录下(如果是用的vscode编辑器就直接打开终端输入)
	npm init -y
    生成package.json,类似于后端pom.xml文件

2.babel使用
(1)babel是什么
	babel是转码器,把es6代码转换成es5代码
(2)为什么要是有babel转码,原因
	由于es6写法简洁,受到很多码友的喜欢，但它浏览器兼容性很差,使用es5代码写法复杂，但浏览器兼容性很好,所以才需要把es6代码转成es5再引入html页面中使用
(3)安装babel工具,使用命令
	npm install --global babel-cli

3.根目录下创建配置文件  .babelrc  <= 只能用这个命名，不可改
#presets下添加规则 转es5 => es2015
#直接复制我的即可
{
	"presets": ["es2015"],
	"plugins": []
}

4.安装转码器-2015( 注意： 安装在当前项目下,局部安装) 
	npm install --save-dev babel-preset-es2015

5.创建案例
    #创建es6文件夹
    #创建01_es6.js文件,输入简单内容案例
        //转码前
        //定义数据
        let input = [1,2,3]
        //将数组的每个元素 +1
        input = input.map(item => item + 1)

6.使用-终端执行命令
#单个文件转码
	(1)转码结果写入的文件夹
		mkdir dist1 
		#或 
		手动创建
	(2) --out-file 或 -o 参数指定输出文件
		babel es6/01_es6.js --out-file dist1/01_es5.js
		#或
		babel es6/01_es6.js -o dist1/01_es5.js
	
#整个目录下所以js文件转码
	(1)转码结果写入的文件夹
		mkdir dist2
		#或
		手动创建
	(2)--out-dir 或 -d 参数指定输出目录
		babel es6 --out-dir dist2
		#或
		babel es6 -d dist2
	
7.查看转码结果
    #我是直接使用的整个文件目录转码命令: babel es6 -d dist2
    #查看是否转码成功(所以我这里到dist2目录下查找对应名称的js文件): dist2 => 01_es6.js ，并点击查看转码结果,我的转码结果如下:
    
    "use strict";

    var input = [1, 2, 3];
    input = input.map(function (item) {
      return item + 1;
    });

以上仅个人笔记分享，仅供参考~