Webpack-动态导入类 [英] Webpack - Dynamically importing a class

问题描述

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

I'm trying to dynamically import a class when a router condition is met.

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

I have no problems importing a standard (non-class) module, as this works as expected:

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

但是尝试对类进行相同操作无法正常工作.

But trying to do the same with a class is not working as expected.

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

哪个失败"e.initialise不是一个函数"；

Which fails 'e.initialise is not a function';

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

I also try to instantiate the class by using the new keyword:

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

但仍然没有喜悦！

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

How do I dynamically import a class in this scenario?

更新:

这是我的Map模块(作为非类模块)，可以正常工作:

This is my Map module, as a non-class module, which works:

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

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

This is the same module but as a Class:

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

推荐答案

  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

can you try the above code and see are you getting Class in console

这篇关于Webpack-动态导入类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！