一、模块重导

收拢、结合并重导出：建立一个文件集结所有导入的文件再导出，其他文件使用时就可以用一个import导入多个文件的方法

/src/api/index.ts:

使用：

 import { getConsultantInfo, deepClean} from '@/api'
//getConsultantInfo是consultant文件里的
 api.getConsultantInfo({})
 api.deepClean.getTabList({})

二、webpack中的require.context

require.context(directory,useSubdirectories,regExp)

directory:表示检索的目录
useSubdirectories：表示是否检索子文件夹
regExp:匹配文件的正则表达式,一般是文件名

三、js中的import.meta.globEager

import.meta.globEager 是一个在 ECMAScript 模块中用于动态导入文件的特殊方法。它可以根据指定的模式匹配来一次性导入多个模块，返回一个对象，其中包含匹配模式的所有模块。

import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'

const routes: RouteRecordRaw[] = []

// 自动引入 router下除了当前文件的模块
const modules = import.meta.globEager('./modules/*.ts')
console.log('modules', modules)

Object.keys(modules).forEach((key) => {
  const mod = modules[key].default || {}
  const modList = Array.isArray(mod) ? [...mod] : [mod]
  console.log('modList', modList)
  routes.push(...modList)
})
console.log('routes', routes)

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes
})

export default router

路由目录：

打印结果：

四、webpack中的插件ProvidePlugin

项目中用到的变量/函数/库或工具，在vue.config.js文件中配置后就可以在任何地方使用了。

module.exports = {
// ...其他配置
configureWebpack: (config) => {
    plugins: [
      new webpack.ProvidePlugin({
        // 键是你想要提供的全局变量，值是你要提供的模块
        dayjs: 'dayjs',  // 例如，这将在全局范围内提供 'dayjs'，可以通过 dayjs 访问    
        $: 'jquery',
        jQuery: 'jquery',
        'windows.jQuery': 'jquery'
      })
    ]
  }
  }

五、vite插件vite-plugin-inject

// 配置  
import inject from 'vite-plugin-inject'; // 实测暂不可用，有替代方案再更新  
...  
plugins: [  
inject({  
  // 键是你想要提供的全局变量，值是你要提供的模块  
  dayjs: 'dayjs', // 例如，这将在全局范围内提供 'dayjs'，可以通过 dayjs 访问    
}),  
]  
...

如果使用了TS，得配置下全局类型：在globals.d.ts文件中处理全局类型：

import dayjs from 'dayjs';  
declare global {  
  // 全局声明
  const dayjs: typeof dayjs;  
}

在tsconfig.json文件中配置全局文件

{   
    "include": [ "src/**/*", "globals.d.ts"]  // 确保 TypeScript 包括这个文件  
}

六、unplugin插件（最好用）

强烈推荐unplugin系列插件，能自动自动按需引入：

unplugin-auto-import：自动按需引入js、ts
unplugin-vue-components：自动按需引入组件
unplugin-icons：自动按需引入icon

由于笔记篇幅过长，重新开了个文章：juejin.cn/post/740523…

如何替换满屏import导入