成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專(zhuān)欄INFORMATION COLUMN

Babel 7 轉(zhuǎn)碼的正確姿勢(shì)

JohnLui / 868人閱讀

摘要：轉(zhuǎn)碼的配置是每位前端童鞋在日常工作中都會(huì)遇到的。簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是在轉(zhuǎn)碼過(guò)程中，對(duì)于一些新語(yǔ)法，都會(huì)抽象一個(gè)個(gè)小的函數(shù)，在轉(zhuǎn)碼過(guò)程中完成替換。以上即是我總結(jié)的轉(zhuǎn)碼姿勢(shì)，如果對(duì)本篇有疑問(wèn)或建議，歡迎在這里提出。

Babel 轉(zhuǎn)碼的配置是每位前端童鞋在日常工作中都會(huì)遇到的。剛開(kāi)始我也是在網(wǎng)上搜索各種配置方法，升級(jí)到 Babel 7 的時(shí)候又折騰了一把，所以決定把自己的心得和理解記錄下來(lái)，希望能幫助到有需要的童鞋。

這里呢不打算去講每一個(gè)詳細(xì)的配置項(xiàng)，畢竟官方文檔是最權(quán)威的。這篇主要是說(shuō)下 Babel 7 轉(zhuǎn)碼中會(huì)涉及到的幾個(gè)主要庫(kù)以及他們之間的關(guān)系，還有不同的項(xiàng)目類(lèi)型怎么選擇配置方案和一些技巧。

涉及到的主要庫(kù)

首先呢先介紹一下 Babel 7 轉(zhuǎn)碼涉及到的“四大天王”：

@babel/preset-env

@babel/polyfill

@babel/runtime

@babel/plugin-transform-runtime

這四個(gè)庫(kù)有什么作用和聯(lián)系？相信很多童鞋跟我當(dāng)初一樣總是有點(diǎn)分不清，下面就來(lái)逐一簡(jiǎn)單解釋下，當(dāng)然最詳細(xì)的內(nèi)容還是要看官方文檔。

@babel/preset-env

這個(gè)是 Babel 轉(zhuǎn)碼的環(huán)境預(yù)設(shè)，會(huì)根據(jù)你設(shè)定的目標(biāo)環(huán)境（例如要支持的瀏覽器版本范圍）來(lái)調(diào)整語(yǔ)法轉(zhuǎn)換規(guī)則和選擇環(huán)境墊片補(bǔ)丁，相比前任的優(yōu)點(diǎn)是更智能，打包出來(lái)的體積也會(huì)更小。

@babel/polyfill

這個(gè)可以模擬基本完全的 ES6+ 環(huán)境（不能低于 Stage 4 的提案）。例如，新的 Class：Promise、Map，靜態(tài)方法：Array.from，新的原型方法：Array.prototype.includes 等。但要注意的是，使用 polyfill 的話是會(huì)污染全局的，因?yàn)橐峁┰头椒ǖ闹С帧?/p> 

注意，這個(gè)庫(kù)在 Babel 7.4.0 后已被棄用，用下面的代替：


import "core-js/stable";
import "regenerator-runtime/runtime";


但思想是一樣的。
@babel/runtime

這個(gè)庫(kù)提供了一些轉(zhuǎn)碼過(guò)程中的一些幫助函數(shù)。簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是在轉(zhuǎn)碼過(guò)程中，對(duì)于一些新語(yǔ)法，都會(huì)抽象一個(gè)個(gè)小的函數(shù)，在轉(zhuǎn)碼過(guò)程中完成替換。比如說(shuō)我們寫(xiě)了一個(gè) class Circle {...}，轉(zhuǎn)碼后就會(huì)變成這樣：

function _classCallCheck(instance, Constructor) {
  //...
}

var Circle = function Circle() {
  _classCallCheck(this, Circle);
};

所以在每次轉(zhuǎn)換 class 新語(yǔ)法的時(shí)候，都會(huì)用 _classCallCheck 這個(gè)函數(shù)去替換。

@babel/plugin-transform-runtime

這個(gè)是和上面的 @babel/runtime 配合使用的。延續(xù)上面的那個(gè)例子，如果你的項(xiàng)目有多個(gè) js 文件里面有 class 需要轉(zhuǎn)碼，那每個(gè)文件都會(huì)有一個(gè)重復(fù)的 _classCallCheck 函數(shù)定義，plugin-transform-runtime 的一個(gè)主要作用就是從統(tǒng)一的地方去引用這些幫助函數(shù)，消除代碼冗余從而減少打包的體積：

var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");

var Circle = function Circle() {
  _classCallCheck(this, Circle);
};

除此之外，他還提供了一個(gè)沙盒環(huán)境。如果我們使用 @babel/polyfill 來(lái)支持使用一些 ES6+ 的新特性的話（如：Promise、Map 等），會(huì)造成全局污染。通過(guò)配置 plugin-transform-runtime 的 corejs 選項(xiàng)可以開(kāi)啟沙盒環(huán)境支持，在當(dāng)前需要轉(zhuǎn)碼的文件中多帶帶引入所需的新功能。

安裝說(shuō)明

接下來(lái)我們看看上面的四大天王怎么安裝：

npm install --save @babel/runtime, @babel/polyfill
npm install --save-dev @babel/preset-env, @babel/plugin-transform-runtime

這里也許有童鞋會(huì)有跟我當(dāng)時(shí)同樣的疑問(wèn)：@babel/runtime 不是打包轉(zhuǎn)碼過(guò)程中用的嗎，怎么會(huì)安裝為運(yùn)行環(huán)境依賴(lài)呢？——還記得 plugin-transform-runtime 會(huì)從統(tǒng)一的地方去引用這些幫助函數(shù)嗎，這意味著這些代碼會(huì)在運(yùn)行時(shí)執(zhí)行，所以當(dāng)然是運(yùn)行時(shí)依賴(lài)?yán)病?/p>

然后這里給大家提供一個(gè)小技巧。有時(shí)我們會(huì)安裝配置 @babel/preset-stage-x 去使用一些新的提案，當(dāng)在 Babel 7 中這些 preset-stage-x 已經(jīng)被棄用了，我們必須一個(gè)個(gè)的安裝所需的插件，還得去改 .babelrc 的配置，挺煩的，怎么簡(jiǎn)化呢？我們可以用下面的方法去簡(jiǎn)化安裝，比如 stage-2：

首先：npm install --save-dev @babel/preset-stage-2

然后：npx babel-upgrade --write --install

這樣就搞定了。babel-upgrade 這個(gè)工具會(huì)自動(dòng)幫你安裝所需的插件，并且把 package.json 和 .babelrc 文件相關(guān)的地方都改好，非常好用！

不同項(xiàng)目類(lèi)型的配置建議

這里我們主要分為 npm 庫(kù)項(xiàng)目和業(yè)務(wù)項(xiàng)目來(lái)建議配置，僅供大家參考。當(dāng)然首先 preset-env 是都要安裝的，然后根據(jù)你的目標(biāo)環(huán)境做好配置。

npm 庫(kù)項(xiàng)目

這個(gè)簡(jiǎn)單點(diǎn)來(lái)說(shuō)就是你寫(xiě)了一個(gè)第三方庫(kù)來(lái)給別人使用的，runtime 和 plugin-transform-runtime 肯定是都要安裝上的。特別注意 polyfill 不要安裝，我的建議是：由業(yè)務(wù)項(xiàng)目來(lái)負(fù)責(zé)墊片補(bǔ)丁，因?yàn)?polyfill 會(huì)污染全局。

業(yè)務(wù)項(xiàng)目

這個(gè)就是我們的具體業(yè)務(wù)項(xiàng)目如網(wǎng)站啦什么的。那么 runtime、plugin-transform-runtime、和 polyfill 都要安裝上，并且 @babel/preset-env 要配置上 useBuiltIns: "entry"，這是為了在項(xiàng)目入口文件上根據(jù)目標(biāo)環(huán)境來(lái)智能選擇導(dǎo)入哪些 polyfill 而不是全部導(dǎo)入，這是 preset-env 會(huì)幫你做的事情（具體請(qǐng)參考 polyfill 文檔），最后別忘記了在入口文件上 import "@babel/polyfill"。

以上即是我總結(jié)的 Babel 7 轉(zhuǎn)碼姿勢(shì)，如果對(duì)本篇有疑問(wèn)或建議，歡迎在 這里 提出。

歡迎 star 和關(guān)注我的 JS 博客：小聲比比 Javascript

參考資料

Babel Docs

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/109972.html

相關(guān)文章

  • babel使用方法總結(jié)

    摘要：在項(xiàng)目根目錄下創(chuàng)建一個(gè)文件，注意這是個(gè)配置文件，以點(diǎn)號(hào)開(kāi)頭，沒(méi)有后綴。提供了一種可以在瀏覽器中使用的方法，只需兩步就能一勞永逸。 1.在命令行中使用 Babel Babel 官方推薦將 Babel 安裝在本地，因?yàn)?Babel 的不同版本以及不同轉(zhuǎn)碼規(guī)則會(huì)起到不同的效果，全局安裝會(huì)帶來(lái)不必要的麻煩。在命令提示符中轉(zhuǎn)到自己的項(xiàng)目目錄下： npm install --save-dev ba...

    沈儉 評(píng)論0 收藏0

  • 一天快速了解Babel

    摘要：在做項(xiàng)目中一直使用的是腳手架搭建的環(huán)境，一直沒(méi)有仔細(xì)的去了解這一工具，這周末抽出一天時(shí)間通過(guò)官網(wǎng)還有各種博客文章算是了解了一些內(nèi)容，起碼可以在項(xiàng)目中自己完成的配置了。不過(guò)好像目前瀏覽器端對(duì)這種諸如之類(lèi)的方法支持的還不錯(cuò)了。 在做項(xiàng)目中一直使用的是腳手架搭建的環(huán)境，一直沒(méi)有仔細(xì)的去了解 babel 這一工具，這周末抽出一天時(shí)間通過(guò)官網(wǎng)還有各種博客文章算是了解了一些內(nèi)容，起碼可以在項(xiàng)目中自...

    qiangdada 評(píng)論0 收藏0

  • 前端工程化

    摘要：工程化所謂前段工程自動(dòng)化就是由于前端分裂，有人寫(xiě)代碼，有人寫(xiě)，有人寫(xiě)，有人寫(xiě)，那么就需要翻譯工具命令行工具翻譯成或其他所有瀏覽器能運(yùn)行的代碼版本。自動(dòng)化舉個(gè)例子使用命令行工具實(shí)現(xiàn)代碼自動(dòng)化轉(zhuǎn)變。 工程化 所謂前段工程自動(dòng)化就是：由于前端分裂，有人寫(xiě)css代碼，有人寫(xiě)scss，有人寫(xiě)es5，有人寫(xiě)es6，那么就需要翻譯工具（命令行工具）翻譯成ie或其他所有瀏覽器能運(yùn)行的代碼版本。 sho...

    CarlBenjamin 評(píng)論0 收藏0

  • 使用NPM

    摘要：另一方面，這樣做也無(wú)法支持不同項(xiàng)目使用不同版本的。我們可以換一個(gè)源，即把服務(wù)器換到國(guó)內(nèi)，例如淘寶的源運(yùn)行下面的命令即可切換淘寶源的配置被存儲(chǔ)在，你可以隨時(shí)改。安裝方法使用方法切換源等見(jiàn)鏈接 Nodejs生態(tài)圈很強(qiáng)大，第一個(gè)原因就是NPM，因?yàn)槿蛴袩o(wú)數(shù)的程序員在NPM中貢獻(xiàn)了自己的力量。 為了避免造輪子，我們有時(shí)候會(huì)用到其他人的勞動(dòng)成果，比如一些優(yōu)秀的框架，比如Express，我們直接...

    wanghui 評(píng)論0 收藏0

  • Babel入門(mén)——ES6轉(zhuǎn)ES5

    摘要：首先安裝使用時(shí)在文件頭加載然后，就不需要手動(dòng)對(duì)轉(zhuǎn)碼了。 原文轉(zhuǎn)載自阮一峰教程 本文講解如何在nodejs環(huán)境下使用babel將ES6代碼轉(zhuǎn)ES5以及運(yùn)行ES6的js文件 配置.babelrc文件 首先安裝es2015的presets字段 $ npm install --save-dev babel-preset-es2015 然后寫(xiě)入.babelrc { presets:[ ...

    stdying 評(píng)論0 收藏0

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

0條評(píng)論

閱讀需要支付1元查看
<