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

amazon cognito 使用者庫可以讓你在移動和 web 應用程式上添加使用者注冊和登入功能更加容易。全托管使用者庫可以擴充到數以百萬計的使用者，你可以在每個 aws 賬戶下有多重目錄。建立一個使用者庫隻需要幾分鐘的時間，并且你可以決定當一個新使用者在你的應用程式或服務上注冊時哪些屬性（包括位址、郵箱、電話号碼以及自定義屬性）是強制的，哪些是可選擇的。你的應用程式也可以指定所需的密碼強度，指定使用者需要進行多因素認證（mfa），以及通過電話号碼或者郵件位址來驗證新使用者，進而進一步加強應用程式的安全性。

<a target="_blank"></a>

今天，針對移動和桌面的現代 web 應用程式都能為使用者提供安全、快捷、靈敏以及類本地應用的體驗。毫無疑問，現代的浏覽器功能足夠強大，能夠肩負起大量可能的功能實作。許多流行的實作很大程度上依賴于 javascript 應用程式通過某種形式的 asset 封裝和/或子產品捆綁進行部署。這使得許多開發人員能夠很好的維護自己的 javascript 應用程式，并且可以通過使用 script 标簽建立一個或多個可以加載到用戶端浏覽器上的檔案。

我們接到了許多請求，要求我們提供如何在 webpack 環境下整合用于 javascript 的 amazon cognito identity sdk 的更多細節。我們特地要求確定 webpack 正确管理一下第三方的依賴包：

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

<code>"aws-cognito-sdk": "https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/aws-cognito-sdk.js",</code>

<code>"amazon-cognito-identity": "https://raw.githubusercontent.com/aws/amazon-cognito-identity-js/master/dist/amazon-cognito-identity.min.js",</code>

<code>"sjcl": "https://raw.githubusercontent.com/bitwiseshiftleft/sjcl/master/sjcl.js",</code>

<code>"jsbn": "https://raw.githubusercontent.com/andyperlitch/jsbn/master/index.js",</code>

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

<code>{</code>

<code>/** test for file ending in js or jsx</code>

<code>* exclude node_module and bower_components - we dont want to babel these</code>

<code>* use the babel loader</code>

<code>* apply the react and es2015 (es6) transformations **/</code>

<code></code>

<code>test: /\.jsx?$/,</code>

<code>exclude: /(node_modules|bower_components)/,</code>

<code>loader: 'babel',</code>

<code>query: {</code>

<code>presets: ['react', 'es2015']</code>

<code>}</code>

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

<code>amazon-cognito-identity.min.js:19 uncaught referenceerror: biginteger is not defined</code>

這樣一個錯誤可能會在調用 awscognito.cognitoidentityserviceprovider.cognitouser property authenticateuser 的時候出現。在這個錯誤例子中，我們可以利用 webpack 的 import 和 export 加載器的能力來解決這個錯誤。

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

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

在使用用于 javascript 的 amazon cognito identity sdk 的情況下，我們需要確定把 theawscognito 變量導出到 require /import 它們的子產品的變量範圍内（針對 es6）。

<code>test: /aws-cognito-sdk\/index\.js/,</code>

<code>loader: 'exports?awscognito'</code>

在由 webpack 建立的捆綁中，使用 export 加載器會有導出子產品方法的效果。是以， 在 require 和 import 後，awscognito 和 aws 是可通路的（針對 es6）。

<code>var awscognito = require('aws-cognito-sdk')</code>

<code>/*** exports from export-loader ***/</code>

<code>module.exports = awscongito</code>

import 加載器主要用于把變量注入（import）到另一個子產品的變量範圍内。當第三方子產品需要依賴全局變量的時候， import 加載器非常有用，比如針對 javascript 的 amazon cognito identity sdk 需要依賴 biginteger 或者 sjcl 的時候。

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

<code>__webpack_require__(431); // refers to jsbin</code>

<code>__webpack_require__(432); // refers to sjcl</code>

因為 jsbin 和 sjcl 都不能 export 任何東西，是以任何依賴于這些子產品的調用都會導緻一個錯誤。

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

<code>test: /amazon-cognito-identity\/index\.js/,</code>

<code>loader: 'imports?jsbn,biginteger=&gt;jsbn.biginteger,sjcl'</code>

<code>},</code>

<code>test: /sjcl\/index\.js/,</code>

<code>loader: 'imports?sjcl'</code>

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

<code>/*** imports from imports-loader ***/</code>

<code>var jsbn = __webpack_require__(431);</code>

<code>var biginteger = jsbn.biginteger;</code>

<code>var sjcl = __webpack_require__(432);</code>

結果，jsbn、biginteger 和 sjcl 都被從它們各自的子產品中導入到了用于 javascript 的 amazon cognito identity sdk 中。

原文釋出時間為：2017-12-22

本文來自雲栖社群合作夥伴“linux中國”