babel 使用以及配置

1. babel是什么

Babel 是一個 JavaScript 編譯器

Babel 是一個工具鏈，主要用於將采用 ECMAScript 2015+ 語法編寫的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。下面列出的是 Babel 能為你做的事情：

• 語法轉換
• 通過 Polyfill 方式在目標環境中添加缺失的特性 （通過引入第三方 polyfill 模塊，例如 core-js）
• 源碼轉換（codemods）
  例如：

  // Babel 輸入： ES2015 箭頭函數
  [1, 2, 3].map(n => n + 1);
  
  // Babel 輸出： ES5 語法實現的同等功能
  [1, 2, 3].map(function(n) {
    return n + 1;
  });
  

支持最新語法，而無需等待瀏覽器的支持

例如：Class and Property Decorators (Stage 1)

@frozen class Foo {
  @configurable(false) @enumerable(true) method() {}
}
function frozen(constructor, parent, elements) {
  return {
	constructor,
	elements,
	finisher(constructor) {
	  Object.freeze(constructor.prototype)
	  Object.freeze(constructor)
	}
  }
}
function configurable(configurable) {
  return decorator;
  function decorator(previousDescriptor) {
	return {
	  ...previousDescriptor,
	  descriptor: {
		...previousDescriptor.descriptor,
		configurable
	  }
	}
  }
}
function enumerable(enumerable) {
  return decorator;
  function decorator(previousDescriptor) {
	return {
	  ...previousDescriptor,
	  descriptor: {
		...previousDescriptor.descriptor,
		enumerable
	  }
	}
  }
}

2. 配置

• babel.config.json (官方推薦格式)

  {
  	"presets": [],
  	"plugins": []
  }
  

• .babelrc.json

  {
  	"presets": [],
  	"plugins": []
  }
  

• babel.config.js

  module.exports = {
  	"presets": [],
  	"plugins": []
  }
  

3. 預設(presets)

• @babel/preset-env

  • @babel/preset-env is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). This both makes your life easier and JavaScript bundles smaller!（@babel/preset env是一個智能預設，允許您使用最新的JavaScript，而無需微觀管理目標環境需要哪些語法轉換（以及可選的瀏覽器多邊形填充）。這既讓您的生活更輕松，也讓JavaScript包更小！）
  • 安裝pnpm add @babel/preset-env -D
  • 基本配置參數：
    • targets: 編譯目標版本，默認為{}
    • modules: 是否啟用 ES 模塊語法到其他模塊類型的轉換，默認是auto
    • include: 需要編譯的目錄，默認是[]，例如['plugin/keys.js',/node_modules\/myPlugins/]
    • exclude: 編譯排除項目,默認是[]
    • useBuiltIns: 按需加載 默認是entry
    • corejs: 需要使用的corejs版本

• @babel/preset-typescript

  • 如果使用ts，則建議使用此預設
  • 安裝pnpm add @babel/preset-typescript
  • 基本配置參數
    • isTSX：開啟 jsx 解析,默認為false
    • jsxPragma： 替換編譯 JSX 表達式時所使用的函數，默認是React
    • jsxPragmaFrag：替換編譯 JSX 片段表達式時使用的函數，默認是React.Fragment
    • allExtensions: 默認是false

• 其它預設請查看babel官網介紹Babel

3. 插件(plugins)

1. 初始化項目

   • npm init -y

2. 安裝依賴

   • pnpm add @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @babel/runtime-corejs3 core-js -D
     或者
   • npm install @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @babel/runtime-corejs3 core-js -D
     或者
   • yarn add @babel/cli @babel/core @babel/plugin-transform-runtime @babel/preset-env @babel/preset-typescript @babel/runtime-corejs3 core-js -D

3. 在package.json同級目錄新建配置文件babel.config.js，並新增如下內容

   module.exports = {
   	presets: [
   		[
   			// babel預設
   			'@babel/preset-env',
   			{
   				// 使用corejs 3的版本
   				corejs: 3,
   				// 按需加載
   				useBuiltIns: 'usage',
   				// 不使用模塊化  交給其它打包工具處理
   				modules: false
   			}
   		],
   		[
   			// typescript,
   			'@babel/preset-typescript',
   			{
   				isTSX: true,
   				allExtensions: true
   			}
   		]
   	],
   	plugins: [
   		[
   			// 只引入用到的模塊
   			'@babel/plugin-transform-runtime',
   			{
   				corejs: 3,
   				helpers: true,
   				regenerator: true,
   				useESModules: false
   			}
   		]
   	]
   };
   

4. 在package.json同級目錄新建文件夾source存放源代碼文件。

• main.ts

  // Person類
  class Person {
  	name: string;
  	age: number;
  	constructor(name: string, age: number) {
  		this.name = name;
  		this.age = age;
  	}
  }
  // 實例化一個Person類
  let p = new Person('張三', 18);
  console.log(p.name);
  console.log(p.age);
  
  // 兩數相加
  const add = (a: number, b: number): number => {
  	return a + b;
  };
  
  // Map類型
  const map = new Map([]);
  
  // Set類型
  const set = new Set([]);
  

5. 新增script腳本命令

   "scripts": {
   	"build": "babel source/* --out-file lib/main.js"
   },
   

6. 執行npm run build
   lib/main.js