babel编译
babel的作用是用作JavaScript编译器,将ES6代码转化为ES5的格式,使低版本的浏览器可以识别,例如IE10以下版本
引入在线babel文件编译
- 下载babel文件
- 引入
<script src="browser.min.js" charset="utf-8"></script>
<script type="text/babel">代码</script>
type说明script内部放的代码类型
缺点:加载慢,降低代码性能
编译JavaScript文件
-
下载node(使能够使用npm命令)
-
npm init -y (项目初始化,创建node工程文件(package.json))
-
npm i @babe/core (bable核心库)
-
npm i @babel/cli (提供babel命令库)
-
npm i @bable/preset-env -D (预先设置好的一些配置,其中自带浏览器兼容表),安装上述三个脚本以后会在package.json文件中生成
-
在package.json的scripts中添加一条快捷命令
“bulid”:"bable src -d dist"
(scripts用于设置快捷命令,使build成为它后面语句的快捷使用方式,语句的意思是将src下的文件编译至dist文件夹中,-d为输出选项)npm run build即可执行该命令 -
这里还缺一个预设,就是告诉它什么需要改变什么不需要改变,所以我们在这里创建一个文件.babelrc,在这个文件中声明预设,其中的内容为
{ "presets": [ "@babel/preset-env" ] }
此时才可以正常的完成编译,编译成功后生成的文件储存在指定的dist目录下
总的文件结构如下
补充:
如果浏览器版本低于ie7需要多安装一个依赖npm i @babel/ployfill
,它会检测目标平台,为其填充一些自己所带的库函数