У меня проблемы с реализацией динамического импорта (возможно, я просто не понимаю концепцию).
У меня есть приложение 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
@NikosM. Нет, никогда об этом не слышал. Я постараюсь подробнее прочитать об этом, но в моей голове у меня не должно быть необходимости использовать какие-либо плагины для сборки, динамического импорта должно быть достаточно
попробуйте прочитать его: medium.com/js-dojo/…, и да, в конце вам понадобится @ babel / plugin-syntax-dynamic-import.
@ PlayMa256 Хорошо, я пытался следить за статьей, и, похоже, мне это удалось, но, к сожалению, это не то, что я хочу. Похоже, что Babel / Webpack необходимо обработать куски, прежде чем они смогут их найти. Под этим я подразумеваю сгенерировать 0.js (или bundle.0.js в статье) из моего TestChunk.js. Это хорошо для разделения кода, но неприменимо в моем случае. Я хочу иметь возможность загрузить TestChunk.js на рабочий сервер, и сервер должен обработать этот файл. Это означает, что webpack будет собирать Home.js и TestChunk.js отдельно, и он не знает о TestChunk.js, когда собирает Home.js.
динамический import НЕ поддерживается для директив import (только статический import), возможно, у плагина babel есть обходной путь, иначе попробуйте использовать динамический require, если это возможно. require может быть динамическим, но работает в узле, иначе просто динамически добавьте тег скрипта на свою веб-страницу.






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