gruntjs - 如何管理多个 grunt-browserify 包中的相对路径别名？

Question

这有点长，但我需要代码示例来说明我的困惑。之后我对以下问题的答案感兴趣:

如何使用 require('module')而不是 require('../../src/module')或 require('./module') ?

如何重复使用 ./index.js在 spec/specs.js不重复工作？ (并阻止 src/app.js 运行，因为它是一个入口模块)。

我已经开始了几个基于浏览器的项目并且喜欢 browserify和 Grunt 。但是每个项目在我的开发/学习曲线的同一点上都死掉了。一旦我将测试添加到组合中并且必须管理两个 browserify捆绑( app.js 和 spec/specs.js )整个系统分崩离析。我会解释:

我用 grunt-browserify并设置我的初始目录:

.
├── Gruntfile.js
├── index.js  (generated via grunt-browserify)      [1]
├── lib
│   ├── jquery
│   │   └── jquery.js                               [2]
│   └── jquery-ui
│       └── jquery-ui.js                            [3]
├── spec
│   ├── specs.js  (generated via grunt-browserify)  [4]
│   └── src
│       ├── spec_helper.js  (entry)
│       └── module_spec.js  (entry)
└── src
    ├── app.js  (entry)
    └── module.js

使用一个入口文件 ( src/app.js ) 并执行代码遍历以捆绑所有必需的模块。

使用 browserify-shim 为 jquery 设置别名.

只是别名为 jquery-ui没有垫片(在 var $ = require('jquery') 之后需要)。

使用 spec/src 中的所有帮助程序和规范文件作为入口模块。

我将逐步完成我的配置:

browserify: {
  dist: {
    files: {
      'index.js': ['src/app.js']
    }
  }
}

// in app.js
var MyModule = require('./module'); // <-- relative path required?!

快乐

现在添加jquery:

browserify: {
  options: {
    shim: {
      jquery: {
        path: 'lib/jquery/jquery.js',
        exports: '$'
      }
    },
    noParse: ['lib/**/*.js'],
    alias: [
      'lib/jquery-ui/jquery-ui.js:jquery-ui'
    ]
  },
  dist: {
    files: {
      'index.js': ['src/app.js']
    }
  }
}

// in app.js
var $ = require('jquery');
require('jquery-ui');
var MyModule = require('./module');

快乐

现在添加规范:

options: {
  shim: {
    jquery: {
      path: 'lib/jquery/jquery.js',
      exports: '$'
    }
  },
  noParse: ['lib/**/*.js'],
  alias: [
    'lib/jquery-ui/jquery-ui.js:jquery-ui'
  ]
},
dist: {
  files: {
    'app.js': 'src/app.js'
  }
},
spec: {
  files: {
    'spec/specs.js': ['spec/src/**/*helper.js', 'spec/src/**/*spec.js']
  }
}

// in app.js
var $ = require('jquery');
require('jquery-ui');
var MyModule = require('./module');

// in spec/src/module_spec.js
describe("MyModule", function() {
  var MyModule = require('../../src/module'); // <-- This looks like butt!!!
});

伤心

总结一下:我怎么...

使用require('module')而不是 require('../../src/module')或 require('./module') ?

重复使用 ./index.js在 spec/specs.js不重复工作？ (并阻止 src/app.js 运行，因为它是一个入口模块)。

Answer 1

简单回答:

最简单的是使用paths browserify 的选项。我使用它几个月并取得了巨大的成功。我什至制作了一个使用此功能的入门工具包:https://github.com/stample/gulp-browserify-react-phonegap-starter

var b = browserify('./app', {paths: ['./node_modules','./src/js']});

paths - require.paths array to use if nothing is found on the normal node_modules recursive walk

如果您在 src/js/modulePath/myModule.js 中有文件这不会让你写 require("myModule")无处不在，而是 require("modulePath/myModule") ，来自您的任何其他源文件。

已弃用的选项？

好像不是这样!

Browserify 模块解析算法反射(reflect)了 resolution algorithm in NodeJS . paths Browserify 的选项因此是 NODE_PATH 的镜像NodeJS 的环境变量行为。
Browserify 作者(子堆栈)在此 SO 主题中声称 NODE_PATH选项在 NodeJS 中已弃用，因此它在 Browserify 中也已弃用，并且可以在下一个版本中删除。

我不同意这种说法。

见 NODE_PATH文档。没有提及该选项已被弃用。然而，仍然有一个有趣的提及是在子堆栈声明的方向上:

You are highly encouraged to place your dependencies locally in node_modules folders. They will be loaded faster, and more reliably.

和 this question已于 2012 年发布在邮件列表中。

Oliver Leics: is NODE_PATH deprecated? 
Ben Noordhuis (ex core NodeJS contributor): No. Why do you ask? 

如果在 NodeJS 解析算法中没有删除某些东西，我认为它不会很快从 Browserify 中删除:)

结论

您可以使用 paths选项或将您的代码放入 node_modules喜欢官方文档和 Browserify author recommends .

就个人而言，我不喜欢将自己的代码放在 node_modules 中的想法。因为我只是将整个文件夹排除在我的源代码管理之外。我使用 paths现在选择了几个月，根本没有任何问题，而且我的构建速度非常好。

子栈将符号链接(symbolic link)放入 node_modules 的解决方案可能很方便，但不幸的是，我们有开发人员在这里使用 Windows...

我认为有 不想使用 paths 的情况选项 :当您开发发布在 NPM 存储库上的库时，其他应用程序将需要该库。您真的不希望这些库客户端仅仅因为您想避免库中的相对路径 hell 而必须设置特殊的构建配置。

另一种可能的选择是使用 remapify