babel7 重新理解

avwu 發(fā)布于2019-08-23 17:55 / 886人閱讀

摘要：主要功能點(diǎn)語(yǔ)法轉(zhuǎn)換墊片兼容處理，通過(guò)方式在目標(biāo)環(huán)境中添加缺失的特性源碼轉(zhuǎn)換其他使用理念主要通過(guò)插件的形式達(dá)到轉(zhuǎn)換代碼的目的。就是解決這個(gè)問(wèn)題的。

測(cè)試環(huán)境

node 10.14.1
Babel 7.4.3

Babel 是什么？

Babel 是一個(gè)工具鏈，主要用于將 ECMAScript2015+版本的代碼轉(zhuǎn)換為向后兼容的 Javascript 代碼，以便能夠運(yùn)行在當(dāng)前和舊版本的瀏覽器或其他環(huán)境中。

Babel 主要功能點(diǎn)：

語(yǔ)法轉(zhuǎn)換

墊片兼容處理，通過(guò) Polyfill 方式在目標(biāo)環(huán)境中添加缺失的特性

源碼轉(zhuǎn)換

其他...

使用理念

Babel 主要通過(guò) 插件 plugins 的形式達(dá)到轉(zhuǎn)換代碼的目的。

Babel 本身內(nèi)置了部分環(huán)境預(yù)設(shè) preset-env,當(dāng)然項(xiàng)目中需要根據(jù)實(shí)際進(jìn)行配置。

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

Babel 編譯兩大核心

- 語(yǔ)法轉(zhuǎn)換
- 墊片支持

Bable 核心模塊 @babel/core

Babel 語(yǔ)法轉(zhuǎn)換核心功能，內(nèi)置 helpers 插件模塊，是語(yǔ)法轉(zhuǎn)換的主要輔助工具

@babel/preset-env

這是一個(gè)非常智能的環(huán)境預(yù)設(shè)模塊，根據(jù) env 配置自動(dòng) 分析查找對(duì)應(yīng)的 helper 和 plugins 進(jìn)行代碼編譯轉(zhuǎn)換
基本使用：

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

其他參數(shù)參考文檔配置就好了，這里重點(diǎn)分析一下 useBuiltIns 屬性.
targets 可根據(jù)文檔自行配置，這個(gè)比較簡(jiǎn)單。
debug 調(diào)試模式，建議開(kāi)啟，開(kāi)啟之后可以看到那些 target 使用了那些 plugins 和 polyfill

// 開(kāi)啟debug 模式的構(gòu)建信息
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 不開(kāi)啟 polyfill 處理，只做語(yǔ)法代碼轉(zhuǎn)換。

usage 開(kāi)啟 polyfill 處理（依賴@babel/polyfill 模塊）

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

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

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

//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 }));
}

// 不啟動(dòng) transform-runtime 構(gòu)建后：
// 包含了多個(gè)同樣的 helpers

plugins: ["@babel/plugin-transform-runtime"];
// 同樣的helpers只加載一次,但是沒(méi)有 方法api的實(shí)現(xiàn)

// corejs設(shè)置版本號(hào)：2或者3，都會(huì)引入非實(shí)例方法api的兼容實(shí)現(xiàn)
plugins: [
  [
    "@babel/plugin-transform-runtime",
    {
      corejs: 2,
    },
  ],
];

transform-runtime 也是做兼容的:

@babel/runtime 只做語(yǔ)法轉(zhuǎn)換的(helpers 和 regenerator),只做語(yǔ)法轉(zhuǎn)換, 沒(méi)有新 api 的實(shí)現(xiàn)

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

prest-env 影響語(yǔ)法轉(zhuǎn)換和墊片兼容
而且自身還兼容了默認(rèn)的代碼轉(zhuǎn)換功能，根據(jù)具體 env 分析要使用的 plugins

語(yǔ)法轉(zhuǎn)換和墊片兼容是兩個(gè) 獨(dú)立功能，只不過(guò)都是根據(jù) env 來(lái) 實(shí)現(xiàn)目標(biāo)轉(zhuǎn)換.

GPU云服務(wù)器云服務(wù)器 babel7 全面理解理解理解對(duì)象

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104360.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

avwu

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

tensorflow

閱讀 3494·2023-04-25 18:14
#yyds干貨盤點(diǎn)#Go WebSocket開(kāi)發(fā)與測(cè)試實(shí)踐【gorilla/websocket】

閱讀 1602·2021-11-24 09:38
godaddy主機(jī)怎么退款-godaddy怎么退款？

閱讀 3317·2021-09-22 14:59
半月灣：1核/1G/10G SSD/1T/100Mbps/洛杉磯GIA/年付$49.99，搬瓦工同機(jī)

閱讀 3123·2021-08-09 13:43
前端每日實(shí)戰(zhàn)：149# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)寶路薄荷糖的動(dòng)畫

閱讀 2642·2019-08-30 15:54
CSS 常用方法小計(jì)

閱讀 619·2019-08-30 13:06
CSS魔法堂：深入理解line-height和vertical-align

閱讀 1625·2019-08-30 12:52
詳細(xì)了解 clientWidth、clientHeight、clientLeft、clientTop

閱讀 2775·2019-08-30 11:13

亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

babel7 重新理解

相關(guān)文章

react項(xiàng)目配置babel7

**使用babel7構(gòu)建完美的純ts開(kāi)發(fā)環(huán)境**

**手動(dòng)創(chuàng)建基于webpack+babel的react應(yīng)用(babel7)**

**基于webpack4.x, babel7.x 搭建的多頁(yè)面腳手架, 簡(jiǎn)化前端開(kāi)發(fā)環(huán)境配置，開(kāi)箱即用，**

發(fā)表評(píng)論

0條評(píng)論

avwu

男|高級(jí)講師

TA的文章

tensorflow

#yyds干貨盤點(diǎn)#Go WebSocket開(kāi)發(fā)與測(cè)試實(shí)踐【gorilla/websocket】

godaddy主機(jī)怎么退款-godaddy怎么退款？

半月灣：1核/1G/10G SSD/1T/100Mbps/洛杉磯GIA/年付$49.99，搬瓦工同機(jī)

前端每日實(shí)戰(zhàn)：149# 視頻演示如何用純 CSS 創(chuàng)作一個(gè)寶路薄荷糖的動(dòng)畫

CSS 常用方法小計(jì)

CSS魔法堂：深入理解line-height和vertical-align

詳細(xì)了解 clientWidth、clientHeight、clientLeft、clientTop

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

babel7 重新理解

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！