vite中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，

方法一：vite中require替代方案，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的项目中正常使用了。