babel编译

babel编译

babel的作用是用作JavaScript编译器，将ES6代码转化为ES5的格式，使低版本的浏览器可以识别，例如IE10以下版本

引入在线babel文件编译

1. 下载babel文件
2. 引入<script src="browser.min.js" charset="utf-8"></script>
3. <script type="text/babel">代码</script>type说明script内部放的代码类型

缺点：加载慢，降低代码性能

编译JavaScript文件

1. 下载node（使能够使用npm命令）

2. npm init -y (项目初始化，创建node工程文件（package.json）)

3. npm i @babe/core （bable核心库）

4. npm i @babel/cli (提供babel命令库)

5. npm i @bable/preset-env -D (预先设置好的一些配置，其中自带浏览器兼容表)，安装上述三个脚本以后会在package.json文件中生成

6. 在package.json的scripts中添加一条快捷命令“bulid”:"bable src -d dist"(scripts用于设置快捷命令，使build成为它后面语句的快捷使用方式，语句的意思是将src下的文件编译至dist文件夹中，-d为输出选项)npm run build即可执行该命令

7. 这里还缺一个预设，就是告诉它什么需要改变什么不需要改变，所以我们在这里创建一个文件.babelrc，在这个文件中声明预设,其中的内容为{ "presets": [ "@babel/preset-env" ] }
   此时才可以正常的完成编译，编译成功后生成的文件储存在指定的dist目录下

总的文件结构如下

补充：
如果浏览器版本低于ie7需要多安装一个依赖npm i @babel/ployfill,它会检测目标平台，为其填充一些自己所带的库函数