babel的功能
是一个工具链.
1.用于将ES6及之后的语法转换为向后兼容的JavaScript语法,以便能运行在旧版本浏览器当中.
2.通过polyfill垫片的方式在环境中添加缺失的功能(Promise等).
npm init -y
新建一个babel-demo文件夹, npm init -y初始化.
npm i @babel/core -D
babel7版本之后的命名统一为@babel···开头. @babel/core为babel核心的内容. core的版本即为babel的版本.
npm i @babel/cli -D
babel的命令行工具,可以在package.json里配置babel命令行.
`"babel": "babel src --out-dir dist"`
在index.js中输入:
let a = 1;
let test = (a, b) => a + b;
let p = new Promise(resolve => {
resolve(1)
})
npm run babel,此时在项目的根目录下就会生成dist文件夹,其中包含一个index.js文件(和源文件无差别).
![](https://img-blog.csdnimg.cn/img_convert/ca07872c736ff9088a335b599ebdc421.png)
babel.config.json
babel执行需要一个配置文件.在babel v7.8.0及以上的版本为babel.config.json(以下为babel.config.js);
例如只配置箭头函数的插件时,
![](https://img-blog.csdnimg.cn/img_convert/0ec2d82b6f238cf4f925d1a215b0c858.png)
此时运行npm run babel
![](https://img-blog.csdnimg.cn/img_convert/a84331e29aef4e19178b7f6301856e75.png)
可以看到箭头函数已经被转换为es6之前的版本了.
npm i @babel/preset-env -D
若存在多种es6的语法时,需要一个个配置plugins. @babel/preset-env就是一个插件的集合包. 配置了该预设后,就无需再配置种种plugins.
![](https://img-blog.csdnimg.cn/img_convert/462fe7d9dcf67d25959f16b5071d6702.png)
此时运行npm run babel
![](https://img-blog.csdnimg.cn/img_convert/99fff60f962a8f85d75310bd50949d75.png)
可以看到let、()=> 都被转换成es6之前的版本了.
npm i core-js -S
core-js被当作是polyfill. 用于补充ES6之前缺失的功能(promise等).
![](https://img-blog.csdnimg.cn/img_convert/73290852ca045a6e9ebe60e2ffa3da91.png)
此时npm run babel:
![](https://img-blog.csdnimg.cn/img_convert/888ef98a108c49f3f7547c13cf52c87f.png)
npm i @babel/plugin-transform-runtime -D @babel/runtime -S
当你在不同的文件中分别命名了一个Class类之后, 查看打包后的效果;
![](https://img-blog.csdnimg.cn/img_convert/341ff7993cd4a7bc29589d8dacf9e9c4.png)
![](https://img-blog.csdnimg.cn/img_convert/44679b91d8f800594c3edcd2aa67faa9.png)
![](https://img-blog.csdnimg.cn/img_convert/e108991878ae5114ec987236a239f487.png)
![](https://img-blog.csdnimg.cn/img_convert/03610b0ae6f04e2cc9aa5811a4466503.png)
会发现在不同的文件中有很多冗余的代码, @babel/plugin-transform-runtime插件就是用于抽取这些冗余的代码,需要和@babel/runtime一起使用.
![](https://img-blog.csdnimg.cn/img_convert/5e89ef7734a739dc93d3389c4dab22ba.png)
此时 npm run babel
![](https://img-blog.csdnimg.cn/img_convert/0292e3c81eae0ae29dd8e5fec9f92279.png)
![](https://img-blog.csdnimg.cn/img_convert/c4dd5a3ac626d986aca6a10e833f6b55.png)
可以看到抽取了公共方法.