grunt-browserify aliasMapping 两层深度答案

【问题标题】：grunt-browserify aliasMapping two levels deepgrunt-browserify aliasMapping 两层深度
【发布时间】：2013-11-21 23:27:32
【问题描述】：

所以我有一个文件目录，其中两个文件立即位于该文件夹中：

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() 没问题，但最后一个找不到。我正在使用的别名映射只看一个层次的深度。我怎样才能让它下降到我给它的每个级别？

【问题讨论】：

**/*.js 应该可以工作，你能用-v 标志运行它吗？也许给我们你正在使用的包的版本号，包括节点。

标签： javascript gruntjs browserify

【解决方案1】：

整个aliasMappings 选项似乎坏了，因为我什至无法让他们的映射示例正常工作。我找到了另一个使用aliasify 的解决方案（感谢byronwong for 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 目录中存在的所有文件作为别名。

请注意，虽然上述解决方案有效，但 aliasify 不再支持 tagify。但是，tagify 与 aliasify 根本不同，因此不太确定使用该库的解决方案会是什么样子。

更新：经过一番折腾，我意识到没有必要使用aliasify 或tagify。需要的基本上是一个映射函数，它接受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']);

};

【讨论】：

你太棒了！现在我要修复所有路径:-)
不客气！请检查我添加到 github 问题的评论。它不会在监视期间按预期工作，因为它不会更新映射。但如果你能忍受它就会很好:)
@FakeRainBrigand 如果它回答了您的问题，请不要忘记接受这个答案:)
我希望我能；不幸的是，这原本不是我的问题。

【解决方案2】：

aliasMapping 配置现在在 v2 测试版中按预期工作。

你可以用npm install grunt-browserify@2安装它

【讨论】：

aliasMapping 已从 grunt-browserify 中删除。新选项现在是alias，它实际上并不是直接替代品。查看 Marcus Ekwall 更新的代码，我正在使用类似的方法并且效果很好。