如何管理多个grunt-browserify捆绑包中的相对路径别名?

寿木

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

  1. 如何require('module')代替require('../../src/module')使用require('./module')
  2. 如何./index.jsspec/specs.js不重复工作的情况下重复使用?(并阻止src/app.js其作为输入模块运行)。

我已经开始了几个基于浏览器的项目,并且喜欢browserify和grunt。但是每个项目都在我的开发/学习曲线中的同一时刻死去。一旦我将测试添加到组合中并必须管理两个browserify捆绑包(app.jsspec/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
  1. 使用一个条目文件(src/app.js),并进行代码遍历以捆绑所有必需的模块。
  2. 使用browserify-shim作为别名jquery
  3. 只是别名而jquery-ui没有垫片(在您之后需要var $ = require('jquery'))。
  4. 将所有帮助程序和规范文件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!!!
});

伤心

总结一下:我该如何...

  1. require('module')代替require('../../src/module')require('./module')
  2. 重用./index.jsspec/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,那么无论执行require的.js文件位于何处,都可以像这样要求它:

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

2。

不确定这一点。您的项目结构显示了一个spec/index.js,但您提到了spec/specs.js他们应该是同一文件吗?

无论如何,您在说什么重复的工作?因为与相比./index.js具有不同的条目文件spec/index.js如果您正在寻找一种包含./index.js在中的方法specs/,那么也许可以在运行测试之前复制它,而不是从头开始构建它。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章