babel7 重新理解

avwu 發布于2019-08-23 17:55 / 797人閱讀

摘要：主要功能點語法轉換墊片兼容處理，通過方式在目標環境中添加缺失的特性源碼轉換其他使用理念主要通過插件的形式達到轉換代碼的目的。就是解決這個問題的。

測試環境

node 10.14.1
Babel 7.4.3

Babel 是什么？

Babel 是一個工具鏈，主要用于將 ECMAScript2015+版本的代碼轉換為向后兼容的 Javascript 代碼，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。

Babel 主要功能點：

語法轉換

墊片兼容處理，通過 Polyfill 方式在目標環境中添加缺失的特性

源碼轉換

其他...

使用理念

Babel 主要通過插件 plugins 的形式達到轉換代碼的目的。

Babel 本身內置了部分環境預設 preset-env,當然項目中需要根據實際進行配置。

為了方便書寫參數，一般通過配置文件的方式 babel.config.js 或者.babelrc.js(以編程的方式創建配置)或者.bablerc

Babel 編譯兩大核心

- 語法轉換
- 墊片支持

Bable 核心模塊 @babel/core

Babel 語法轉換核心功能，內置 helpers 插件模塊，是語法轉換的主要輔助工具

@babel/preset-env

這是一個非常智能的環境預設模塊，根據 env 配置自動分析查找對應的 helper 和 plugins 進行代碼編譯轉換
基本使用：

presets: [
  [
    "@babel/preset-env",
    {
      targets: {
        chrome: "77",
        android: "2",
      },
      debug: true,
      useBuiltIns: false,
    },
  ],
],

其他參數參考文檔配置就好了，這里重點分析一下 useBuiltIns 屬性.
targets 可根據文檔自行配置，這個比較簡單。
debug 調試模式，建議開啟，開啟之后可以看到那些 target 使用了那些 plugins 和 polyfill

// 開啟debug 模式的構建信息
Using targets:
{
  "android": "2",
  "chrome": "77"
}

Using modules transform: auto

Using plugins:
  transform-template-literals { "android":"2" }
  transform-literals { "android":"2" }
  transform-function-name { "android":"2" }
  transform-arrow-functions { "android":"2" }
  ......
  ......

Using polyfills with `usage` option:

[/Users/weng/Documents/dongsheng/projects/bable/src/app.js] Added following core-js polyfills:
  es6.object.set-prototype-of { "android":"2" }
  es6.object.create { "android":"2" }
  es6.symbol { "android":"2" }
  es7.symbol.async-iterator { "android":"2" }

[/Users/weng/Documents/dongsheng/projects/bable/src/app.js] Added following core-js polyfills:
  es6.string.includes { "android":"2" }
  es7.array.includes { "android":"2" }
  es6.array.of { "android":"2" }

useBuiltIns 屬性使用：

false 不開啟 polyfill 處理，只做語法代碼轉換。

usage 開啟 polyfill 處理（依賴@babel/polyfill 模塊）

entry 開啟 polyfill 處理（依賴@babel/polyfill 模塊）
useBuiltIns 的值只要不為 false,就不啟動 polyfill 兼容，其他值都會引入 polyfill，存在全量變量污染的特性。

@babel/plugin-transform-runtime & @babel/runtime & @babel/runtime-corejs2

正常情況下，每個文件都有局部引入自身的 helpers 函數實現，打包后放置在文件的最頂部。
所以存在一個情況，多個文件使用了同樣的語法，那么同樣的 helpers 會多次引入。
transform-runtime 就是解決這個問題的。
transform-runtime 為了減少代碼量，引入的 helpers 只保留一份
看個栗子：
源代碼:

//app.js
import { add } from "./add";
function app() {
  add(1, 2);
  console.log(Object.assign({}, { ...{ name: "d" } }));
  const _a = Array.of(3, 11, 8);
}
app();

export function add(a, b) {
  console.log("加法:");
  console.log(Object.assign({}, { ...a }));
}

// 不啟動 transform-runtime 構建后：
// 包含了多個同樣的 helpers

plugins: ["@babel/plugin-transform-runtime"];
// 同樣的helpers只加載一次,但是沒有 方法api的實現

// corejs設置版本號：2或者3，都會引入非實例方法api的兼容實現
plugins: [
  [
    "@babel/plugin-transform-runtime",
    {
      corejs: 2,
    },
  ],
];

transform-runtime 也是做兼容的:

@babel/runtime 只做語法轉換的(helpers 和 regenerator),只做語法轉換, 沒有新 api 的實現

@balel/runtime-corejs2 除了 helpers 和 regenarator ，還有 core-js 墊片兼容實現,替換非實例方法

prest-env 影響語法轉換和墊片兼容
而且自身還兼容了默認的代碼轉換功能，根據具體 env 分析要使用的 plugins

語法轉換和墊片兼容是兩個獨立功能，只不過都是根據 env 來實現目標轉換.

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/104360.html

react項目配置babel7

摘要：項目配置不多說，先上配置總結的包都是以開頭的，所有的模塊插件啥的都是在目錄下中真正干活的是插件，插件的作用是預置，就是一個插件包的集合，你也可以自己寫插件包插件包不夠用，再配置唄配置了肯定要用新版本的老版本的會找而不是會 babel7 React項目配置不多說，先上babelrc配置 { presets: [ [ @babel/env, { ...

XGBCCC 2019-08-26 10:26 評論0 收藏0
使用babel7構建完美的純ts開發環境

摘要：更新前言由于最近在重寫個人的原生插件項目遇到了集成單測的需求單純地使用會出現難以估計的錯誤所以決定使用完美摒棄了傳統的方案對于主要流程記錄下項目地址同時也歡迎新手和想提升的你參與到項目中來詳情可閱讀一基本配置先通過簡單的配置讓更新 [2019-5-9] Added Initial release 0、前言由于最近在重寫個人的原生ts插件項目, 遇到了集成jest單測的需求, 單純地...

Freeman 2019-08-26 18:26 評論0 收藏0
手動創建基于webpack+babel的react應用(babel7)

摘要：搭建一個項目環境首先生成文件至此我們就可以安裝的相關依賴了。下的依賴核心部分，把轉化成外部引用輔助函數和內置函數，自動填充代碼而不會污染全局變量。入口文件我在中配的，所以在下新建文件，添加我們的第一個組件。搭建一個React項目環境首先npm init生成package.json文件.至此我們就可以安裝react的相關依賴了。 npm install react --save np...

alaege 2019-08-23 15:20 評論0 收藏0
基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發環境配置，開箱即用，

摘要：開箱即用的多頁面腳手架基于模塊化開發可復用的現代化網站感興趣的朋友，請點個及時關注項目更新請點個項目請提特性支持前后端分離開發配置完整的打包方案支持本地開發熱更新集成代碼風格校驗支持編寫源碼，編譯生成生產代碼內置開發環境，自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發可復用的現代化網站(Without Vu...

junfeng777 2019-08-23 12:29 評論0 收藏0