vite与webpack的一些技巧

通常项目里会有很多的api与导入导出，为了避免过多而提高效率
vue3的使用过程中：可以读取文件然后异步的获取挂载在属性上面
虽然我知道按需的好处，但有时候很急效率至少就没办法考虑性能，
所以频繁的导出与import导入使用变量申明也是很拖慢进度。

虽然不提倡做法，但效率确实提高很多

import * as vue from 'vue'
import * as router from 'vue-router'
import * as store from './stores/index.js'
export const install = function (app){
    app.config.globalProperties.$vue = vue
    app.config.globalProperties.$router = router
    app.config.globalProperties.$store = store.default
}
```javascript

Promise.all([installApi(app)]).then(res => {
app.config.globalProperties.$getApi = function(file_url){
return app.config.globalProperties.api[file_url]
}
app.mount(‘#app’)
})

import { ElMessage as message } from ‘element-plus’
/**

• api 接口集成对象初始化
  /
  const api_list = Object.create(null)
  function file_name(path) {
  const s1 = //(.+).js$/
  path.match(s1)
  return RegExp.$1
  }
  export const installApi= async function (Vue) {
  const modules = import.meta.glob('@/apis/.js’);
  for (const path in modules) {
  const mod = modules[path]
  const name =
  file_name(path).split(‘/’).length > 1
  ? file_name(path).split(‘/’).join(‘_’)
  : file_name(path)
  let obj = await mod()
  let router = obj.default
  if (api_list[name]) {
  message({
  type: ‘error’,
  message: 接口名称重复: ${name},
  })
  return
  }
  api_list[name] = router
  // Vue.component(obj.default.name, obj.default)
  // arr.push(obj)
  }
  Vue.config.globalProperties.api = api_list
  // return arr
  return api_list
  }

webpack做法也大同小异 require.context使用内置函数读取文件，使用vite和webpack自带的提供读取文件的功能，我们可以制作组件 指令，插件，函数，变量，字典，接口，表单各种的自动注册，大量的减少很多没必要的麻烦，通常我们的后台curd的过程很多时候都是复制一样的curd操作，其实多时候都需要封装表格表单来完成复用，注册全局，虽然有时候找不到东西在哪，但我觉得留一点说明注释应该可以解决问题。


```javascript
import { message } from 'ant-design-vue'
// const fs = require('fs')
const importAll = require.context('@/apis', true, /\.js$/)

/**
 * api 接口集成对象初始化
 */
const api_list = Object.create(null)
function file_name(path) {
  const s1 = /\/(.+).js$/
  path.match(s1)
  return RegExp.$1
}
importAll.keys().map((path) => {
  const name =
    file_name(path).split('/').length > 1
      ? file_name(path).split('/').join('_')
      : file_name(path)
  const router = importAll(path).default || importAll(path)
  if (api_list[name]) {
    message.error('接口文件名字请不要重复')
    return
  }
  api_list[name] = router
})
/**
 * api 接口集成对象
 */
// fs.writeFileSync('./apis/api.json', JSON.stringify(api_list), 'utf-8')
export const api = Object.freeze(api_list)