Question

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

Require and 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文件夹的脚本标记，这似乎不起作用。

Answer 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>

在角度模块中，将依赖项注册为（您可以在下载时检查npm网站或github上的模块名称，也可以在下载后在node_modules / bower_components中的js文件中进行检查）：

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

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

使用BROWSERIFY

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

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

使用browserify所需的node_modules依赖项是： brfs，grunt-browserify

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

1 个答案: