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

Webpack-动态导入类

1 个答案: