es6-module-loader 找不到没有 .js 扩展名的模块

Question

我正在将一个使用 System.import 的应用程序从 traceur 移植到 Babel。我的简化 HTML 看起来像这样：

<script src="../node_modules/babel-core/browser.js"></script>
<script src="../node_modules/es6-module-loader/dist/es6-module-loader-dev.js"></script>
<script> 
    System.transpiler = 'babel';
    System.import('./css');
</script>

这给了我

Uncaught (in promise) File not found: http://connect:8000/sam/css
    Error loading http://connect:8000/sam/css

如果我改为指定 ./css.js，扩展名为 .js，它就可以工作。但是，然后在 css.js 内部和整个系统中以

的形式导入

import 'foo';

失败。

es6-module-loader 似乎需要 .js 扩展。我注意到了some commit in es6-module-loader involving the demo page which adds .js extension to the names of imports. On this page，我也看到了

.js extensions are also no longer added by default. These changes are part of the transition into the new specification work. See the discussion at whatwg/loader#52 for further information. .js extension adding can easily be added back if needed with a custom hook.

但是不知道指的是什么钩子，也不知道怎么写。

我知道在浏览器中动态加载和转译可能并不理想，也不是一种可靠的生产方法。但是，这个特定的应用程序会动态加载单个 ES6 文件，我需要暂时坚持这样做。

我的问题是：es6-module-loader 是否需要 .js 扩展名，或者有什么方法可以告诉它默认查找 .js 个文件？

Answer 1

根据 https://github.com/ModuleLoader/es6-module-loader/blob/master/docs/loader-extensions.md:

上的文档，我最终覆盖了 locate 挂钩

var systemLocate = System.locate;                                                                  
System.locate = function(load) {                                                                   
  var System = this; // its good to ensure exact instance-binding                                  
  return Promise.resolve(systemLocate.call(this, load)).then(function(address) {                   
    return address + '.js';                                                                        
  });                                                                                              
}

es6-module-loader 找不到没有 .js 扩展名的模块

es6-module-loader cannot find module without .js extension

babeljs

es6-module-loader