349
用帶有 Amazon Cognito Identity SDK 的 webpack 打包 JavaScript
這篇文章針對開發和部署基於 JavaScript 的應用（服務器端的 Node.js 或者客戶端）的各種經驗水平的開發者，通過本文，你將看到如何把 AWS SDK， Amazon Cognito Identity SDK 嵌入到 JavaScript 中，以及如何使用流行的 webpack 模塊打包器。
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 能夠迅速掌握。
原文發布時間為：2017-12-22
本文來自雲棲社區合作夥伴“Linux中國”
最後更新：2017-06-01 12:02:17