使用子项目集中项目中的node_modules [英] Centralise node_modules in project with subproject

问题描述

我有如下的项目结构

$ b $是否可以配置grunt以便在中心点上具有所需的模块？ b

   - 项目
  - 子项目
  - 子项目
  - 子项目
  

我通过grunt与所有子项目构建项目，我也可以为其自己构建每个子项目。
目前我有一个Gruntfile.js，package.json&文件夹node_modules（〜50mb），包含每个子项目中和根级别上所有必需的模块。

因此，只能在一个级别上使用node_modules文件夹。在根级和子项目上引用根级别的node_modules？

   - 项目
  - 子项目
 --subproject 
 --subproject 
 --node_modules 
  

一种通过package.json或其他方式引用node_module文件夹的方法

编辑：

Gruntfile.js （子项目级别）

  / *全局模块：false * / 
 / * jshint节点：true * / 
 
 module.exports = function（grunt）{
 
use strict; 
 
 // ======================================== ======================================== 
 //项目配置
 // ============================================== ================================== 
 grunt.initConfig（{
 pkg：grunt .file.readJSON（'package.json'），
 jshint：{
 globals：{
 d3：true，
 Modernizr：true，
节奏：true 
}，
选项：grunt.file.readJSON（'。jshintrc'）
}，
 csslint：{
子项目：{
 src：'css /**/*.css'
} 
}，
 htmllint：{
子项目：{
 src：'html / ** / *。html'
} 
}，
 clean：['output']，
 less：{
 options：{
 paths：['./'] 
}，
 src：{
 expand：true，
 cwd：'css /'，
 src：['** / *。less']，
 dest：'css /'， 
 ext：'.css'
} 
}，
复制：{
子项目：{
文件：[
 {src：[ 'img / **'，'js / **'，'folderX / **'，'！** / *。less']，dest：'output / subproject /'} 
] 
 } 
} 
}）; 
 
 grunt.loadNpmTasks（'grunt-contrib-clean'）; 
 grunt.loadNpmTasks（'grunt-contrib-jshint'）; 
 grunt.loadNpmTasks（'grunt-html'）; 
 grunt.loadNpmTasks（'grunt-css'）; 
 grunt.loadNpmTasks（'grunt-contrib-less'）; 
 grunt.loadNpmTasks（'grunt-contrib-copy'）; 
 
 // ======================================== ======================================== 
 //默认任务
 // ============================================== ================================== 
 grunt.registerTask（'default'，['clean' ，'less'，'csslint'，'htmllint'，'copy']）; 
}; 
  

package.json（subproejct级别）

<$
description：subproject，
title：Lorem Ipsum，
devDependencies：{
grunt-contrib-watch：〜0.2.0，
grunt-contrib-jshint：〜0.1.1，
grunt-contrib-less：〜0.5.0 ，
grunt-contrib-uglify：〜0.1.1，
grunt-contrib-copy：〜0.4.0，
grunt-contrib-qunit ：〜0.1.1，
grunt-css：〜0.5.4，
grunt-contrib-clean：〜0.4.0，
grunt-html：〜0.3.3，
grunt-contrib-concat：〜0.1.3
}
}

BR，
mybecks

解决方案

这可以直接使用。 npm 查找当前目录中的 node_modules ，并查找其所有父目录，然后查找全局位置。所以你甚至可以这样做：

   - 项目
 --subproject1 
 --- node_modules 
 --subproject2 
 --subproject3 
 --node_modules 
  

$ b $ subproject1 将可以访问 Project / subproject1 / node_modules 中的所有npms。和 Project / node_modules ，而 subproject2 和 subproject3 找到 Project / node_modules

更新

中的那些

有一个很少记录的功能称为grunt集合。它需要一些设置，但不需要每个子项目中所有grunt插件的副本。

这是文件格式

  -Project 
 --subproject1 
 --- node_modules 
 ---- grunt-collection 
 ----- package.json 
 --subproject2 
 ... 
 --subproject3 
 ... 
 --node_modules 
 --- grunt 
 --- grunt-contrib-concat 
 --- grunt-contrib-jshint 
 --- grunt-contrib-qunit 
 --- grunt-contrib-watch 
 --- grunt-html 
 --- grunt-contrib-clean 
 --- grunt-contrib-copy 
 --- grunt-contrib-less 
  - --grunt-contrib-uglify 
 --- grunt-css 
 --package.json 
  

Project / package.json

  {
description： subproject，
version：0.0.0，
name：Lorem，
title：Lorem Ipsum，
devDependencies ：{
grunt：*，
grunt-contrib-watch：〜0.2.0，
grunt-con trib-jshint：〜0.1.1，
grunt-contrib-less：〜0.5.0，
grunt-contrib-uglify：〜0.1.1， 
grunt-contrib-copy：〜0.4.0，
grunt-contrib-qunit：〜0.1.1，
grunt-css：〜〜 0.5.4，
grunt-contrib-clean：〜0.4.0，
grunt-html：〜0.3.3，
grunt-contrib- concat：〜0.1.3
} 
} 
  

Project / subproject1 / package.json

  {
description：subproject，
version：0.0.0，
name：Lorem，
title：Lorem Ipsum，
devDependencies：{
} 
} 
  

Project / subproject1 / Gruntfile.js 摘录（你只需要grunt-collection任务）。

  grunt.loadNpmTasks（'grunt-collection'）; 
 // grunt.loadNpmTasks（'grunt-contrib-jshint'）; 
 // grunt.loadNpmTasks（'grunt-html'）; 
 // grunt.loadNpmTasks（'grunt-css'）; 
 // grunt.loadNpmTasks（'grunt-contrib-less'）; 
 // grunt.loadNpmTasks（'grunt-contrib-copy'）; 
  

Project / subproject1 / node_modules / grunt-collection / package.json

  {
description：subproject，
version：0.0.0， 
name：Lorem，
title：Lorem Ipsum，
dependencies：{
grunt-contrib-watch：〜0.2。 0，
grunt-contrib-jshint：〜0.1.1，
grunt-contrib-less：〜0.5.0，
grunt-contrib- uglify：〜0.1.1，
grunt-contrib-copy：〜0.4.0，
grunt-contrib-qunit：〜0.1.1，
grunt-css：〜0.5.4，
grunt-contrib-clean：〜0.4.0，
grunt-html：〜0.3.3 ，
grunt-contrib-concat：〜0.1.3
}，
keywords：[gruntcollection] 
} 
  

关键是在每个子项目中创建一个只有package.json的小模块，其中包含关键字 gruntcollection 并包含dep

然后Grunt会使用相同的策略 require 来使用它们，这意味着它们可以是在你的父项目的 node_modules 中找到。

警告：grunt集合的工作方式是使用依赖项标签package.json，这意味着你不能用npm install来安装它，但你应该能够存储它的源代码控制。

is it possible to configure grunt in a way that you have the required modules on a central point?

I have following project structure

-Project
-- subproject
-- subproject
-- subproject

I build the project via grunt with all subprojects, and I can build each subproject for itself too. Currently I have a Gruntfile.js, package.json & folder node_modules (~50mb) with all required modules in each subproject and on the root level.

So is it possible to have the node_modules folder only on one level, for e.g. on the root level and the subprojects refer to the node_modules on root level?

-Project
--subproject
--subproject
--subproject
--node_modules

Is there a way to reference the node_module folder via package.json or anything else?

Edit:

Gruntfile.js (subproject level)

/*global module:false */
/*jshint node:true */

module.exports = function(grunt) {

    "use strict";

    // ================================================================================
    // project configuration
    // ================================================================================
    grunt.initConfig({
        pkg : grunt.file.readJSON('package.json'),
        jshint: {
            globals : {
                d3:true,
                Modernizr:true,
                tempo:true
            },
            options: grunt.file.readJSON('.jshintrc')
        },
        csslint: {
            subproject: {
                src: 'css/**/*.css'
            }
        },
        htmllint : {
            subproject: {
                src: 'html/**/*.html'
            }
        },
        clean : [ 'output' ],
        less : {
            options: {
                paths: ['./']
            },
            src: {
                expand: true,
                cwd:    'css/',
                src:    ['**/*.less'],
                dest:   'css/',
                ext:    '.css'
            }
        },
        copy: {
            subproject: {
                files: [
                    {src: ['img/**', 'js/**', 'folderX/**','!**/*.less'], dest: 'output/subproject/'}
                ]
            }
        }
    });

    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-jshint');
    grunt.loadNpmTasks('grunt-html');
    grunt.loadNpmTasks('grunt-css');
    grunt.loadNpmTasks('grunt-contrib-less');
    grunt.loadNpmTasks('grunt-contrib-copy');

    // ================================================================================
    // default task
    // ================================================================================
    grunt.registerTask('default', ['clean', 'less', 'csslint', 'htmllint', 'copy']);
};

package.json (subproejct level)

{
    "description": "subproject", 
    "title": "Lorem Ipsum", 
    "devDependencies": {
        "grunt-contrib-watch": "~0.2.0", 
        "grunt-contrib-jshint": "~0.1.1", 
        "grunt-contrib-less": "~0.5.0", 
        "grunt-contrib-uglify": "~0.1.1", 
        "grunt-contrib-copy": "~0.4.0", 
        "grunt-contrib-qunit": "~0.1.1", 
        "grunt-css": "~0.5.4", 
        "grunt-contrib-clean": "~0.4.0", 
        "grunt-html": "~0.3.3", 
        "grunt-contrib-concat": "~0.1.3"
    }
}

BR, mybecks

解决方案

This works out of the box. npm looks for node_modules in the current directory, and all its parent directories, then looks in the global location.

So you could even do this:

-Project
--subproject1
---node_modules
--subproject2
--subproject3
--node_modules

subproject1 will have access to all npms inside Project/subproject1/node_modules and Project/node_modules, while subproject2 and subproject3 will only find those inside Project/node_modules

Update

There is a very little documented feature called grunt collections. It requires a bit of a setup, but you won't need a copy of all your grunt plugins in each subproject.

Here's the file layout

-Project
--subproject1
---node_modules
----grunt-collection
-----package.json
--subproject2
...
--subproject3
...
--node_modules
---grunt
---grunt-contrib-concat
---grunt-contrib-jshint
---grunt-contrib-qunit
---grunt-contrib-watch
---grunt-html
---grunt-contrib-clean
---grunt-contrib-copy
---grunt-contrib-less
---grunt-contrib-uglify
---grunt-css
--package.json

Project/package.json

{
    "description": "subproject", 
    "version": "0.0.0",
    "name": "Lorem",
    "title": "Lorem Ipsum", 
    "devDependencies": {
        "grunt": "*",
        "grunt-contrib-watch": "~0.2.0", 
        "grunt-contrib-jshint": "~0.1.1", 
        "grunt-contrib-less": "~0.5.0", 
        "grunt-contrib-uglify": "~0.1.1", 
        "grunt-contrib-copy": "~0.4.0", 
        "grunt-contrib-qunit": "~0.1.1", 
        "grunt-css": "~0.5.4", 
        "grunt-contrib-clean": "~0.4.0", 
        "grunt-html": "~0.3.3", 
        "grunt-contrib-concat": "~0.1.3"
    }
}

Project/subproject1/package.json

{
    "description": "subproject", 
    "version": "0.0.0",
    "name": "Lorem",
    "title": "Lorem Ipsum", 
    "devDependencies": {
    }
}

Project/subproject1/Gruntfile.js excerpt (you only need the grunt-collection task).

grunt.loadNpmTasks('grunt-collection');
// grunt.loadNpmTasks('grunt-contrib-jshint');
// grunt.loadNpmTasks('grunt-html');
// grunt.loadNpmTasks('grunt-css');
// grunt.loadNpmTasks('grunt-contrib-less');
// grunt.loadNpmTasks('grunt-contrib-copy');

Project/subproject1/node_modules/grunt-collection/package.json

{
    "description": "subproject", 
    "version": "0.0.0",
    "name": "Lorem",
    "title": "Lorem Ipsum", 
    "dependencies": {
      "grunt-contrib-watch": "~0.2.0", 
      "grunt-contrib-jshint": "~0.1.1", 
      "grunt-contrib-less": "~0.5.0", 
      "grunt-contrib-uglify": "~0.1.1", 
      "grunt-contrib-copy": "~0.4.0", 
      "grunt-contrib-qunit": "~0.1.1", 
      "grunt-css": "~0.5.4", 
      "grunt-contrib-clean": "~0.4.0", 
      "grunt-html": "~0.3.3", 
      "grunt-contrib-concat": "~0.1.3"
    },
    "keywords": ["gruntcollection"]
}

The key is to create in each of your subproject, a small module with just a package.json which includes the keyword gruntcollection and includes the dependencies your Grunfile uses.

Grunt will then load these using the same strategy require uses, which means they can be found in the node_modules of your parent project.

Caveat: the way grunt collection works by using the dependency tag of package.json, this means you can not install it with npm install, but you should be able to store it source control.

这篇关于使用子项目集中项目中的node_modules的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！