是否有像 grunt-wiredep 这样的注入器适用于 NPM 依赖项？答案

【问题标题】：Is there an injector like grunt-wiredep that works for NPM dependencies?是否有像 grunt-wiredep 这样的注入器适用于 NPM 依赖项？
【发布时间】：2015-10-14 11:10:27
【问题描述】：

现在大多数包都在 NPM 和 Bower 中可用。我必须有 NPM，但我想在我的项目中将 Bower 排除在外。

我目前依靠grunt-wiredep 创建<script> 包含在我的index.html 中。该工具会查看所有 Bower 配置，以将所有必要的 js 和 css 文件拉入我的index.html。

是否有工具可以对 NPM 依赖项做同样的事情？

【问题讨论】：

标签： gruntjs npm bower wiredep grunt-wiredep

【解决方案1】：

您可以使用像 Browserify 或 Webpack 这样的模块捆绑器来做到这一点。

要开始使用 Browserify ，您需要首先通过 NPM 全局安装它

npm install -g browserify

然后在您的项目中，获取您想要包含的前端库，例如 angular 库

npm install --save angular

现在您需要使用require() 让 Browserify 了解它需要获取的依赖项才能使项目工作（如果是 Angular 应用程序，您定义了主模块，请添加第一行）

var angular = require('angular');

angular
  .module('autocompleteDemo', [])
  .controller('DemoCtrl', DemoCtrl);

要设置 grunt-browserify 任务，首先在项目中安装它

npm install grunt-browserify --save-dev

并按如下方式配置任务

browserify: {
    main: {
        src: 'entry.js',
        dest: 'bundle.js'
    }
 }

最后在您的 index.html 中，您需要为 bundle.js 脚本添加标记

<script src="bundle.js"></script>

示例代码可以在https://github.com/pra85/grunt-browserify-example找到

【讨论】：

CSS 的自动注入呢？
这可以通过使用名为 parcelify 的 broswerify 插件来完成，如果您直接通过命令行运行它，但使用 Grunt 我无法使其工作，我已经打开那里有一个问题（github.com/rotundasoftware/parcelify/issues/39），希望有人能建议如何成功整合它
这不是 OP 所要求的，并且会导致许多人找到比所需更复杂的解决方案。