如何在您的 Ionic / AngularJs 应用程序中包含和使用节点模块？

Posted 2023-03-07

【中文标题】如何在您的 Ionic / AngularJs 应用程序中包含和使用节点模块？

【英文标题】：How to include and use node modules in your Ionic / AngularJs app?

【发布时间】：2015-11-21 11:19:03

【问题描述】：

我有一个 Ionic 应用程序，我想包含节点模块 angular-base64 以在我的控制器中使用，或者甚至包裹在角度服务等中。我已经开始运行了

npm install angular-base64

继续并在/myIonicApp/node_modules/ 中安装了包含angular-base64.min.js 文件的文件夹。所以文件的完整路径是/myIonicApp/node_modules/angular-base64/angular-base64.min.js。

但是，当我尝试在我的一个控制器中使用该模块时：

app.controller('myController', ['$scope', '$base64',
  function($scope, $base64) 

    //$base64... 

  
]);

它不知道我在说什么。我是否必须做其他事情才能使其正常工作？也许在我的app.js 中有什么东西？

【问题讨论】：

我感觉这个问题的答案与browserify有关...

【参考方案1】：

接受的答案不正确。为了将客户端模块添加到您的 Ionic/AngularJS 应用程序中，您应该使用 Bower 而不是 NPM。 NPM 只能用于安装属于开发/构建/部署过程的一部分的模块。作为客户端软件包的一部分，您希望向用户展示的任何内容都应由 Bower 管理。

如果您查看.bowerrc 文件，您将看到以下内容：

  "directory": "www/lib"

此配置将 www/lib 目录设置为 bower 安装的所有内容的主目录。如果您使用以下命令，该软件包将安装在正确的位置：

bower install --save angular-base64

（--save 标志将依赖项保存在您的 bower.json 文件中。）

您现在可以将脚本标签添加到您的index.html 文件中：<script src="lib/angular-base64/angular-base64.min.js"></script>

您还需要将模块注入到您的应用中，如上所述。在app.js 中添加模块，如下所示：angular.module('starter', ['base64'])

在使用 Bower 或 NPM 等工具时，我发现必须手动修改安装通常是我做错的第一个迹象！

【讨论】：

npm 包中通常有很多文件。将所有这些放在 www/lib 中将使最终构建无缘无故地变得沉重。我个人更喜欢创建一个符号链接 www/lib/what/ever.js -> ../../node_modules/what/ever.js 希望在 ionic 中有一个统一的干净依赖管理......

【参考方案2】：

将目录angular-base64/angular-base64.min.js放入www/lib。

在index.html中包含JS文件（例如：<script src="lib/angular-base64/angular-base64.min.js"></script>。

在app.js:angular.module('starter', ['base64'])中注入模块。

之后，您应该可以在应用中的任何位置使用base64。

【讨论】：

非常感谢！另外，我一直在阅读，并且到处都看到“Browserify”。这是我也可以采取的另一条路线吗？

@DeanGrobler 不知道，从未听说过Browserify :)

它有效。但我希望它不需要将导入的模块手动复制到 www/lib 目录，因为它不会自动更新。是否可以指定直接路径“node_modules/angular-base64/angular-base64.min.js”？

@Vidul 嗨，Vidul，您的解决方案有效。我是 Ionic 和 AngularJS 的新手，你能解释一下为什么我们必须手动将模块复制到 www/lib 目录吗？为什么它不能从 node_modules/ 目录中引用模块？谢谢！

@nigong 不客气。之所以这样，是因为关于the application structure 的 Ionic 约定，其中lib 表示任何外部库都将放置在此处。 “node_modules”只是助手，而不是混合应用程序的一部分。

【参考方案3】：

对于 Ionic V2，接受的答案不再准确，.bowerrc 已从默认安装中删除。

Here is how you do it now，来自官方 Ionic V2 文档。

要将第三方库添加到应用程序，请运行以下命令：

npm install --save

例如：使用导入的函数

//命名导出模式

从 'theLibraryName' 导入 myFunction ；

...

// 使用导入的功能

myFunction();