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);
    }
}

标签： javascriptwebpackimportes6-modulesdynamic-import

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);
          });
        }
      });

你能试试上面的代码，看看你是否在控制台中获得类