webpack的Babel加載器

Ali_ 發布于2019-08-23 11:54 / 2948人閱讀

摘要：的轉譯過程分為三個階段。標準為例，提供了如下的一些的只轉譯該年份批準的標準，而則代指最新的標準，包括和。未完待續，繼續學習繼續補充哦參考文獻深入理解原理及其使用

Babel

Babel的轉譯過程分為三個階段: parsing, transforming, generating。babel只是轉譯新標準引入的語法，比如ES6的箭頭函數轉譯成ES5的函數；而新標準引入的原生對象，部分原生對象新增的原型方法，新增API等(如Proxy, Set等)，這些babel是不會轉譯的，需要用戶自行引用polyfill來解決。

Babel轉譯過程：
解析parsing：將代碼字符串解析成抽象語法樹
變換transforming：對抽象語法樹進行轉換操作
生成generating：根據變換后的抽象語法樹再生成代碼字符串

plugins

插件應用于babel的轉譯過程，尤其是第二階段transforming，如果這個階段不使用任何插件的話，babel會原樣輸出代碼。我們主要關注第二階段使用的插件，因為tranform插件會自動使用對應的詞法插件，所以parsing階段的插件不需要配置

presets預設

為了減少配置轉譯過程中使用的各類插件的麻煩，babel官方做了一些預設的插件集。
JS標準為例，babel提供了如下的一些preset:
es2015, es2016, es2017, env
es20xx的preset只轉譯該年份批準的標準，而env則代指最新的標準，包括lastest和es20xx。
另外，stage-0到stage-4的標準成型之前的各個階段，實驗版的presets

stage-0: 稻草人，只是一個想法，可能是babel插件
stage-1: 提案，初步嘗試
stage-2: 初稿，完成初步規范
stage-3: 候選，完成規范和初步的瀏覽器實現
stage-4: 完成，將被添加到下一年度發布

babel-loader

用來處理ES6語法，將其編譯成瀏覽器可以執行的js語法。

module.exports = {
  ...
  module: {
    rules: [{
      test: /.jsx$/
      use: {
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-env"],//presets設置的就是當前js版本
          plugins: [require("@babel/plugin-transform-object-rest-spread")]//需要的插件
        }
      }
    }]
  }
};

options屬性來給loader傳遞選項

babel-poyfill

polyfill會把ES2015+環境整體引入代碼環境中，讓你的代碼可以直接使用新標準所引入的新原生對象。

要確保在入口處導入polyfill，因為polyfill代碼需要在所有代碼前先被調用

module.exports = {
  entry: ["babel-polyfill", "./app/js"]
};

babel-plugin-transform-runtime

babel-plugin-transform-runtime插件依賴babel-runtime, babel-plugin-transform-runtime插件是把js代碼中使用的新原生對象和靜態方法轉換成對babel-runtime包的引用。

未完待續，繼續學習繼續補充哦~

參考文獻
【JavaScript】深入理解Babel原理及其使用

云服務器 GPU云服務器 webpack按需加載自動加載器類加載器加載云主機器

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

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

通用、封裝、簡化 webpack 配置

摘要：通用封裝簡化配置現在，基本上前端的項目打包都會用上，因為提供了無與倫比強大的功能和生態。簡化配置的一種方式是使用社區封裝好的庫，比如。封裝了的一些基礎配置，然后暴露一些額外配置的接口，并附加本地數據模擬功能，詳情可以參考主頁。通用、封裝、簡化 webpack 配置現在，基本上前端的項目打包都會用上 webpack，因為 webpack 提供了無與倫比強大的功能和生態。但在創建一個項...

PingCAP 2019-08-23 13:52 評論0 收藏0
webpack+babel+react練習流程記錄

摘要：簡介來構建用戶界面的庫，不是框架關注于層虛擬單向數據流這些概念如何使用下載文件也可以使用，需要用到的模塊介紹是編寫組件的一種語法規范，可以看為是的擴展，它支持將和混寫在一起，最后使用編譯為常規的，方便瀏覽器解析編寫第一個例子使用編寫組件 react簡介來構建用戶界面的庫，不是框架關注于view層虛擬DOM 單向數據流 JSX這些概念如何使用react 下載文件 rea...

DDreach 2019-08-19 18:25 評論0 收藏0
webpack走在前端技術的前沿（深入淺出）

摘要：我們也可以不用在命令行里面輸入，因為我們可能以后會查詢更多東西，因此我們可以，在的里面加入這里的和只是為了輸出進度條和，沒有實際意義，然后在命令行輸入就可以默認使用進行打包了。更具體的就請查看一下官方文檔了，畢竟篇幅不能太長。 Webpack 網上有很多webpack的介紹，也有不少的視頻，但是不少人看到應該還是不是很了解webpack里面到底是講什么，而且報錯了之后也是不知所措那么...

jayce 2019-08-20 18:18 評論0 收藏0
webpack走在前端技術的前沿（深入淺出）

摘要：我們也可以不用在命令行里面輸入，因為我們可能以后會查詢更多東西，因此我們可以，在的里面加入這里的和只是為了輸出進度條和，沒有實際意義，然后在命令行輸入就可以默認使用進行打包了。更具體的就請查看一下官方文檔了，畢竟篇幅不能太長。 Webpack 網上有很多webpack的介紹，也有不少的視頻，但是不少人看到應該還是不是很了解webpack里面到底是講什么，而且報錯了之后也是不知所措那么...

_ang 2019-08-01 17:15 評論0 收藏0
webpack從零開始第5課:模塊篇

摘要：目錄第課安裝和第課配置文件第課做為的一個模塊來使用第課插件篇第課模塊篇第課在開發中使用本文參考文檔官方模塊配置模塊配置中文翻譯模塊配置中文翻譯版本官方內置清單第三方清單代碼托管及用法配置官方文檔模塊總覽我是首頁萬事開頭 webpack目錄第1課: 安裝webpack和webpack-dev-server 第2課: 配置文件第3課: 做為node的一個模塊來使用第4課: ...

tinylcy 2019-08-21 18:20 評論0 收藏0