Vite踩坑记录

记录下使用Vite过程中遇到的一些小问题， 持续更新（可能会）

无法使用require

在 webpack 中我们可以通过require.context()方法动态解析模块。比较常用的一个做法就是指定某个目录下的文件，通过正则匹配等方式加载某些模块，这样在后续增加新的模块后，可以起到动态自动导入的效果。比如在router或者Vuex中。如下：

• webpack写法

## app/src/store
├── index.ts
└── modules
    ├── call-center.ts
    ├── const.ts
    ├── dashboard.ts
    ├── ui.ts
    └── user.ts

// app/src/store/inde.ts
const context = require.context('./modules', false, /\.ts$/);
let moduleStores: ModuleTree<{
  ...
}> = {};

context.keys()?.forEach((key) => {
  const fileName = key.slice(2, -3);
  const fileNameInCamelCase = camelcase(fileName);
  const fileModule: typeof uiModule = context(key).default;

  moduleStores[fileNameInCamelCase] = {
    ...fileModule,
    namespaced: true,
  };
});

export default createStore({
  modules: moduleStores,
});

• 解决方案

1. 插件 引入插件 @originjs/vite-plugin-commonjs 以及 @originjs/vite-plugin-require-context

// vite.config.ts
import { viteCommonjs } from '@originjs/vite-plugin-commonjs';
import ViteRequireContext from '@originjs/vite-plugin-require-context';

export default defineConfig({
  plugins: [vue(), viteCommonjs(), ViteRequireContext()],
  ...
});

2. 使用import

const context = import.meta.globEager('./modules/*.ts');
let moduleStores: ModuleTree<{
  ...
}> = {};

// 因为通过这种方式引入的是一个对象，所以处理有一些差异
Object.keys(context)?.forEach((key) => {
  // 后续如新增多个单词拼接的module, 此处需转为驼峰
  const fileName = key.slice(10, -3);  // 通过这种方式引入的是带着文件夹名字的，需要截掉'./modules/'
  const fileModule: typeof userModule = context[key].default;

  moduleStores[fileName] = {
    ...fileModule,
    namespaced: true,
  };
});

无法读取process

开发环境中使用process.env, 提示process is not defined

• 解决方案

// vite.config.ts
...
export default defineConfig({
...
  define: {
    'process.env': process.env,
  }
})

less预处理

有时候在项目的样式文件中需要用到自定义的一些less变量，这时候可能会报错，找不到变量的定义

• 解决方案

// vite.config.ts
import { resolve } from 'path';
...
export default defineConfig({
...
  css: {
    preprocessorOptions: {
      less: {
        modifyVars: {
          hack: `true; @import (reference) "${resolve(
            __dirname,
            '../../node_modules/需要引入的css路径'
          )}";`,
        },
        javascriptEnabled: true,
      },
    },
  },
})