前端工程化--批量导入模块

前端工程化–批量导入模块

01 起因

前端项目中，可能随着项目的庞大的，模块随之项目体量而变多，比如说 service 模块下有 100+ 模块，手动引入实在浪费时间了，所以程序猿能用技术偷懒，就不要手工。

02 具体实现

官方文档在这里~~~

这边具体语法可以参考官方文档，下边具体是具体实现：

比如：

service 模块下有个modules，存放 a.js, b.js, c.js

// service/index.js
// 前端工程化里面常用的批量导入文件
const requireContext = require.context('./modules', false, /\.js$/)
// 用于存放模块的数组
const MODULES = []
const requireContextKeys = requireContext.keys()

// 根据上面批量导入的文件读取里面定义的模块到 MOUDULES 数组中
requireContextKeys.forEach((item) => {
  const module = requireContext(item)
  MODULES.push(module.Service)
})

通过 clog 打印 MODULES 数组