Vue开发技巧--------批量引入文件

在平时开发中，大家肯定遇到一些你不想做但是又必须做的事，比如路由配置文件、ajax请求封装使用等。
比如在开发中，随着模块增多，每增加一个模块你就需要去router的配置文件下对路由进行配置
如下router配置文件

                    {
                        path: "test",
                        name: "test",
                        meta: {
                            title: "test管理"
                        },
                        component: resolve =>
                            require([
                                "@/components/pages/test"
                            ], resolve),
                        children: [
                            {
                                path: "list",
                                meta: {
                                    title: "test列表"
                                },
                                name: "test_list",
                                component: resolve =>
                                    require([
                                        "@/components/pages/app/test/list"
                                    ], resolve)
                            },
                            {
                                path: "add/:gid",
                                meta: {
                                    title: "新增test"
                                },
                                name: "test_add",
                                component: resolve =>
                                    require([
                                        "@/components/pages/app/test/add"
                                    ], resolve)
                            }
                        ]
                    },

还有对异步请求的封装也是一个道理，对于我个人而言，我喜欢把异步请求统一引入再统一向外暴露使用，随着模块的增多，也会是没新增一个模块我就要去配置的地方引入一遍暴露一遍。

import CommonService from './modules/common';
import LoginService from './modules/login'

export default {
  CommonService,
  LoginService
}

痛点：每当新增模块的时候我们都要去配置文件里面做一次重复操作，对于不怕麻烦的人来说还好，对于想偷懒的我来说就不那么开心了。

那么我们有什么好办法呢？

有的有的，我们可以用一种规则来统一引入某些文件，然后动态生成我们想要的配置文件，这样后面再增加模块的时候就不需要我们自己动手了，然后根据自己定的规则在进行使用就完事了！

require.context

require.context(directory, useSubdirectories, regExp)

• directory: 要查找的文件路径
• useSubdirectories: 是否查找子目录
• regExp: 要匹配文件的正则
  对于Vue2.0的项目，webpack为我们提供了require.context

/* 自定义组件 */
const files = require.context('../components', true, /index\.js$/)
const modules: any = {}
files.keys().forEach(key => {
  modules[key.replace(/(\.\/|\.js)/g, '')] = files(key).default
})

// 自定义组件注册
export function customRegister() {
  Object.entries(modules).forEach((arr: any) => {
    Vue.use(arr[1]);
  })
}

image.png

import.meta.glob& import.meta.globEager

• import.meta.glob
  对于vue3.0的项目，由于打包工具的变化，我们无法使用webpack提供的require.context了，Vite 支持使用特殊的 import.meta.glob 函数从文件系统导入多个模块，可以参考【官网文档】（https://cn.vitejs.dev/guide/features.html#glob-import）

var files = import.meta.glob("./modules/*.ts");

const files = {
  './modules/foo.js': () => import('./modules/foo.js'),
  './modules/bar.js': () => import('./modules/bar.js')
}

for (const path in modules) {
  modules[path]().then((mod) => {
    console.log(path, mod)
  })
}

匹配到的文件默认是懒加载的，通过动态导入实现，并会在构建时分离为独立的 chunk

• import.meta.globEager

如果你倾向于直接引入所有的模块（例如依赖于这些模块中的副作用首先被应用），你可以使用 import.meta.globEager

const modules = import.meta.globEager('./modules/*.js')

import * as __glob__0_0 from './modules/foo.js'
import * as __glob__0_1 from './modules/bar.js'
const modules = {
  './modules/foo.js': __glob__0_0,
  './modules/bar.js': __glob__0_1
}

• 这只是一个 Vite 独有的功能而不是一个 Web 或 ES 标准
  -该 Glob 模式会被当成导入标识符：必须是相对路径（以 ./ 开头）或绝对路径（以 / 开头，相对于项目根目录解析）。