用带有 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中国”