用 grunt + angular + bower 加载 npm 模块答案

【问题标题】：loading npm module with grunt + angular + bower用 grunt + angular + bower 加载 npm 模块
【发布时间】：2017-07-22 23:42:41
【问题描述】：

我正在使用带有 bower 和 grunt 的 angular，我想加载 npm 模块。然后我在 main.js 中使用 require('my module which is in node_modules') 但它不起作用。

我已经尝试为 bower 下载 requirejs，但仍然没有机会。

问题是要加载一个凉亭模块，很容易只需将它加载到我的 index.html 并找到正确的路径，例如

但是在使用 npm 时情况并非如此，因为模块中没有特定的 js 文件。

感谢您的帮助。

【问题讨论】：

不确定你需要什么，你能更具体一点吗？如果您需要从 node_modules 文件夹中引用模块，只需在 main.js 中添加您需要的导入“[node_modules_folder]/file.js”。
认为你应该使用 jspm、webpack 或 angular-cli（也是 webpack）来加载模块，例如import * as _ from 'lodash'。这些工具提供了从模块名称到它的路径的映射，而您不必担心它。避免任何模块的每次版本更新都需要您更新导入路径。

标签： angular gruntjs yo

【解决方案1】：

这可能会有所帮助：

要使 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

【讨论】：