在AngularJS应用程序中使用node_modules

Question

我刚刚使用Yeoman项目生成器工具生成了一个角度应用程序。 生成的项目具有目录“ node_modules”。 在此模块内部，可能有很多“预定义函数”用于array-diff等。我仅在可能的情况下，才希望在我的angularJS应用程序（控制器，指令）中使用这些函数。

我试图通过RequireJS和Node-Browserfy不幸地使用那些node_modules，但是每次遇到一些错误都没有成功。 例如“过滤器不保卫等等...”。 有没有逐步教程可以将此模块集成到AngularJS应用程序中？

我的项目结构是：

这是由node-browswerfy生成的我的bundle.js

    (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
var myFilter =require('../../node_modules/array-filter/index.js');
},{"../../node_modules/array-filter/index.js":2}],2:[function(require,module,exports){
/**
 * Array#filter.
 *
 * @param {Array} arr
 * @param {Function} fn
 * @return {Array}
 */

module.exports = function (arr, fn) {
  if (arr.filter) return arr.filter(fn);
  var ret = [];
  for (var i = 0; i < arr.length; i++) {
    if (!hasOwn.call(arr, i)) continue;
    if (fn(arr[i], i, arr)) ret.push(arr[i]);
  }
  return ret;
};

var hasOwn = Object.prototype.hasOwnProperty;

},{}]},{},[1]);

这是我的控制器

'use strict';

/**
 * @ngdoc function
 * @name alam2App.controller:MainCtrl
 * @description
 * # MainCtrl
 * Controller of the alam2App
 */
angular.module('alam2App')
  .controller('MainCtrl', function ($scope) {

var array = [1, 2, 3];
console.log(myFilter (array, function (el, i, arr) {
  return false; // I throw it on the ground!
}));
    $scope.awesomeThings = [
      'HTML5 Boilerplate',
      'AngularJS',
      'Karma'
    ];
  });

我在控制台上收到错误消息

ReferenceError: myFilter is not defined

Answer 1

文档总是一个很好的起点， requirejs的文档很好，其页面引用了node和node_modules的使用，准确地描述了您需要做的事情。

r.js会创建一个包含您正在使用的所有代码的可部署捆绑包，无论您将其放置在哪个文件夹中r.js会将所有代码捆绑到一个文件中，您r.js将其包含在页面中即可执行，并包含所有内容您需要的依赖项。

Angular在模块定义方面的选择不佳，在当时并不是一个可怕的选择，只是一个短视的选择，因此您不得不为解决此类问题而费劲。 幸运的是，社区非常棒，并提出了多种解决方案。 尝试搜索将commonJS模块和AMD模块组合在一起的方法，或者寻找您想要作为依赖项的任何模块的AMD兼容替代品。