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://i-blog.csdnimg.cn/blog_migrate/e778a2061f3c640f00fc1b409e495fee.png)
babel.config.json
babel执行需要一个配置文件.在babel v7.8.0及以上的版本为babel.config.json(以下为babel.config.js);
例如只配置箭头函数的插件时,
![](https://i-blog.csdnimg.cn/blog_migrate/740541a90ebb536f0e209e4d16d46297.png)
此时运行npm run babel
![](https://i-blog.csdnimg.cn/blog_migrate/5652218dfb8e169f20912c5554c49000.png)
可以看到箭头函数已经被转换为es6之前的版本了.
npm i @babel/preset-env -D
若存在多种es6的语法时,需要一个个配置plugins. @babel/preset-env就是一个插件的集合包. 配置了该预设后,就无需再配置种种plugins.
![](https://i-blog.csdnimg.cn/blog_migrate/98bb64d3d8836506d73c6be078caed57.png)
此时运行npm run babel
![](https://i-blog.csdnimg.cn/blog_migrate/c99dccad736abe604639db0223c1771d.png)
可以看到let、()=> 都被转换成es6之前的版本了.
npm i core-js -S
core-js被当作是polyfill. 用于补充ES6之前缺失的功能(promise等).
![](https://i-blog.csdnimg.cn/blog_migrate/db78326d49541535fbd0f96bdda1568a.png)
此时npm run babel:
![](https://i-blog.csdnimg.cn/blog_migrate/b9263019f37e220849608ad0231d76d0.png)
npm i @babel/plugin-transform-runtime -D @babel/runtime -S
当你在不同的文件中分别命名了一个Class类之后, 查看打包后的效果;
![](https://i-blog.csdnimg.cn/blog_migrate/f3c797c6a6e43abdd9211b564e738d39.png)
![](https://i-blog.csdnimg.cn/blog_migrate/673919aacf38438dcc5d705a3c4891ad.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ff57f056280bbd193960347cbac043da.png)
![](https://i-blog.csdnimg.cn/blog_migrate/fa55fd80107c2cf0b661105de09d791f.png)
会发现在不同的文件中有很多冗余的代码, @babel/plugin-transform-runtime插件就是用于抽取这些冗余的代码,需要和@babel/runtime一起使用.
![](https://i-blog.csdnimg.cn/blog_migrate/f3e8d11a95e7b6a5ed7a1aa8967f8d0e.png)
此时 npm run babel
![](https://i-blog.csdnimg.cn/blog_migrate/97cbe0b84064ecad9da23fb42bcdfa14.png)
![](https://i-blog.csdnimg.cn/blog_migrate/ae097f5e4a11193f17951dc3c5ed00c1.png)
可以看到抽取了公共方法.