Node.js   发布时间:2022-04-24  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了gruntjs – 如何在多个grunt-browserify包中管理相对路径别名?大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这是很长,但我需要代码示例来说明我的困惑。之后,我感兴趣的答案如下:

>如何使用require(‘module’)而不是require(‘../../ src / module’)或require(‘./ module’)?
>如何在spec / specs.js中重用./index.js,而不重复工作? (并防止src / app.js作为输入模块运行)。

我已经开始了几个基于浏览器的项目,爱browserify和咕噜。但每个项目在我的发展/学习曲线的同一点死亡。一旦我添加测试到组合,并且必须管理两个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中的所有帮助程序和spec文件作为条目模块。

我将逐步完成我的配置:

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: '$'
    }
  },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作为输入模块运行)。

解决方法

这些答案取决于你的项目的其余部分如何设置,但也许这是一个很好的起点。此外,您将需要使用grunt-browserify的当前v2测试版实际工作(npm install grunt-browserify @ 2)。

1。

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

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

假设你有一个模块在src / modules / magic / stuff.js,那么你可以像这样要求,无论在哪里的.js文件,正在做需求的位置:

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

2。

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

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

大佬总结

以上是大佬教程为你收集整理的gruntjs – 如何在多个grunt-browserify包中管理相对路径别名?全部内容,希望文章能够帮你解决gruntjs – 如何在多个grunt-browserify包中管理相对路径别名?所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。