vite中require替代方案

咱们在vue2中是不存在require is not defined问题的，那是因为webpack帮我们解决了，开发时在内部对其了转换。为什么非要使用require语法？因为require语法有时候确实蛮好用的啊，咱们在vue2中可以通过require语法，定义变量，动态获取一些静态资源。vite不是webpack，没有提供require方法，但是，有替代方案，查看文档：https://cn.vitejs.dev/guide/features.html#glob-import

举例：

store/index.js中，如果有多个modules，这样一个一个导入确实麻烦。

import user from './modules/user.js'
import user from './modules/pay.js'
import user from './modules/cat.js'
export default createStore({
  modules: {
    user,
    pay,
    cat
  }
})

优化

希望不用写那么多的import，modules写一次就可以了

vue2+webpack环境，reuqire方法的解决方案：

// https://webpack.js.org/guides/dependency-management/#requirecontext
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
    const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
    const value = modulesFiles(modulePath)
    modules[moduleName] = value.default
    return modules
}, {})
const store = new Vuex.Store({
    modules
})

vite+vue3的环境：

方法一：import方法（推荐）

const files = import.meta.globEager('./modules/*.js')
const modules = {}
for (const key in files) {
    modules[key.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')]=files[key].default
}
Object.keys(modules).forEach(item => {
    // 为每个模块添加一个前缀名，保证模块命明不冲突 
    modules[item]['namespaced'] = true
})

ts写法：

const modulesFiles = import.meta.globEager('./modules/*.ts')
const modules = Object.keys(modulesFiles).reduce(
  (modules: { [key: string]: any }, path: string) => {
    const moduleName = path.replace(/^\.\/modules\/(.*)\.\w+$/, '$1')
    modules[moduleName] = modulesFiles[path]?.default
    return modules
  },
  {}
)
export default modules

方法二：选择安装（不建议用，意义不大，因为在vite中不需要添加require，可以直接通过路径引入，比如const img = '/images/log.png';）

这个插件就是将代码从 require 语法转换为 import 

npm i vite-plugin-require-transform --save-dev

来支持require。并配置vite.config.js

import { defineConfig } from 'vite'
import requireTransform from 'vite-plugin-require-transform';
export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    }),
  ],
});

这样require就可以在vite的项目中正常使用了。