25

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

我目前依靠在我grunt-wiredep的. 该工具会查看所有 Bower 配置,以将所有必要的 js 和 css 文件提取到我的文件中。<script>index.htmlindex.html

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

4

1 回答 1

18

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

要开始使用 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找到

于 2015-09-14T19:07:20.800 回答