如何在多个grunt-browserify软件包中管理相对路径别名？ [英] How do I manage relative path aliasing in multiple grunt-browserify bundles?

问题描述

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

1. 如何使用 require（'module'） 而不是 require（'../../ src / module'）或 require（'./ module' ）？


2. 如何在 spec中重复使用 ./ index.js /specs.js 没有重复工作？ （并防止 src / app.js 因为它是一个入口模块）

我已经开始了几个基于浏览器的项目，喜欢 browserify 和咕噜。但是每个项目都会在我的开发/学习曲线中死去。一旦我将测试添加到组合中，并且必须管理两个 browserify 软件包（ app.js 和 spec / specs.js ）整个系统崩溃了。我会解释：

我使用 grunt-browserify 和设置我的初始目录：

 。 
├──Gruntfile.js 
├──index.js（通过grunt-browserify生成）[1] 
├──lib 
│├──jquery 
││└──jquery.js [2] 
│└──jquery-ui 
│└──jquery-ui.js [3] 
├──spec 
│├──specs.js（通过grunt-browserify生成）[4] 
│└──src 
│├──spec_helper.js（entry）
│└──module_spec .js（entry）
└──src 
├──app.js（entry）
└──module.js 
  

1. 使用一个入口文件（ src / app.js ）并执行一个代码使用browserify-shim别名 jquery 。
使用browserify-shim将所有必需模块捆绑在一起。

2. 只有 jquery-ui 没有垫片（在 var $ = require（'jquery'））。


3. 我们将 spec / src 中的所有帮助程序和规范文件作为入口模块。

  browserify：{
 dist：{
 files：{
'index.js'：['src / app.js'] 
} 
} 
} 
 
 //在app.js中
 var MyModule = require（'./ module'）; //<  - 需要相对路径？ 
  

Happy
<现在添加jquery：

  browserify：{
 options：{
 shim：{
 jquery：{
 path：'lib / jquery / jquery.js'，
 exports：'$'
} 
}，
 noParse：['lib / ** / *。js']，
别名：[
'lib / jquery-ui / jquery-ui.js：jquery-ui'
] 
}，
 dist：{
档案：{
'index.js'：['src / app.js'] 
} 
} 
} 
 
 //在app.js 
 var $ = require（'jquery'）; 
 require（'jquery-ui'）; 
 var MyModule = require（'./ module'）; 
  

Happy

现在添加规格：

 选项：{
 shim：{
 jquery：{
路径：'lib / jquery / jquery.js'，
出口：'$'
} 
}，
 noParse：['lib / ** / *。js' ]，
别名：[
'lib / jquery-ui / jquery-ui.js：jquery-ui'
] 
}，
 dist：{
档案：{
'app.js'：'src / app.js'
} 
}，
规格：{
档案：{
'spec / specs.js'：['spec / src / ** / * helper.js'，'spec / src / ** / * spec.js'] 
} 
} 
 
 //在app.js 
 var $ = require（'jquery'）; 
 require（'jquery-ui'）; 
 var MyModule = require（'./ module'）; 
 
 //在spec / src / module_spec.js中
 describe（MyModule，function（）{
 var MyModule = require（'../../ src /模块'）; //<  - 这看起来像屁股!!! 
}）; 
  

悲伤

<总结：我如何......

$ b $ ol <

使用 require（'module'）而不是 require（'../../ src / module'）或 require（'./ module'）

重复使用 ./ index.js 在 spec / specs.js 没有重复工作？ （并防止 src / app.js 因为它是一个入口模块）

解决方案

这些答案取决于您的项目的其余部分是如何设置的，但也许这是一个很好的起点。此外，您需要使用grunt-browserify的当前v2 beta来实际运行（ npm install grunt-browserify @ 2 ）。

1。

您可以使用 aliasMapping 为您的模块创建一些动态别名。为了清楚起见，可以将所有模块移动到 src / modules / 。然后，aliasMapping配置可以是这样的：

  options：{
 aliasMappings：{
 cwd： 'src'，
 src：['modules / ** / *。js'] 
} 
} 
  

假设你在 src / modules / magic / stuff.js 中有一个模块，那么你可以这样要求它，不管

  var magicStuff = require（'modules / magic / stuff.js ）; 
  

2。

不知道这个。您的项目结构显示 spec / index.js ，但您提到 spec / specs.js 。他们应该是同一个文件吗？

不管怎样，你在说什么重复的工作？因为 ./ index.js 具有与 spec / index.js 不同的入口文件。如果您正在寻找在规格/ 中包含 ./ index.js 的方法，那么您可以复制它在运行测试之前，而不是从头构建它。

This is tad long but I'll need the code example to illustrate my confusion. After which I am interested to the answer for the following:

1. How do I use require('module') instead of require('../../src/module') or require('./module')?
2. How do I reuse ./index.js in spec/specs.js without duplicating work? (And preventing src/app.js from running as it's an entry module).

I've started several browser based projects already and love browserify and grunt. But each project dies at the same point in my development/learning curve. Once I add testing to the mix and have to manage two browserify bundles (app.js and spec/specs.js) the whole system falls apart. I'll explain:

I use grunt-browserify and set my initial directory:

.
├── 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

1. Uses one entry file (src/app.js) and does a code walk to bundle all required modules.
2. Uses browserify-shim to alias jquery.
3. Is just aliased to jquery-ui without a shim (required after you var $ = require('jquery')).
4. Uses all helper and spec files in spec/src as entry modules.

I'll step through my config:

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

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

Happy

Now add 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');

Happy

Now add specs:

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!!!
});

Sad

To summarize: How do I...

1. Use require('module') instead of require('../../src/module') or require('./module')?
2. reuse ./index.js in spec/specs.js without duplicating work? (And preventing src/app.js from running as it's an entry module).

解决方案

These answers depend on how the rest of your project is setup, but maybe it's a good starting point. Also, you will need to use current v2 beta of grunt-browserify for this to actually work (npm install grunt-browserify@2).

1.

You can use aliasMapping to create some dynamic aliases for your modules. Just for clarity, lets move all your modules to src/modules/. Then, aliasMapping configuration could be something like this:

options: {
  aliasMappings: {
    cwd: 'src',
    src: ['modules/**/*.js']
  }
}

Lets suppose you have a module in src/modules/magic/stuff.js, then you can require it like this, regardless of where the .js file that's doing the require is located:

var magicStuff = require('modules/magic/stuff.js');

2.

Not sure about this one. Your project structure shows a spec/index.js, but you mention spec/specs.js. Are they supposed to be the same file?

Anyways, what duplicate work are you talking about? Because ./index.js has a different entry file than spec/index.js. If you are looking for a way to include ./index.js in specs/, then maybe you can copy it before running the tests instead of building it from scratch.

这篇关于如何在多个grunt-browserify软件包中管理相对路径别名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！