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",{ //數組中包含數組, 每個子數組都是一個預設, 每個子數組的第一個元素是預設名稱, 第二個元素是該預設的配置對象 5       "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