vite与webpack的一些技巧

2023-12-14 09:35:28

通常项目里会有很多的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)

文章来源:https://blog.csdn.net/qq_43505774/article/details/134986701
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。