是否有像grunt-wiredep这样的注入器适用于NPM依赖?

Noa*_*mon 25 npm gruntjs bower grunt-wiredep wiredep

现在大多数包都可以在NPM和Bower中使用.我必须有NPM,但我想在我的项目中切断Bower.

我目前正依赖于grunt-wiredep创建<script>包含在我的index.html.这个工具查看所有Bower配置,将所有必要的js和css文件提取到我index.html的手中.

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

Pra*_*rma 17

您可以使用BrowserifyWebpack等模块捆绑器来实现.

要开始使用Browserify,您需要先在全球范围内通过NPM安装它

npm install -g browserify
Run Code Online (Sandbox Code Playgroud)

然后在您的项目中,获取要包含的前端库,例如角度库

npm install --save angular
Run Code Online (Sandbox Code Playgroud)

现在,您需要使用require()以使Browserify了解为项目工作所需的依赖项(如果是Angular应用程序,您可以在其中定义主模块,添加第一行)

var angular = require('angular');

angular
  .module('autocompleteDemo', [])
  .controller('DemoCtrl', DemoCtrl);
Run Code Online (Sandbox Code Playgroud)

要设置grunt-browserify任务,首先将其安装在项目中

npm install grunt-browserify --save-dev
Run Code Online (Sandbox Code Playgroud)

并按如下方式配置任务

browserify: {
    main: {
        src: 'entry.js',
        dest: 'bundle.js'
    }
 }
Run Code Online (Sandbox Code Playgroud)

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

<script src="bundle.js"></script>
Run Code Online (Sandbox Code Playgroud)

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

  • CSS的自动注入? (5认同)
  • 这不是OP所要求的,并且会导致许多人找到比必要时更复杂的解决方案. (2认同)