babel部分基础包的作用

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文件(和源文件无差别).

babel.config.json

babel执行需要一个配置文件.在babel v7.8.0及以上的版本为babel.config.json(以下为babel.config.js);

例如只配置箭头函数的插件时,

此时运行npm run babel

可以看到箭头函数已经被转换为es6之前的版本了.

npm i @babel/preset-env -D

若存在多种es6的语法时,需要一个个配置plugins. @babel/preset-env就是一个插件的集合包. 配置了该预设后,就无需再配置种种plugins.

此时运行npm run babel

可以看到let、()=> 都被转换成es6之前的版本了.

npm i core-js -S

core-js被当作是polyfill. 用于补充ES6之前缺失的功能(promise等).

此时npm run babel:

npm i @babel/plugin-transform-runtime -D @babel/runtime -S

当你在不同的文件中分别命名了一个Class类之后, 查看打包后的效果;

会发现在不同的文件中有很多冗余的代码, @babel/plugin-transform-runtime插件就是用于抽取这些冗余的代码,需要和@babel/runtime一起使用.

此时 npm run babel

可以看到抽取了公共方法.