成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

babel7 重新理解

avwu / 798人閱讀

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

測試環(huán)境

node 10.14.1
Babel 7.4.3

Babel 是什么?

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

Babel 主要功能點:

語法轉(zhuǎn)換

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

源碼轉(zhuǎn)換

其他...

使用理念

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

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

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

Babel 編譯兩大核心
- 語法轉(zhuǎn)換
- 墊片支持
Bable 核心模塊 @babel/core

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

@babel/preset-env

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

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

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

// 開啟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 不開啟 polyfill 處理,只做語法代碼轉(zhuǎn)換。

usage 開啟 polyfill 處理(依賴@babel/polyfill 模塊)

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

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

正常情況下,每個文件都有局部引入自身的 helpers 函數(shù)實現(xiàn),打包后放置在文件的最頂部。
所以存在一個情況,多個文件使用了同樣的語法,那么同樣的 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 構(gòu)建后:
// 包含了多個同樣的 helpers

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

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

transform-runtime 也是做兼容的:

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

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

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

語法轉(zhuǎn)換 和 墊片兼容 是兩個 獨立功能,只不過都是 根據(jù) env 來 實現(xiàn)目標轉(zhuǎn)換.

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

轉(zhuǎn)載請注明本文地址:http://systransis.cn/yun/104360.html

相關(guān)文章

  • react項目配置babel7

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

    XGBCCC 評論0 收藏0
  • 使用babel7構(gòu)建完美的純ts開發(fā)環(huán)境

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

    Freeman 評論0 收藏0
  • 手動創(chuàng)建基于webpack+babel的react應(yīng)用(babel7)

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

    alaege 評論0 收藏0
  • 基于webpack4.x, babel7.x 搭建的多頁面腳手架, 簡化前端開發(fā)環(huán)境配置,開箱即用,

    摘要:開箱即用的多頁面腳手架基于模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站感興趣的朋友,請點個及時關(guān)注項目更新請點個項目請?zhí)崽匦灾С智昂蠖朔蛛x開發(fā)配置完整的打包方案支持本地開發(fā)熱更新集成代碼風格校驗支持編寫源碼,編譯生成生產(chǎn)代碼內(nèi)置開發(fā)環(huán)境,自動加樣式前綴自 Webpack-seed 開箱即用的多頁面腳手架, 基于webpack4.2x babel7.1x模塊化開發(fā)可復(fù)用的現(xiàn)代化網(wǎng)站(Without Vu...

    junfeng777 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<