Импорт по требованию модуля внутри класса метода в javascript ES6 - PullRequest
Новая
       19

Импорт по требованию модуля внутри класса метода в javascript ES6

1 голос
/ 10 января 2020

Я хотел бы знать, возможно ли достичь этого сценария:

  1. Загрузка по требованию модуля через динамический c импорт внутри метода класса
  2. После загрузки с помощью динамического импорта c вызовите их методы

Ссылка на кодсанбокс этой идеи кода. 

"use strict"
import ModuleC from '../lib/c'

export default class A extends ModuloC {

    constructor(){        
        console.log("module a");
        super();
    }

    printA(){

        // HERE it's the dynamic import which it's NOT working
        import('./b.js').then((i)=>{
            let foo=new i();
            foo.printB();
        })

        // Dont work too :(
        // const lazy = async () =>{
        //     const module = await import ("./b.js");
        //     module.printB();
        // }
        // lazy();
    }
}

Ожидаемый результат: 

module a
modulo c 
painting module a 
module b
get inside from the promise: painting module b

Снимок экрана консоли вывода ошибок:

Uncaught (в обещании) Ошибка типа: я не являюсь конструктором

error output console

Мысли: 

1) Maybe in ES6 it can't be done, and if in ES5?? (or other javascript class way)
2) Or there is still no way to achieve this yet ...

Технологии, которые я использую :

  • babel 7.7.7
  • webpack 4.41.5
  • ES6 javascript
  • конфигурации пакетов json ниже.

пакет. json: 

{
  "devDependencies": {
    "@babel/cli": "^7.7.7",
    "@babel/core": "^7.7.7",
    **"@babel/plugin-syntax-dynamic-import": "^7.7.4",**
    "@babel/preset-env": "^7.7.7",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10"
  },
  "scripts": {
    "build-webpack": "webpack --watch --config webpack.config.js",
    "build-babel": "babel src -d lib --watch"
  }
}

.babelr c: 

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-syntax-dynamic-import"]
  }

webpack.config. js: 

const path = require('path');

module.exports = {
  mode: 'development',
  entry: './src/app.js',
  output: {    
    filename: 'bundle-salida.js',
    chunkFilename: '[name].bundle.js',
    path: path.join(__dirname, '/bundle/'),
  },
  optimization: {
    splitChunks: {
      chunks: "all",
      minSize: 0
    }
  }
};
...