Динамический импорт с помощью webpack

У меня проблемы с реализацией динамического импорта (возможно, я просто не понимаю концепцию).

У меня есть приложение vue.js, написанное на typescript с webpack. Все фреймворки - последние стабильные версии. Я бы хотел, чтобы это приложение поддерживало компоненты плагина. Плагин определяется в конфигурации приложения, затем загружается с помощью динамического импорта и может быть где-нибудь показан.

Я установил две отдельные конфигурации в конфигурации Webpack, одну для приложения, другую для плагина:

webpack.config.js:

...
var main = Object.assign({
        entry: {
           Home: './ViewModels/Home/main.ts'
        },
        output: {
            path: path.join(__dirname, "./Scripts/dist/"),
            filename: "[name].js",
            chunkFilename: '[name].js'
        },
    },
    vueJsConfig);

var testChunkConfig = Object.assign({
        entry: {
           TestChunk: './ViewModels/Test/registrations.ts'
        },
        output: {
            path: path.join(__dirname, "./Scripts/dist/"),
            filename: "[name].js",
            chunkFilename: '[name].js'
        },
    },
    vueJsConfig);


module.exports = [main, testChunkConfig];

`~ / ViewModels / TestChunk / registrations.ts ':

import Vue from "vue";
Vue.component('testExternal', require('./testExternalComponent.vue').default);

`~ / ViewModels / Home / main.ts ':

...
let test = "TestChunk";
import(test);
...

Использование: ~/ViewModels/Components/ProjectAdministration/Test/projectAdminTest.vue

<template>
    <div>
        <h2>Test Page</h2>
        <testExternal></testExternal>
    </div>
</template>

К сожалению, это показывает ошибку:

Uncaught (in promise) Error: Cannot find module 'TestChunk'
    at eval (eval at ./ViewModels/Home lazy recursive

есть плагин babel под названием dynamic-import для динамического импорта плагинов в ваше приложение, он используется?

Nikos M. 07.11.2018 11:46

@NikosM. Нет, никогда об этом не слышал. Я постараюсь подробнее прочитать об этом, но в моей голове у меня не должно быть необходимости использовать какие-либо плагины для сборки, динамического импорта должно быть достаточно

Archeg 07.11.2018 11:57

попробуйте прочитать его: medium.com/js-dojo/…, и да, в конце вам понадобится @ babel / plugin-syntax-dynamic-import.

PlayMa256 07.11.2018 13:42

@ PlayMa256 Хорошо, я пытался следить за статьей, и, похоже, мне это удалось, но, к сожалению, это не то, что я хочу. Похоже, что Babel / Webpack необходимо обработать куски, прежде чем они смогут их найти. Под этим я подразумеваю сгенерировать 0.js (или bundle.0.js в статье) из моего TestChunk.js. Это хорошо для разделения кода, но неприменимо в моем случае. Я хочу иметь возможность загрузить TestChunk.js на рабочий сервер, и сервер должен обработать этот файл. Это означает, что webpack будет собирать Home.js и TestChunk.js отдельно, и он не знает о TestChunk.js, когда собирает Home.js.

Archeg 07.11.2018 14:14

динамический import НЕ поддерживается для директив import (только статический import), возможно, у плагина babel есть обходной путь, иначе попробуйте использовать динамический require, если это возможно. require может быть динамическим, но работает в узле, иначе просто динамически добавьте тег скрипта на свою веб-страницу.

Nikos M. 17.11.2018 10:52
Зод: сила проверки и преобразования данных
Зод: сила проверки и преобразования данных
Сегодня я хочу познакомить вас с библиотекой Zod и раскрыть некоторые ее особенности, например, возможности валидации и трансформации данных, а также...
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Как заставить Remix работать с Mantine и Cloudflare Pages/Workers
Мне нравится библиотека Mantine Component , но заставить ее работать без проблем с Remix бывает непросто.
Угловой продивер
Угловой продивер
Оригинал этой статьи на турецком языке. ChatGPT используется только для перевода на английский язык.
TypeScript против JavaScript
TypeScript против JavaScript
TypeScript vs JavaScript - в чем различия и какой из них выбрать?
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Синхронизация localStorage в масштабах всего приложения с помощью пользовательского реактивного хука useLocalStorage
Не все нужно хранить на стороне сервера. Иногда все, что вам нужно, это постоянное хранилище на стороне клиента для хранения уникальных для клиента...
Что такое ленивая загрузка в Angular и как ее применять
Что такое ленивая загрузка в Angular и как ее применять
Ленивая загрузка - это техника, используемая в Angular для повышения производительности приложения путем загрузки модулей только тогда, когда они...
0
5
951
0

Другие вопросы по теме