共计 2089 个字符,预计需要花费 6 分钟才能阅读完成。
场景
咱们在开发我的项目的时候,会遇到某个组件需加载多个组件,失常的状况下;咱们会用一下形式去引入:
import A from './components/a.vue' | |
import B from './components/b.vue' | |
import C from './components/c.vue' | |
components: { | |
A, | |
B, | |
C | |
}, |
或者间接用异步组件的形式:
components: {A: resolve => require(['./components/a.vue'],resolve), | |
B: resolve => require(['./components/b.vue'],resolve), | |
c: resolve => require(['./components/c.vue'],resolve), | |
}, |
只引入三个还好,如果须要引入很多呢?
- 代码看起来很乱
- 不便于保护、不优雅
明天尝试用了 webpack 中 require.context,完满解决了这个问题。
官网文档
其实 VUE 官网也提供了这种解决方案;传送门
- 根本用法
require.context 接管三个参数:
- 须要搜寻的文件夹目录(必传)
- 是否须要搜寻它的子孙目录,默认为 false
- 匹配文件名的正则表达式
引入咱们的组件便能够这么做:
const requireComponent = require.context( | |
// 其组件目录的相对路径 | |
'./components', | |
// 是否查问其子目录 | |
false, | |
// 匹配根底组件文件名的正则表达式 | |
/Base[A-Z]\w+\.(vue|js)$/ | |
) |
咱们能够再控制台打印这个 requireComponent,会失去如下:
webpackContext(req) {var id = webpackContextResolve(req); | |
return \_\_webpack\_require\_\_(id); | |
} |
再深刻的我就没去看了,当前缓缓深挖;
- 利用到我的项目中的代码如下:
在 libs 文件夹下创立 requireComponents.js 文件
/** 利用 require.context 动静引入指定目录下的所有.vue 组件,并注册为全局组件 **/ | |
import Vue from 'vue' | |
const requireAreaComponent = require.context( | |
// 其组件目录的相对路径 | |
'../view/components/AreaBudgetManagement/ReportsCheckTemplate/childTemplate', | |
// 是否查问其子目录 | |
false, | |
// 匹配根底组件文件名的正则表达式 | |
/Base[A-Z]\w+\.(vue|js)$/ | |
) | |
const requireProjectComponent = require.context( | |
// 其组件目录的相对路径 | |
'../view/components/GroupBudgetManagement/ReportsCheckTemplate/childTemplate', | |
// 是否查问其子目录 | |
false, | |
// 匹配根底组件文件名的正则表达式 | |
/Base[A-Z]\w+\.(vue|js)$/ | |
) | |
console.log("requireProjectComponent", requireProjectComponent) | |
const requireComp = (r) => {r.keys().forEach(fileName => { | |
// 获取组件配置 | |
const componentConfig = r(fileName) | |
// 获取组件的 PascalCase 命名 | |
const componentName = upperFirst( | |
camelCase( | |
// 获取和目录深度无关的文件名 | |
fileName | |
.split('/') | |
.pop() | |
.replace(/\.\w+$/, '') | |
) | |
) | |
// 全局注册组件 | |
Vue.component( | |
componentName, | |
// 如果这个组件选项是通过 `export default` 导出的,// 那么就会优先应用 `.default`,// 否则回退到应用模块的根。componentConfig.default || componentConfig | |
) | |
}) | |
} | |
// 注册区域、团体里明细页面所有组件 | |
[requireAreaComponent,requireProjectComponent].forEach(item => requireComp(item)) | |
main.js
`
import ‘@/libs/requireComponents’
`
这样就相当于全局注册了,在咱们须要用的中央间接应用。
require.context 还有其余的用法,比方查找某个文件夹下的 js 文件:
const requireJs = require.context('../api', false, /\.js$/) | |
let fileNames = requireJs.keys(); | |
console.log("fileNames", fileNames) |
打印:
心愿对还在
import from
import from
import from
import from
的同学有帮忙~
正文完