使用多个baseurls ES6异步模块 [英] ES6 async modules using multiple baseurls

问题描述

该ES6模块系统似乎是统一CommonJS的/ AMD语法适当的配合。作为requireJs / AMD的用户，我想转换为ES6模块（使用babel.js现在）。

The ES6 module system seems to be a proper fit for unifying the CommonJs / AMD syntaxes. As a requireJs/AMD-user I'd like to convert to ES6 modules (using babel.js for now).

似乎有不过一个问题;通过阅读该文档和教程，似乎没有成为可能，以便加载在一个以上的baseURL时dependendent模块包。使用requireJs这是可以解决的使用背景字段：

There seems to be one problem though; reading through the docs and tutorials, there doesn't seem to be possible to load module packages that are dependendent on more than one baseurl. Using requireJs this is solvable using the context field:

// async dependencies are loaded from http://path/to/domain
var contextedRequire1 = require.config({
  baseUrl: 'http://path/to/domain/js',
  context: 'mainContext'
});    

// async dependencies are located on http://path/to/otherdomain
var contextRequire2 = require.config({
  baseUrl: 'http://path/to/otherdomain/js',
  context: 'pluginContext'
});

contextedRequire1(['main.js'], function(main){
  // loaded using http://path/to/domain/js/main.js
  contextedRequire2(['plugin-lazyloading-deps.js'], function(plugin){
    plugin.init();
  });
});

在main.js

define(['main-deps'], function(mainDeps){
  // loaded using http://path/to/domain/js/main-deps.js
})

在插件-惰性加载-deps.js

define(['require'], function(require){
  // loaded using http://path/to/otherdomain/js/plugin-lazyloading-deps.js
  if(Modernizr.touch) {
    require(['hammer'], function(){
      // loaded using http://path/to/otherdomain/js/hammer.js
      hammer.init();
    })
  }
})

在ES6异步模块导入，这是不可能的，因为系统是一个单

In ES6 async module imports this isn't possible, since System is a singleton

System.baseURL = "http://path/to/domain/js";
System.import("main").then(function(main){
  // loaded using http://path/to/domain/js/main.js

  // This will potentially break when main.js tries to load hammer.js from http://path/to/domain/js
  System.baseURL = "http://path/to/otherdomain/js";
  System.import("plugin-lazyloading-deps").then(function(){ /** code **/ });
});

我的问题是：是否有东西，我已经错过了（可以通过继承系统要能够配置几个baseUrls）的文档，或者是这个东西在作品中为未来的模块扩展，

My question is: Is there something in the docs that I've missed (possible to subclass System to be able to config several baseUrls), or is this something in the works for future module extensions?

推荐答案

看起来好像System.js有一个（无证）的方式 - 通过使用的Object.create（系统）扩展系统对象。

It seems as if System.js has an (undocumented) way - by extending the System object using Object.create(System).

var context1 = Object.create(System);
context1.baseURL = 'http://path/to/otherdomain/js';
context1.import('plugin-lazyloading-deps').then(function(m){
  m.setSystem(context1);
  m.initialize();
));

请注意，直到系统对象在浏览器/的NodeJS实现，这种方法可能会断裂。希望虽然，同样的效果可以用是可以实现的类CONTEXT1在ES6扩展系统。

Please note that until the System object is implemented in browsers/nodeJs, this approach may break. Hopefully though, the same effect may be achievable using class context1 extends System in ES6.

的实施是不是100％相似requireJs，因为它无法从范围上下文中注入目前的情况下，以异步加载其他模块（即在require'的依赖需要与<$ C被替换$ C> m.setSystem（..）或类似）。

The implementation is not 100% analogous to requireJs, since it's not possible to inject the current context to async-load other modules from within a scoped context (ie. the 'require'-dependency needs to be replaced with m.setSystem(..)or similar).

这篇关于使用多个baseurls ES6异步模块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！