526互联

webpack 和 vite 引入文件夹下所有文件对比

发布时间 2023-04-05 15:38:02作者: optre

webpack 下 引入文件夹下所有文件

const modulesFiles = require.context('../example', true, /\.vue$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

export default modules

vite 引入文件夹下文件

在vite项目中，可以使用ES6的import.meta.glob方法来引入一个文件夹下的所有文件。

具体步骤如下：

在需要引入文件的地方，使用import.meta.glob方法。

const modules = import.meta.glob('./path/to/directory/*.js')

Object.keys(modules).forEach((key) => {
  modules[key]()
})

上述代码中，import.meta.glob方法接收一个包含通配符的模式字符串作为参数，并返回一个可以迭代的对象，其中每个属性名对应着匹配到的文件路径。

接着，可以循环遍历Object.keys(modules)，并调用相应的模块函数来动态引入文件。
上述代码中，我们可以看到，通过import.meta.glob方法将所有.js文件引入，并循环调用对应的js文件执行。