Property ‘context‘ does not exist on type ‘NodeRequire‘.ts(2339)

最近使用vue3官方脚手架创建的项目，在执行下面的代码后报错：

const files = require.context('./modules', false, /\.js$/)

查阅相关资料，有人提出解决方法如下，安装@types/webpack-env依赖：

npm i -D @types/webpack-env

修改tsconfig.json:

{
    
    
  "compilerOptions": {
    
    
    "declaration": false,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "lib": ["es6", "dom"],
    "module": "es6",
    "moduleResolution": "node",
    "sourceMap": true,
    "target": "es5",
    "types": [
      "webpack",
      "webpack-env" // 加入这个
    ]
  },
}

但是发现，开始的报错并没有消失。

在项目根目录找到tsconfig.vitest.json，在"types": [“node”, “jsdom”]中加入"webpack-env"

{
    
    
  "extends": "./tsconfig.app.json",
  "exclude": [],
  "compilerOptions": {
    
    
    "composite": true,
    "lib": [],
    "types": ["node", "jsdom","webpack-env"]
  }
}

报错消失。

虽然编辑器不报错了，但是浏览器却无法识别这个方法：
Ucaught ReferenceError: require is not defined

结论：这个方法是webpack提供的，既然都用Vite了就别用这个方法了。

它的作用无非就是引入了一个目录下的所有文件，大不了手动引入。