Блог

Главная - Вопросы по программированию - существует ли какой-либо способ динамического импорта из модулей узлов

существует ли какой-либо способ динамического импорта из модулей узлов

#import #node-modules #ace-editor #dynamic-import

Вопрос:

интересно, есть ли какой-нибудь способ импортировать динамику из узлов-модулей? например, импорт( ace-builds/src-noconflict/mode-${file} для Ace-редактора

Комментарии:

1. используете ли вы webpack или какой-либо другой пакет?

2. Я использую веб-пакет ace editor

3. с webpack динамический импорт должен работать из коробки. Я могу помочь найти ошибку, если вы покажете мне пример нерабочего кода

4. я не знал, что для этого есть веб-пакет, как я могу показать вам свою точную проблему?

5. поделитесь своим кодом или примером, воспроизводящим проблему на github

Ответ №1:

С webpack есть две возможности. Во-первых, использовать import() путем перезаписи ace.config.loadModule 

 import ace from "ace-builds"
ace.config.setDefaultValue("session", "useWorker", false)
ace.config.loadModule = function(moduleName, onLoad) {
    var module, moduleType;
    if (Array.isArray(moduleName)) {
        moduleType = moduleName[0];
        moduleName = moduleName[1];
    }
    var done = m=>{
        console.log(moduleName, "loaded")
        onLoad amp;amp; onLoad(m)
    };
    console.log(moduleName)
    var parts = moduleName.split("/");
    if (parts[1] == "ext") {
        import(`ace-builds/src-noconflict/ext-${parts[2]}`).then(done);
    } else if (parts[1] == "theme") {
        import(`ace-builds/src-noconflict/theme-${parts[2]}`).then(done);
    } else if (parts[1] == "mode") {
        import(`ace-builds/src-noconflict/mode-${parts[2]}`).then(done);
    } else if (parts[1] == "keyboard") {
        import(`ace-builds/src-noconflict/keybinding-${parts[2]}`).then(done);
    } else if (parts[1] == "snippets") {
        import(`ace-builds/src-noconflict/snippets/${parts[2]}`).then(done);
    } else {
        console.error(moduleName, "not implemented")
    }
}

второй способ-использовать загрузчик файлов, добавив

 import "ace-builds"
import "ace-builds/webpack-resolver"

оба работают с вашим примером при добавлении в https://github.com/saba-bg/Ace-editor-dynamic-mode-import/blob/016928b521ebc5fd5b39c52352dafddd99d9df6b/src/editor/Ace.js#L7, вместо части languages.map

Метки: