Как сделать динамические импорты?

Question

[ivankirshin]

У меня есть форма на вью. Форма должны использоваться на разных сайтах. На них нужны разные инпуты.
Понятно, что можно добавить в форму все виды инпутов и, например, использовать

< component :is='нужный инпут в зависимости от пропса'>

, либо тупо несколько форм в одной ифами.
Пока нашел для себя решение: сделать vue компонент для каждого сайта с двумя свойствами, в нем вызывать базовую форму через extends, а нужные компоненты брать миксином.
B хотелось бы не плодить файлы миксинов типо ComponentsForSomeSite.js, а сделать, например, функцию, которая бы возвращала нужные импорты.
Хотелось бы, чтобы выглядело как-то так. Можно ли сделать что-то подобное или подскажите, как лучше все организовать?

import PhoneInput from '@core/inputs/PhoneInput.vue';

export default function (type) {
    let CustomInput;

    if (type === 'material'){
        CustomInput = import('@core/inputs/MaterialInput.vue');
    }
    else {
        CustomInput = import('@core/inputs/BaseInput.vue');
    }
    return {
        components:{
            CustomInput,
            PhoneInput
        }
    }
};

Answer 1

[0xD34F]

Понятно, что можно добавить в форму все виды инпутов и, например, использовать

< component :is='нужный инпут в зависимости от пропса'>

Вот так и поступите. Регистрируете все возможные компоненты, сделав их асинхронными.

Comments

[ivankirshin]

Насколько я понимаю, для этого нужна соответствующая настройка вебпака.
Мне сложно объяснить, но тут вью используется не как spa, а пишутся лишь отдельные виджеты.
После сборки отдельные компоненты будут уже недоступны или это тоже как-то надо настраивать вебпаком.
Хочется, чтобы на этапе сборки был создан сразу же один правильный бандл

[0xD34F]

ivankirshin,

Хочется, чтобы на этапе сборки был создан сразу же один правильный бандл

И как это соотносится с "динамическим импортом" из заголовка вопроса? Шизофрения какая-то. Вы сперва определитесь, чего вам надо, а уж потом вопросы задавайте.

[ivankirshin]

0xD34F, ну я имел ввиду, чтобы можно было импортировать функцию, затем вызвать ее с параметром, а на выходе получить компонент.
В плане вебпака у меня до сих пор в голове каша, когда речь заходит о чем-то посложнее. Сильно не пинайте)

const ComponentsForMobila = ComponentsFunction('material')

    export default {
        extends: RegistrationForm,
        mixins: [ComponentsForMobila],
    }

Я думал, что вебпак как-то сможет сделать это на этапе сборки.
Судя по всему, вебпак сам не вытается исполнить код совсем, а включает в сборку только явные импорты

[0xD34F]

ivankirshin, кажется, понял. Попробуйте импортировать всё, а в вашей функции просто отдавать нужный компонент, как-то так:

import PhoneInput from '@core/inputs/PhoneInput.vue';
import MaterialInput from '@core/inputs/MaterialInput.vue';
import BaseInput from '@core/inputs/BaseInput.vue';

export default (type) => ({
  components: {
    PhoneInput,
    CustomInput: type === 'material' ? MaterialInput : BaseInput
  }
});

[ivankirshin]

0xD34F, такое работает, спасибо) но в сборку включаются оба инпута(
Можно ли что-то еще придумать? собирать проект гораздо сложнее, чем код писать(

[marsdenden]

ivankirshin, а вас напрягает размер сборки? Если так, то сделать примерно так (webpack 4)

webpack.config.js

var path = require('path')
var webpack = require('webpack')
const NODE_ENV = process.env.NODE_ENV || 'development';
const DEVMODE = NODE_ENV == 'development' ? 'development' : 'production';
//const ExtractTextPlugin = require("extract-text-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const devMode = process.env.NODE_ENV !== 'production'
var OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');

let conf={
	entry: './src/main.js',
	output:{
	    path: path.resolve(__dirname,'../app/'),
	    publicPath: '/app/',
	    filename: 'app.js',
	    chunkFilename: '[name].[contenthash].js'
	},
	module: {
		rules: [
			{
				test: /\.(sa|sc|c)ss$/,
				use: [
					devMode ? 'style-loader' : MiniCssExtractPlugin.loader,
					'css-loader',
					// 'postcss-loader',
					'sass-loader',
				],
			},

			{
				test: /\.vue$/,
				loader: 'vue-loader',
				options: {
					loaders: {
						// Since sass-loader (weirdly) has SCSS as its default parse mode, we map
						// the "scss" and "sass" values for the lang attribute to the right configs here.
						// other preprocessors should work out of the box, no loader config like this necessary.
						'scss': [
							'vue-style-loader',
							MiniCssExtractPlugin.loader,
							'css-loader',
							'sass-loader'
						],
						'sass': [
							'vue-style-loader',
							MiniCssExtractPlugin.loader,
							'css-loader',
							'sass-loader?indentedSyntax'
						]
					}
					// other vue-loader options go here
				}
			},
			{
				test: /\.js$/,
				loader: 'babel-loader',
				exclude: /node_modules/
			},
			{
				test: /\.(png|jpg|gif|svg)$/,
				loader: 'file-loader',
				options: {
					name: '[name].[ext]?[hash]'
				}
			}
		]
	},	
	plugins: [
		new MiniCssExtractPlugin({
			// Options similar to the same options in webpackOptions.output
			// both options are optional
			filename: 'app.css', //devMode ? '[name].css' : '[name].[hash].css',
			//chunkFilename: devMode ? '[id].css' : '[id].[hash].css',
		}),
		new webpack.ProvidePlugin({
		})	
	],
	watchOptions: {
		aggregateTimeout: 200
	},	
	resolve: {
		extensions: ['.js', '.vue', '.json'],
		modules: [path.resolve(__dirname,"src"), 'node_modules'],
	        alias: {
			'vue$': 'vue/dist/vue.common.js',
			'muse-components': 'muse-ui/src'
		}
	},
};


module.exports = (env,options) => {
	let production = options.mode === 'production';
	conf.devtool = production 
					?
					false
					: "#cheap-module-source-map" ;
	conf.watch = !production;
	if(production){
		conf.plugins.push(
			new OptimizeCssAssetsPlugin({
			
			})
		)
	}
	console.log(conf)
	return conf;
}

затем заюзать lazy

let  PhoneInput  = Vue.component('phone-input', function(resolve){require(['@core/inputs/PhoneInput.vue'],resolve)});
let MaterialInput = Vue.component('material-input', function(resolve){require(['@core/inputs/MaterialInput.vue'],resolve)});
let BaseInput = Vue.component('base-input', function(resolve){require(['@core/inputs/BaseInput.vue'],resolve)});

export default (type) => ({
  components: {
    PhoneInput,
    CustomInput: type === 'material' ? MaterialInput : BaseInput
  }
});

В результате каждый инпут должен быть в отдельном файле, за которым не надо следить и который сам будет загружаться.

Answer 2

[ChoasEmptiness]

Можно например сделать те что можно цеплять - глобальными как вариант.