是否有像grunt-wiredep这样的注入器可以用于NPM依赖关系？ [英] Is there an injector like grunt-wiredep that works for NPM dependencies?

问题描述

现在大多数软件包都可以在NPM和Bower中使用。我必须有NPM，但是我想将Bower从我的项目的循环中删除。

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

是否有一种工具可以为NPM依赖项提供相同的功能？ 您可以使用模块打包程序，如 Browserify 或 Webpack 。

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

  npm install -g browserify 
  

然后在您的项目中，得到你想要包含的前端库，比如像角库

  npm install --save angular 
  

现在您需要使用 require（）来使Browserify识别它需要为工程提取工作的依赖关系（在Angular的情况下）在你定义主模块的地方，添加第一行）

  var angular = require（'angular'）; 
 
 
 .module（'autocompleteDemo'，[]）
 .controller（'DemoCtrl'，DemoCtrl）; 
  

要设置grunt-browserify任务，请先将其安装到项目中。
$ b

  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

Most packages nowadays are available in both NPM and Bower. I have to have NPM around, but I'd like cut Bower out of the loop on my project.

I'm currently relying on grunt-wiredep to create <script> includes in my index.html. This tool looks at all of the Bower configs to pull all the necessary js and css files into my index.html for me.

Is there a tool that will do the same for NPM dependencies?

解决方案

You would be able to do that using a module bundler like Browserify or Webpack.

For getting started with Browserify , you will need to first install it via NPM globally

npm install -g browserify

Then in your project , get the frontend library you want to include , like for example the angular library

npm install --save angular

Now you will need to use require() to make Browserify aware of the dependencies that it needs to fetch for the project to work (In case of Angular app, where you define the main module , add this first line)

var angular = require('angular');

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

For setting up the grunt-browserify task , first install it in the project

npm install grunt-browserify --save-dev

and configure the task as follows

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

Lastly in your index.html , you will need to add markup for the bundle.js script

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

Example code can be found at https://github.com/pra85/grunt-browserify-example

这篇关于是否有像grunt-wiredep这样的注入器可以用于NPM依赖关系？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！