vue项目中很多引用的地方都比较啰嗦,例如store文件夹下index.js的引用,组件的引用等,都是先require进来,然后再配进去,我们看看一般写法的store中的index.js:

上面的写法比较繁琐,可以用require.context来批量读取,require.context可以读取指定目录下的文件和文件内容(这东西属于webpack的,最好在vuex项目中使用)

require.context有三个参数,第一个表示读取的目录,第二个表示是否要循环读取子目录,第三表示匹配的正则。

假设我们的store的目录结构如下:

那么我们在index.js中读取modules目录下文件可以这样写:require.context('./modules',false,/\.js$/),完整index.js代码如下:

require.context('./modules',false,/\.js$/)读取后,利用keys()方法可以得到所有目录下的文件名;然后将文件名传入结果中,可以得到文件的内容,也就是requireModule(filename)。

组件的引用也可以通过类似的方法读取,只不过要利用正则区分清楚那些是要的,哪些是不要的。

其他文章

0
我要评论

评论

返回
×

我要评论

回复:

昵称:(昵称不超过20个字)

图片:

提交
还可以输入500个字