如何在 Angular 控制器中使用浏览器化的 npm 包

How to use Browserified npm package in Angular controller?

本文关键字:浏览器 npm Angular 控制器      更新时间:2023-09-26

我花了几个小时寻找一种让这个(或任何东西)与 Browserify 一起工作的方法,但找不到任何对我的问题有用的教程或示例。几乎所有它们都只展示了如何使代码变钝,但没有一个展示如何在浏览器化后实际访问代码本身。也许这只是一些直截了当的事情,没有人费心去提及它,所以如果这实际上是一个愚蠢的问题,我深表歉意。

所以,我有这个实现用户名和密码验证的应用程序。我将"验证器"npm 包与 OWASP 推荐的密码复杂性包结合使用,以验证节点中服务器端的输入。根据我从 Browserify 项目中了解到的情况,我应该能够浏览器化需要这些包的模块,并在客户端加载它们。

我的自定义验证器.js模块现在如下所示:

var validator = require('validator')
var owasp = require('owasp-password-strength-test')
module.exports = {
  validator: validator,
  owasp: owasp,
  containsUsername: function(password, username) {
    return (new RegExp(username, 'i')).test(password)
  }
}

我也想在客户端使用这些函数,最好是在 AngularJS 中,因为我使用 Angular 根据用户提供的当前(可能无效)输入来操作输入字段。

基本上,我想要的是客户端作为服务器端的对称输入验证,方法是访问两端的同一模块,该模块已在客户端浏览器化。

我运行了以下命令:

browserify --standalone customValidator.js > clientSideValidator.js

然后将clientSideValidor.js脚本包含在我的玉石模板中

  script(src='clientSideValidator.js')

我尝试访问 Angular 和 jade 本身中的单独脚本中的函数,但每个函数总是返回 undefined。如何在客户端代码中运行类似"validator.isAlphaNumeric($scope.username)"之类的内容?

您需要为浏览器提供一个名称以将所有内容导出到。

尝试运行它并将"myModuleName"替换为您想要命名的名称

$ browserify customValidator.js --standalone myModuleName > clientSideValidator.js