babel 和 babel-loader

babel 概述

Babel 是一個 JavaScript 編譯器，它是一個工具鍊，主要的用途就是在舊的浏覽器或環境中将ECMAScript 2015+ 代碼轉換為向後相容的 js 代碼。

案例分析

//demo  a.js
[1,2,3].map(item => item+20)
           

官方給的是@babel/cli，其内部包含調用了@babel/node

@babel/core 提供的是基礎 api

我們采用工具 @babel/cli 将包含es6文法的 a.js 檔案轉成 es5 代碼的b.js。

• 首先 npm init 建立 package.json 檔案
• 然後下載下傳@babel/cli @babel/core npm install -D @babel/cli @babel/core
• npx babel a.js -o b.js

執行後的 b.js 中的代碼除了有一些格式化之外和原本代碼并沒有什麼變化，主要是沒有任何的預設（presets）和插件（plugins）轉換。

所有我們在項目根目錄下建一個 .babelrc 檔案：

{
	"presets":["@flowio/babel-preset-flowio"],
	"plugins":[]
}
//ps 單獨下載下傳 npm i -D @flowio/babel-preset-flowio

           

目前 babel 版本現在更新到了7 ，舊的 babel-preset-es2015 已經淘汰。

執行 npx babel a.js -o b.js，轉換後的代碼如下：

//b.js
"use strict";
[1, 2, 3].map(function (item) {
  return item + 10;
});
           

babel-loader概述

在 webpack 中babel-loader的配置項：

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['@babel/preset-env']
        }
      }
    }
  ]
}
           

babel-loader 的作用是相對于一個交通指揮， 隻是在webpack打包時遇到js檔案，交給babel處理，至于怎麼處理，跟webpack就沒有關系了，跟 babel 的配置有關。