使用 Bower Grunt Angularjs Build 时加载 NPM 模块答案

【问题标题】：Loading NPM module when using Bower Grunt Angularjs Build使用 Bower Grunt Angularjs Build 时加载 NPM 模块
【发布时间】：2017-12-30 15:55:44
【问题描述】：

我目前正在尝试将 npm 模块集成到基于 Angularjs 1.4、Grunt 和 Bower 构建的应用程序中。

Require 和 Import 在 angualrjs 框架中不起作用，这是我能想到的访问 node_modules 文件夹的唯一方法。

有人知道如何在同一个应用程序中同时使用 npm 和 bower 模块吗？

这是我的 app.js 文件夹的精简版：

    (function(angular) {
      'use strict';
      angular
        .module('AppApp', [dependencies])

      .constant('appconfig',{})
      .config(function(...){

      $statprovider.state{...}
      .run(function($state){
      $state.go('login);
 })
})(angular);

我目前通过 bower 获取所有依赖项并通过 index.html 文件访问。如果我在那里编写一个链接到 node_modules 文件夹的脚本标记，这似乎不起作用。

【问题讨论】：

标签： javascript angularjs npm gruntjs bower

【解决方案1】：

在 ANGULARJS 中使用模块注入

从 node_modules 和 bower_components 访问 AngularJS 模块非常简单：

让我们以 node_modules 的 angular-bootstrap 为例（类似的可以从 bower_components 完成）：

在 HTML 文件中，指定 js 文件的引用。

<script type="text/javascript" src="../node_modules/angular-bootstrap/ui-bootstrap-tpls.js"></script>

在你的angular模块中，将依赖注册为（下载时可以在npm网站或github上查看模块名称，也可以在下载后在node_modules/bower_components的js文件中查看）：

angular.module('AppApp',
    [
        '*ui.bootstrap*',
    ]);

但是，您也可以使 Require 和 Import 在 AngularJS 框架中工作。这可以使用 browserify 或 webpack 来完成，它将所有包含 require/import 的 javascript 文件捆绑在一起以解决依赖关系，以便浏览器可以理解 require/import 语法，否则浏览器无法理解。

使用浏览器

用于在使用grunt时使用browserify（app.js是包含require的文件，可以指定数组中的其他文件），

browserify: {
        options: {
            browserifyOptions: {
                debug: true,
                insertGlobalVars: []
            },
            transform: ['brfs' ]
        },
        app: {
            files: {
                ['app.js']
            }
        }
}

使用 browserify 所需的 node_modules 依赖项有：brfs、grunt-browserify

【讨论】：