babel来进行js转换

一.babel 含义:

          通天塔, 取统一人类的行动中的统一的意思. 

         1.将各种我们日常开发中用的顺手的语言(比如es6, typescript ...) 编译成 不同版本浏览器能识别的 语言;

         2. babel本身只是分析, 真正的语言转换交给插件来完成

二 安装 :

  1.安装命令: npm install @babel/core @babel/cli -D 

    其中@表示命名空间. 第一个是babel的核心库, 第二个是babel的cli工具,

        核心库是具体的运行代码提供api, cli库是命令行工具, 我们人工来调用核心库的工具

   2. 两种编译命令: npx bebal 源文件 -o 输出文件 [-w]

                    npx bebal 源目录 -d 输出目录 [-w]

              -o 表示output输出   

                   如:  npx babel js/index.js -o dist/index.js     npx babel js -d dist

              -w 表示watch;监听

三 配置

   babel如果不配置, 不会做任何事情, 真正的编译要依托babel插件和babel预设完成.

   1 配置文件 .babelrc.json 或者 .babel.config.json 或者配置到package.json文件中. 三者选一种即可(文件后缀名.json可以省略)

    

//.babelrc.json文件
{
  "presets": [...],//预设配置
  "plugins": [...] //插件配置
}

//package.json文件

   {

  "name": "my-package",
  "version": "1.0.0",
  "babel": {
    "presets": [ ... ],
    "plugins": [ ... ],
  }
}

四. babel预设 (pre 先的意思  evn环境的意思;) 

   常用的babel预设是 @babel/preset-env;  一个普通的vue工程，Babel官方的preset只需要配一个"@babel/preset-env"就可以了。

   1. 先下载 :npm i -D @babel/preset-env 

   2. 再配置到配置文件中:

{
  "presets": ["@babel/preset-env"],
  "plugins": []
}

 配置完后, 编译时会自动加载预设:npx babel js -d dist

   3. 设置匹配浏览器版本

   通过.browserslistrc文件或者package.json里的browserslist选项, 设置浏览器对相应版本

//.browserslistrc文件
last 3 version
> 1%
not ie <= 8

 4 设置针对新的api, 如promise, 的兼容, 

      因为babel只针对js的新语法有编译功能, 对新的api无效, 需要单独设置

//.browserlistsrc文件
{
  "presets": [[
    "@babel/preset-env",{ //数组中包含数组, 每个子数组都是一个预设, 每个子数组的第一个元素是预设名称, 第二个元素是该预设的配置对象 
      "useBuiltIns":"usage",
        "corejs":"corejs@2"

    }
  ]],
  "plugins": []
}

//index.js文件
const a = 1;
new Promise((res,rej)=>{
  res();
})

//编译后的文件
"use strict";

require("core-js/modules/es6.object.to-string.js");

require("core-js/modules/es6.promise.js");

var a = 1;
new Promise(function (res, rej) {
  res();
});

因为需要用到core-js, 必须下载这个依赖默认是第2版.

需要运行命令: npm i core-js@2即可;

用新语法=>需要通用的工具babel=> 需要预设preset=> 需要设置: 在.babelrc中设置; 

想要新的api, 需要设置presetenv的useBuiltIns, 并且声明corejs的版本, 并且下载corejs

五. babel插件:

  运行顺序: 源码 -> plugins 插件 -> preset 预设 -> 编译后的代码

 使用方法:(以去除console.log插件为例)

  1, 先npm i -D babel-plugin-transform-remove-console

 2 注册查插件

//.babelrc.json文件
{
  "presets": [[
    "@babel/preset-env",{
      "useBuiltIns":"usage",
      "corejs":"core-js@2"
    }
  ]],
  "plugins": ["babel-plugin-transform-remove-console"]
}

3. 会自动应用

常见到的插件@babel/plugin-transform-runtime

作用, 将babel在各文件中生成的各种函数提取出来, 作为公用的代码,在各文件中引用.

如右侧的async 关键字会编译成为左边的两个函数, 这样通过安装该插件, 这两个函数会被生成到一个单独的文件中

 

 

 五 .webpack中使用babel;

     1.下载依赖 : npm install --save-dev babel-loader @babel/core

    2. 在webpack配置文件webpack.config.js里配置出检测js文件的配置

module.exports = {
  mode: "development",
  devtool: "source-map",
  
  module: {
    rules: [
      {
        test: /.js$/,
        exclude: /node_modules/,
        use:  "babel-loader"
      }
    ]
  }
}

    3.配置.babelrc或者babel.config.json或者在webpack的配置文件package.json, 通常只需要配置一个preset-env既可以编译新语法,

但如果想编译新api, 需要下载core-js, 并配置:

{
  "presets": [[
    "@babel/preset-env",{    
      "useBuiltIns":"usage",  //为了能打包新api, 如class, promise async等
      "corejs":"core-js@2"   //需要下载core-js@2, 也可以用3版.
    }
  ]]
  ,"plugins": ["@babel/plugin-transform-runtime"]
}

 详情见: https://www.babeljs.cn/setup#installation