如何配置RequireJS，加载特定扩展名文件时自动使用指定插件？

当然可以实现！RequireJS提供了灵活的钩子和配置项，能帮你自动为特定扩展名的模块绑定插件，完全不用手动写es6!myModule这种格式。下面是几种实用的实现方案：

方法一：通过onBeforeLoad钩子自动处理扩展名 #

这个方法会拦截所有模块加载请求，检查模块ID的扩展名，自动为匹配的模块添加插件前缀：

// 先配置RequireJS基础选项
requirejs.config({
  paths: {
    'es6': 'path/to/your/es6-plugin' // 确保插件路径配置正确
  }
});

// 注册加载前钩子，修改模块ID
requirejs.onBeforeLoad = function(context, moduleName) {
  // 检查模块ID是否以.es6结尾
  if (moduleName.endsWith('.es6')) {
    // 返回新的模块ID，自动带上es6插件前缀
    return 'es6!' + moduleName;
  }
  // 其他模块保持原加载逻辑，返回undefined即可
};

现在你只需要写require('myModule.es6')，RequireJS就会自动转换成require('es6!myModule.es6')加载，完全省去手动加插件前缀的麻烦。

方法二：结合默认扩展名实现无后缀调用 #

如果你想省略扩展名（比如直接写require('myModule')），可以把extensions配置和onBeforeLoad结合起来：

requirejs.config({
  paths: {
    'es6': 'path/to/your/es6-plugin'
  },
  extensions: ['.es6', '.js'] // 优先加载.es6文件，再尝试.js
});

requirejs.onBeforeLoad = function(context, moduleName) {
  // 无扩展名的模块，自动添加.es6并绑定插件
  if (!moduleName.includes('.')) {
    return 'es6!' + moduleName + '.es6';
  } else if (moduleName.endsWith('.es6')) {
    return 'es6!' + moduleName;
  }
};

这样你直接写require('myModule')，RequireJS就会自动尝试加载es6!myModule.es6，和WebPack的约定式配置逻辑类似。

方法三：按目录批量绑定插件 #

如果你的目标模块都集中在某个目录下（比如src/es6-modules/），可以用map配置实现目录级的自动插件绑定，这种方式更精准，不会影响其他模块：

requirejs.config({
  paths: {
    'es6': 'path/to/your/es6-plugin',
    'es6-modules': 'src/es6-modules' // 你的目标模块目录
  },
  map: {
    '*': {
      // 所有请求es6-modules/下的模块，自动用es6插件加载
      'es6-modules/': 'es6!es6-modules/'
    }
  }
});

现在加载require('es6-modules/myModule')时，就会自动转换成es6!es6-modules/myModule，非常适合模块分类清晰的项目。

需要注意的是，一定要确保你的插件（比如es6编译插件）已经正确安装并配置了路径，否则RequireJS会因找不到插件导致加载失败。

内容的提问来源于stack exchange，提问作者domokun