javascript - Webpack - 动态导入类

Question

我正在尝试在满足路由器条件时动态导入类。

我导入标准(非类)模块没有问题，因为它按预期工作:

Router.on({
    '/:region/map': (params) => {
      import("Controllers/map.js" /* webpackChunkName: "map" */).then(({map}) => {
        map.initialise(params.region);
      });
    }
});

但是尝试对类执行相同操作并不能按预期工作。

Router.on({
    '/:region/map': (params) => {
      import("Controllers/map.js" /* webpackChunkName: "map" */).then(Map => {
        Map.initialise(params.region);
      });
    }
});

失败“e.initialise 不是函数”；

我还尝试使用 new 关键字实例化该类:

Router.on({
    '/:region/map': (params) => {
      import("Controllers/map.js" /* webpackChunkName: "map" */).then(Map => {
        const MapClass = new Map();
        MapClass.initialise(params.region);
      });
    }
});

但还是没有喜悦!

在这种情况下如何动态导入类？

更新:

这是我的 map 模块，作为非类模块，可以工作:

var map = {
    initialise(region) {
        console.log("Map initialised for region: " + region);
    }
}
export { map };

这是同一个模块，但作为一个类:

export default class Map {
    constructor() {
        //
    }
    initialise(region) {
        console.log("Map initialised for region: " + region);
    }
}

Answer 1

  class Map {
    constructor() {
        //
    }
    initialise(region) {
        console.log("Map initialised for region: " + region);
    }
  } 

     export { Map }




      Router.on({
        '/:region/map': (params) => {
          import("Controllers/map.js").then(({ Map })=> {
            const MapClass = new Map();
            MapClass.initialise(params.region);
          });
        }
      });

你可以尝试上面的代码，看看你是否在控制台中获得了 Class