用帶有 Amazon Cognito Identity SDK 的 webpack 打包 JavaScript

2016 年 7 月， AWS 推出了 Amazon Cognito 用戶庫 （ user pool ） ，這個新特性極大的方便了開發者在移動和 Web 應用程序上添加註冊和登錄功能。為了讓開發者更容易在自己的應用程序中實現用戶庫功能，我們也發布了用於 JavaScript 的 Amazon Cognito Identity SDK。

Amazon Cognito 用戶庫可以讓你在移動和 Web 應用程序上添加用戶註冊和登錄功能更加容易。全託管用戶庫可以擴展到數以百萬計的用戶，你可以在每個 AWS 賬戶下有多重目錄。創建一個用戶庫只需要幾分鐘的時間，並且你可以決定當一個新用戶在你的應用程序或服務上註冊時哪些屬性（包括地址、郵箱、電話號碼以及自定義屬性）是強制的，哪些是可選擇的。你的應用程序也可以指定所需的密碼強度，指定用戶需要進行多因素認證（MFA），以及通過電話號碼或者郵件地址來驗證新用戶，從而進一步加強應用程序的安全性。

如果你是首次接觸用於 JavaScript 的 Amazon Cognito Identity SDK，那麼請先閱讀這篇 AWS 文章作為開始。

為什麼在 JavaScript 上使用 Asset 及模塊捆綁的 Amazon Cogtito Identity SDK

今天，針對移動和桌面的現代 Web 應用程序都能為用戶提供安全、快捷、靈敏以及類本地應用的體驗。毫無疑問，現代的瀏覽器功能足夠強大，能夠肩負起大量可能的功能實現。許多流行的實現很大程度上依賴於 JavaScript 應用程序通過某種形式的 asset 封裝和/或模塊捆綁進行部署。這使得許多開發人員能夠很好的維護自己的 JavaScript 應用程序，並且可以通過使用 script 標籤創建一個或多個可以載入到客戶端瀏覽器上的文件。

關於如何實現打包有許多爭鳴，包括 Grunt 和 Gulp 這樣的 task runner，以及 Browserity 這樣的打包器。然而，一個普遍的共識是， asset 打包不僅可以改善載入時間 - 它可以在確保可測試性和健壯性的前提下使你的應用程序模塊化。

使用帶有 Amazon Cognito Identity SDK 的 webpack 打包 JavaScript

我們接到了許多請求，要求我們提供如何在 webpack 環境下整合用於 JavaScript 的 Amazon Cognito Identity SDK 的更多細節。我們特地要求確保 webpack 正確管理一下第三方的依賴包：

• 用於 BigInteger 計算的 JavaScript BN 庫（jsbn）
• jsbn 擴展及包含大多數公共 BigInteger 方法的其它 jsbn 方法（jsbn2）
• Stanford JavaScript Crypto 庫（jscl）

通過這些例子，可以看到，下面這些 bower 庫都被 bower.json 使用

"aws-cognito-sdk": "https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.js",
"amazon-cognito-identity": "https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js",
"sjcl": "https://raw.githubusercontent.com/bitwiseshiftleft/sjcl/master/sjcl.js",
"jsbn": "https://raw.githubusercontent.com/andyperlitch/jsbn/master/index.js",

出於我們前面給出的關於 asset 打包對於開發過程的重要性的原因，除非你的應用程序非常小，否則使用像 webpack 這樣的 asset 打包工具幾乎總是必須的。當然，還有一個方法是可以通過使用標籤簡單的處理所有依賴關係。然而，這會污染全局命名空間，而且不能夠提供最優的資源管理和載入方式。許多開發者首次使用的是具有標準 babel 載入器的標準 webpack.config.js 文件，像下面展示的這樣。

{
  /** test for file ending in js or jsx 
   * exclude node_module and bower_components - we dont want to babel these 
   * use the babel loader 
   * apply the react and es2015 (es6) transformations **/

  test: /.jsx?$/,
  exclude: /(node_modules|bower_components)/,
  loader: 'babel',
  query: {
    presets: ['react', 'es2015']
  }
}

需要重點記住的是，這個配置沒有考慮一些第三方依賴關係，這些被用於 JavaScript 的 Amazon Cognito Identity SDK 所使用的第三方依賴目前沒有使用 JavaScript 通用模塊定義(UMD)。

UMD 模式試圖提供與 RequireJS 和 CommonJS 這些當前最流行的腳本載入器的非同步模塊定義 [AMD] 的基本兼容。

這是 webpack 所依賴的模式，為了讓 webpack 能夠工作，我們必須進行一些改變。不做這些改變，你可能會遇到下面這些錯誤。

amazon-cognito-identity.min.js:19 Uncaught ReferenceError: BigInteger is not defined

這樣一個錯誤可能會在調用 AWSCognito.CognitoIdentityServiceProvider.CognitoUser property authenticateUser 的時候出現。在這個錯誤例子中，我們可以利用 webpack 的 import 和 export 載入器的能力來解決這個錯誤。

使用 webpack 載入器

根據 [webpack 文檔]，「載入器允許你通過 require() 或 load 來預處理文件。載入器是一種類似其它構建工具中 「tasks」 的工具，它可以提供一個處理前端構建步驟的強大方法。載入器可以把一個文件從一種語言轉化成另一種語言，比如把 CoffeeScript 轉化成 JavaScript ，或者把圖像轉換為 data URL。「

為了解決 UMD 的兼容性缺乏的問題，你必須依賴兩個具體的載入器， import 和 export 載入器。

使用 export 載入器

在使用用於 JavaScript 的 Amazon Cognito Identity SDK 的情況下，我們需要確保把 theAWSCognito 變數導出到 require /import 它們的模塊的變數範圍內（針對 ES6）。

{
  test: /aws-cognito-sdk/index.js/,
  loader: 'exports?AWSCognito'
}

在由 webpack 創建的捆綁中，使用 export 載入器會有導出模塊方法的效果。因此， 在 require 和 import 後，AWSCognito 和 AWS 是可訪問的（針對 ES6）。

var AWSCognito = require('aws-cognito-sdk')

/*** EXPORTS from export-loader ***/ 
module.exports = AWSCongito

這兒可以找到更多關於 export 載入器的信息。

使用 import 載入器

import 載入器主要用於把變數注入（import）到另一個模塊的變數範圍內。當第三方模塊需要依賴全局變數的時候， import 載入器非常有用，比如針對 JavaScript 的 Amazon Cognito Identity SDK 需要依賴 BigInteger 或者 sjcl 的時候。

如果你不使用 webpack 載入器，下面這些內容會在一個捆綁中生成。

__webpack_require__(431);       // refers to jsbin
__webpack_require__(432);       // refers to sjcl

因為 jsbin 和 sjcl 都不能 export 任何東西，因此任何依賴於這些模塊的調用都會導致一個錯誤。

為了解決這個問題，我們需要使用下面的 webpack 載入器配置：

{
  test: /amazon-cognito-identity/index.js/,
  loader: 'imports?jsbn,BigInteger=>jsbn.BigInteger,sjcl'
},
{
  test: /sjcl/index.js/,
  loader: 'imports?sjcl'
}

這個配置把下面的這些內容嵌入到了由 webpack 創建的捆綁中（此時是 bundle.js）。

/*** IMPORTS FROM imports-loader ***/
var jsbn = __webpack_require__(431);
var BigInteger = jsbn.BigInteger;
var sjcl = __webpack_require__(432);

結果，jsbn、BigInteger 和 sjcl 都被從它們各自的模塊中導入到了用於 JavaScript 的 Amazon Cognito Identity SDK 中。

有關 import 載入器的更多信息可以在這兒找到。

下一步

我們鼓勵你下載用於 JavaScript 的 Amazon Cognito Identity SDK 並開始構建你的應用，並在這篇文章的指導下通過 webpack 能夠迅速掌握。

如果你有任何意見或問題，請在下面自由評論，也可以發郵件到 teichtah@amazon.com 或者在這兒提出問題。

引用

這篇文章引用了下面這些第三方資源：

• webpack - https://webpack.github.io/
• webpack 文件 - http://webpack.github.io/docs/what-is-webpack.html
• webpack export 載入器 - https://github.com/webpack/exports-loader
• webpack import 載入器 - https://github.com/webpack/imports-loader
• 用於 BigInteger 計算的 JavaScript BN 庫- http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn.js
• jsbns - http://www-cs-students.stanford.edu/~tjw/jsbn/jsbn2.js
• Stanford JavaScript Crypto 庫 - https://github.com/bitwiseshiftleft/sjcl
• RequireJS - http://requirejs.org/
• CommonJS - http://www.commonjs.org/

via: https://mobile.awsblog.com/post/Tx1A84CLMDJ744T/Using-webpack-with-the-Amazon-Cognito-Identity-SDK-for-JavaScript

作者：Marc Teichtahl 譯者：ucasFL 校對：wxy

本文由 LCTT 原創編譯，Linux中國 榮譽推出

本文轉載來自 Linux 中國: https://github.com/Linux-CN/archive