babel相關總結

Richard_Gao 發布于2019-08-22 15:03 / 2815人閱讀

對babel一直沒具體總結過，趁周末看了下文檔，記錄一下

babel作為一個compiler,主要用在轉換新的es標準實現來使所有瀏覽器都支持，這包含兩方面

新的es標準語法，箭頭函數、擴展運算符、塊級作用域等

轉化新的es標準方法或正被提議還未納入標準的方法，，Array.from、Map、Promise、String.includes等

babel編譯過程

babel的編譯過程分為三個階段，解析、轉換、生成瀏覽器支持的代碼。官網推薦了一個the-super-tiny-compiler,描述了類似babel這樣的compiler大體是如何工作的。

解析解析源代碼，構造抽象語法樹

轉換使用各種plugin處理AST，轉換成一個新的AST

生成代碼根據新的AST，生成代碼字符串

具體細節參見the-super-tiny-compiler

處理新的語法

對es新增語法的處理是借助babel的各種plugin，各種plugin作用在babel編譯的第二個階段，轉化階段

presets

presets可以看做是一部分plugin的集合，目前官方提供的presets有env、react、flow

在babel還不支持env之前，我們一般在.babelrc中指定

{
    presets:["es2015","es2016","stage-2"]
}

像es2015表示babel會使用如下這些plugin處理我們代碼中使用的新語法

現在我們可以這樣寫

{
    presets:["env"]
}

等價于babel-preset-latest，可以轉換已經在標準中的es6,es7等的新語法，需要注意的是env并不會處理被提議的stage-x中的新語法，要使用那些語法要自己在presets中執行stage-x

并且只是指定env，而不指定相關的targets信息的話，babel只會轉換新語法，對新方法不會做處理

處理新的方法 babel-polyfill

為了支持es新增api的轉化，我們可以使用babel-polyfill,這個庫內部使用core-js(那個作者打廣告說正在找工作的庫)和regenerator來模擬實現新增api.

使用polyfill的缺點

polyfill需要首先被引入，在文件首部或者webpack中entry: ["babel-polyfill", "./app/js"],整個文件會和我們src下的代碼打包在一起，增大文件大小

polyfill會在js內置對象的原型上增加方法，例如String.prototpe.includes，污染全局作用域

一個減小使用polyfill后打包代碼過大問題的方法 useBuiltIns=true

useBuiltIns默認不開啟，開啟后，我們import "babel-polyfill"會根據當前targets指定的環境引入必須的文件

import "babel-polyfill";

輸出:根據環境

import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
import "core-js/modules/web.timers";
import "core-js/modules/web.immediate";
import "core-js/modules/web.dom.iterable";

一定程度上減小打包文件大小

transform-runtime

使用babel-polyfill會有使打包文件過大和污染全局作用域的問題，所以babel提供了babel-plugin-transform-runtime來解決一些問題

優化幫助函數引用

babel內部提供了很多幫助函數來處理語法轉化的需要，transform-runtime會把對幫助函數的調用替換為對模塊的引用

class Person {
}

輸出：

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

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

_classCallCheck是一個幫助函數，如果我們多個js文件中都有定義class類，_classCallCheck就會在多個文件中都存在,造成幫助函數重復，增大打包文件大小。而transform-runtime會將幫助函數以引用的方式調用(引用babel-runtime/helpers/xxx下面的)，避免重復

對于新增api的轉化，transform-runtime使用babel-runtime/core-js下對應的同名方法,而不需要引用babel-polyfill,只會需要哪個，就require哪個core-js下對應的實現.避免污染全局作用域

transform-runtime的缺點

因為不會在js原生對象原型上添加方法,所以transform-runtime不會轉化新增的實例方法，例如不能處理"foobar".includes("foo")

對于新增api如何處理

如果項目中使用了大量新增api，并使用大量新增的實例方法，應該使用polyfill，為了一定程度上減小打包文件的體積，應該啟用useBuiltIns=true，并指定代碼的最低運行環境，盡量減少不必要的polyfill，同時加入transform-runtime，設置polyfill=false

{
    "presets":[
        ["env",{
            "targets":{
                "browsers": [
                    "last 2 versions",//各個瀏覽器的最新兩個版本
                    "safari >= 7"
                ]
            },
            "debug": true,
            "useBuiltIns": true
        }]
    ],
    "plugins":[
        ["transform-runtime", { //不處理新的方法，只處理幫助函數
            "helpers": true,
            "polyfill": false,
            "regenerator": false,
            "moduleName": "babel-runtime"
        }]
    ]
}

如果項目并不使用新增實例方法(很少這樣的情況),并不想污染全局作用域，應該使用transform-runtime

{
    "presets":["env"],//處理新的語法，但新的方法由transform-runtime插件處理
    "plugins":[
        ["transform-runtime", {
            "helpers": true,
            "polyfill": true,
            "regenerator": true,
            "moduleName": "babel-runtime"
        }]
    ]
}

原文地址

GPU云服務器云服務器 Babel babel cdn babel7 babel6

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

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

babel歸納總結

摘要：歸納總結在前端的發展過程中，的兼容性，一直是前端頭痛的問題，在以前的一些有些項目中，為解決瀏覽器兼容而花費的時間甚至還要多余實際的業務邏輯開發時間，就是其中處理兼容的轉譯工具或者叫平臺。初稿完成初步規范。完成將被添加到下一年度發布。 github: babel歸納總結在前端的發展過程中，javascript的兼容性，一直是前端頭痛的問題，在以前的一些有些項目中，為解決瀏覽器兼容而花費...

v1 2019-08-23 16:12 評論0 收藏0
提高代碼質量——使用Jest和Sinon給已有的代碼添加單元測試

摘要：現在，我們可以使用單元測試來提高自己的代碼質量。它在單元測試的編寫中通常用來模擬等相關請求。通過這篇文章，你應該學會了如何針對已有代碼從零開始編寫一套完整的單元測試用例。概述在日常的功能開發中，我們的代碼測試都依賴于自己或者QA進行測試。這些操作不僅費時費力，而且還依賴開發者自身的驅動。在開發一些第三方依賴的庫時，我們也沒有辦法給第三方提供完整的代碼質量報告。現在，我們可以使用單...

voyagelab 2019-08-22 16:28 評論0 收藏0
利用vscode調試nodejs代碼實踐總結

摘要：支持，和三種環境，并且可以安裝擴展插件，因而可以滿足絕大多數人的要求，安裝配置非本文所要講述的內容，請自行查找，本文著重討論如何用更好的調試代碼，希望能對大家有所幫助。 2018.5.12更新最近在用vscode 1.23版本的時候發現outDir不可以使用了，建議這么改吧，直接program采用編譯后的文件，然后打開sourceMaps，同時在babel編譯的時候自己搞--watc...

chenatu 2019-08-21 17:42 評論0 收藏0
用 ES6 編寫 Webpack 的配置文件

摘要：在執行時會先用把配置文件轉成代碼再繼續處理。只要你把配置文件命名成，就會用相應的去轉換一遍配置文件。它沒改的文件名，但配置文件和各種腳本都是完全的語法。這是提供的一個命令行工具，你可以用它代替去執行文件。總結得益于，幾乎已經是現在的標配了。概述我最近在整理一個 Ionic + Webpack 的項目模板，因為項目代碼都是 ES6 的，所以我也想在其他地方也用 ES6 。其中一個地方...

Rocture 2019-08-21 10:44 評論0 收藏0
我的es6總結

摘要：補充普通方法是實例化出來的對象，靜態方法屬于類，亦可以被繼承。類的基本定義生成實例構造函數。默認值小王的時候自動執行構造函數。構造函數和實例繼承繼承上一級，可以調用父類的構造函數。一. es6編譯環境搭建 1 . 初始化 npm 創建package.json文件 npm init 2. 安裝webpack cnpm install webpack -D 3. 安...

maybe_009 2019-08-20 18:06 評論0 收藏0