前端技术之babel转码器

一. babel是什么?
babel是一个转码器,把es6的代码转换成es5的代码

因为写的代码es6的代码,但是es6代码浏览器的兼容性很差,如果使用es5,则浏览器的兼容性就很好.所以我们需要把es6的代码转换成es5的代码放在浏览器运行.
二.babel的安装

1. 安装babel工具,使用命令
   npm install --global babel-cli
   
   下载完成之后,我们查看版本:
   babel --version

出错了
错误提示系统上禁止运行脚本，查看执行策略：get-ExecutionPolicy
在这里插入图片描述
此时是受限制的，系统防止执行不信任脚本。

解决方案:
以管理员身份运行PowerShell，执行：set-ExecutionPolicy RemoteSigned

在命令行中输入set-ExecutionPolicy RemoteSigned
打开vscode,执行指令 babel --version
即可

2. 创建一个es6文件夹,在里面创建一个js文件,编写es6代码:

//转码前
//定义数据
let input =[1,2,3]

//将数组中的每个元素+1

input = input.map(item => item + 1) //注意这个箭头函数,然后转换成es5代码
console.log(input)

然后在es6文件夹同级别下建一个文件名字为 .babelrc
编写一下内容:

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

3. 在项目中安装转码器
   执行指令:
   npm install --save-dev babel-preset-es2015
   等待下载完成
   然后我们发现多了一个文件夹
   
   如果下载失败了,删掉这个文件夹重新下载

4. 使用命令进行进行转码
   (1) 根据文件转码
   演示:
   首先我们在es6文件夹同级别建一个文件夹叫做dist,意思就是我们要把es6中01.js的文件转码之后放在dist文件夹中去
   babel es6/01.js -o dist/001.js
   这样就实现了,注意-o是指文件间的转化
   无提示,就说明成功了,所以我们来看看文件夹中是够存在这个转码后的001.js文件
   最终转换成功了
   

(2) 根据文件夹转码
babel es6 -d dist
这样就是将es6中的js文件转换成es5的形式并放在dist目录中
注意这个指令: -d

同样也转换成功了