动态导入

【问题标题】：Import dynamically动态导入
【发布时间】：2021-02-03 00:08:52
【问题描述】：

我想动态导入一个模块，并且仅在需要时才导入。

为了存档，我创建了一个小混音：

import {extend} from "vee-validate";
import {email, required} from "vee-validate/dist/rules";

export const rules = {

    methods: {
        addRule (name) {
            switch (name) {
                case 'required' :
                    extend ('required', {
                        ...required,
                        message: 'This field is required'
                    });
                    break;
                case 'email' :
                    extend ('email', {
                        ...email,
                        message: 'This field is required'
                    });
                    break;
            }
        }

    }
};

现在我的问题是：我想仅在需要时导入 email 和 required。所以如果我只添加required 规则，就不需要导入email 规则。我如何才能仅在需要时才导入它们？

【问题讨论】：

标签： javascript vue.js ecmascript-6 vuejs2

【解决方案1】：

您应该使用导入功能。注意它返回promise，所以你的addRule方法必须是async。

const { required } = await import('vee-validate/dist/rules.js')

编辑：这种方法不会阻止加载完整的rules.js。因此，另一个建议是将规则拆分为单独的文件。

required-rule.js

export { required } from 'vee-validate/dist/rules.js'

混合

const { required } = await import('required-rule.js')

【讨论】：