使用Bower Grunt Angularjs时加载NPM模块构建

问题描述：

我正在尝试将一个npm模块集成到构建于Angularjs 1.4，Grunt和Bower上的应用程序中。使用Bower Grunt Angularjs时加载NPM模块构建

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);

我目前得到通过index.html文件通过亭子和访问我所有的依赖关系。如果我编写链接到node_modules文件夹的脚本标记，这似乎不起作用。

答

使用模块注射ANGULARJS

访问从node_modules和bower_components AngularJS模块是直截了当：

让我们从node_modules（类似的可以从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

对于使用browserify（app.js是包含需要，可以指定阵列中的其他文件的文件），

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

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

使用Bower Grunt Angularjs时加载NPM模块构建

相关推荐