javascript - grunt-browserify aliasMapping 两层深度

标签 javascript gruntjs browserify

所以我有一个文件目录,其中两个文件直接位于文件夹中:

views/view1.js
views/view2.js

但嵌套更深一层

views/other/view3.js

我想使用别名映射通过 grunt-browserify 编译它们,这样我就可以要求它们:

require('view1')

require('view2')

require('other/view3')

所以我在 grunt-browserify 配置中设置了简单的映射:

{
  expand: true,
  cwd: 'views/',
  src: ['**/*.js'],
  dest: ''
}

前两个文件 require() 没问题,但找不到最后一个。我正在使用的别名映射只是在一个层次上寻找深度。我怎样才能让它下降到我给它的每个级别?

最佳答案

整个 aliasMappings 选项似乎已损坏,因为我什至无法让他们的映射示例正常运行。我找到了另一个使用 aliasify 的解决方案(感谢 byronwong 对于 this code )。这就是我的工作 Gruntfile 的样子:

var util = require('util');
var aliasify = require('aliasify');

module.exports = function(grunt) {

  // takes grunt-browserify aliasMappings config and converts it into an aliasify config.
  function configureAliasify(aliasMappings) {
    var expandedAliases = {};
    aliases = util.isArray(aliasMappings) ? aliasMappings : [aliasMappings];
    aliases.forEach(function (alias) {
      grunt.file.expandMapping(alias.src, alias.dest, {cwd: alias.cwd}).forEach(function(file) {
        var expose = file.dest.substr(0, file.dest.lastIndexOf('.'));
        expandedAliases[expose] = './' + file.src[0];
      });
    });

    return require('aliasify').configure({
      aliases: expandedAliases
    });
  }

  // Create alias mappings with aliasify
  var aliasMappings = configureAliasify({
    cwd: 'views',
    src: ['**/*.js'],
    dest: ''
  });

  // Project configuration.
  grunt.initConfig({
    browserify: {
      dist: {
        files: {
          'build/app.js': ['client/entry.js']
        },
        options: {
          debug: true,
          transform: [aliasMappings]
        }
      }
    }
  });

  // Load the plugin that provides the "browserify" task.
  grunt.loadNpmTasks('grunt-browserify');

  // Default task(s).
  grunt.registerTask('default', ['browserify']);

};

client/entry.js 文件现在可以要求 views 目录中的所有文件作为别名。

请注意,虽然上述解决方案有效,但不再为 tagify 维护 aliasify .但是,tagifyaliasify 有根本的不同,所以不太确定使用该库的解决方案会是什么样子。

更新:经过更多调整后,我意识到没有必要使用aliasifytagify。所需要的基本上是一个采用 aliasMapping 并返回 alias 数组的映射函数。这或多或少是 grunt-browserify 应该对 aliasMapping 做的事情,但由于某些原因它不起作用。这就是我最终得到的:

var util = require('util');

module.exports = function(grunt) {

  // Takes grunt-browserify aliasMappings config and converts it into an alias array
  function aliasMappingsToAliasArray(aliasMappings) {
    var aliasArray = [];
    aliases = util.isArray(aliasMappings) ? aliasMappings : [aliasMappings];
    aliases.forEach(function (alias) {
      grunt.file.expandMapping(alias.src, alias.dest, {cwd: alias.cwd}).forEach(function(file) {
        var expose = file.dest.substr(0, file.dest.lastIndexOf('.'));
        aliasArray.push('./' + file.src[0] + ':' + expose);
      });
    });
    return aliasArray;
  }

  // Project configuration.
  grunt.initConfig({
    browserify: {
      dist: {
        files: {
            'build/app.js': ['client/entry.js']
        },
        options: {
          debug: true,
          alias: aliasMappingsToAliasArray({
            cwd: 'shared',
            src: ['**/*.js'],
            dest: ''
          })
        }
      }
    }
  });

  // Load the plugin that provides the "browserify" task.
  grunt.loadNpmTasks('grunt-browserify');

  // Default task(s).
  grunt.registerTask('default', ['browserify']);

};

关于javascript - grunt-browserify aliasMapping 两层深度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/20134063/

相关文章:

browserify - require 之前作为 import 语句被调用

javascript - 在提交/部署之前检测 Browserify 损坏的构建

javascript - 在 $.ajax() 函数内分配变量

javascript - Sails.js:特定于 socket.io 的策略

javascript - 迭代 JS 对象元素并更改它们

javascript - HTML5 拖放,放下的 div 从放下的位置移动一点

javascript - Grunt Uglify 通配符和版本控制

javascript - 如何以编程方式读取和解析 gruntfile 以便我可以修改它并再次保存?

gruntjs - 我应该如何配置 grunt-usemin 来使用相对路径

javascript - 浏览数据表