专栏首页前端逗逗飞前端工程化之动态导入文件

前端工程化之动态导入文件

前言

随着项目越来越大,业务需要越来越多,我们项目的目录层级也是非常的多。如果还是通过import分别引入文件,那是非常的不科学的。

比如vue项目vuex文件非常多:

import Vue from 'vue'; 
import Vuex from 'vuex'; 
 
Vue.use(Vuex); 
 
import user from './stores/user'; 
import info from './stores/info'; 
... // 此处省略N多文件 
 
export default new Vuex.Store({ 
 modules: { 
 user, 
 info, 
 ... 
 }, 
});

要是有几个文件,还好。几十个,几百个,就非常头疼了。怎么解决这个问题了?

我们就要用到 Webpack 中的require.context()方法,动态加载某个文件夹下的所有JS文件,是不是就解决问题了呢!下面看看require.context()如何使用。

require.context()

语法

require.context(directory, useSubdirectories = false, regExp = /^.//);

示例

// 一个test文件夹下面(不包含子目录),能被require请求到,所有文件名以 `.test.js` 结尾的文件形成的上下文(模块)。 
require.context("./test", false, /\\.test\\.js$/); 
 
// 一个父级文件夹下面(包含子目录),所有文件名以 `.stories.js` 结尾的文件形成的上下文(模块)。 
require.context("../", true, /\\.stories\\.js$/);

下面看看,我们如何应用到vue项目中?

Vue项目中,使用require.context()

import Vue from 'vue' 
import Vuex from 'vuex' 
import { sync } from 'vuex-router-sync' 
import App from './App' 
import router from './router' 
 
const strict = process.env.NODE_ENV !== 'production' 
 
Vue.config.productionTip = false 
 
const modules = {} 
// 获取stores文件夹下所有js文件 
let requireContext = require.context('./stores', true, /^\\.\\/.*\\/index\\.js$/) 
// requireContext.keys() 返回匹配成功模块的名字组成的数组 
requireContext.keys().forEach((key) => { 
 // 通过 requireContext(key)导出文件内容 
 const mod = requireContext(key) 
 modules[key.slice(2, -9)] = mod.__esModule && mod.default ? mod.default : mod 
}) 
Vue.use(Vuex) 
 
const store = new Vuex.Store({ 
 modules, 
 strict 
}) 
sync(store, router) 
 
new Vue({ 
 el: '#app', 
 router, 
 store, 
 components: { App }, 
 template: '' 
})

通过以上方法就可以动态的导入stores文件夹中的所有js文件,这样就方便管理了,也不用一个个引入, 同理,如果路由文件等非常多,也可以用require.context()导入。

全局过滤器导入

Vue.use((Vue) => { 
 ((requireContext) => { 
 const arr = requireContext.keys().map(requireContext); 
 (arr || []).forEach((filter) => { 
 filter = filter.__esModule && filter.default ? filter.default : filter; 
 Object.keys(filter).forEach((key) => { 
 Vue.filter(key, filter[key]); 
 }); 
 }); 
 })(require.context('./filters', false, /^\\.\\/.*\\.js$/)); 
});

全局指令导入

Vue.use((Vue) => { 
 ((requireContext) => { 
 const arr = requireContext.keys().map(requireContext); 
 (arr || []).forEach((directive) => { 
 directive = directive.__esModule && directive.default ? directive.default : directive; 
 Object.keys(directive).forEach((key) => { 
 Vue.directive(key, directive[key]); 
 }); 
 }); 
 })(require.context('./directives', false, /^\\.\\/.*\\.js$/)); 
});

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Webpack require.context() 前端工程化之动态导入文件

    随着项目越来越大,业务需要越来越多,我们项目的目录层级也是非常的多。如果还是通过import分别引入文件,那是非常的不科学的。

    Javanx
  • 带你入门前端工程(三):前端组件化

    在了解模块化、组件化之前,最好先了解一下什么是高内聚,低耦合。它能更好的帮助你理解模块化、组件化。

    谭光志
  • 前端黑魔法:webworker动态化,无需JS文件创建worker

    前几天,我和一位知乎网友讨论这个问题的时候,觉得这非常有意思,所以写了这篇文章作为记录

    啦啦啦321
  • node和gulp实现前端工程自动化(附:gulp常用插件)

    /** * 1. LESS编译 压缩 合并 * 2. JS合并 压缩 混淆 * 3. img复制 * 4. html压缩 */

    HUC思梦
  • 「前端工程化」从0-1搭建react,ts脚手架(自动化收集,进程通信,深拷贝文件等全流程)

    ①node实现终端命令行 ②终端命令行交互 ③深copy整个文件夹 ④nodejs执行终端命令 如 npm install ⑤建立子进程通信 ⑥webpack底...

    用户6835371
  • PowerDesigner应用02 逆向工程之导出PDM文件前过滤元数据(表、视图、存储过程等)

      在上一篇文章《PowerDesigner应用01 逆向工程之配置数据源并导出PDM文件》步骤二中导出了目标数据库对应的PDM文件,

    张传宁IT讲堂
  • 【混沌工程入门】领导让我做混沌工程……该咋做?——《混沌工程》动物书2020年4月英文版解读之一 v0.2

    对于国外的“网红”技术,国内公司都是要试一下的。继云计算、大数据、人工智能、微服务和区块链之后,混沌工程也引起了国内IT领导们的注意。他们会叫来手下技术骨干说:...

    吾真本
  • Q音直播编译优化与二进制集成方案

    ? 一、背景: Q音直播抽离成pod库分别引入到QQ音乐和Fan直播两个独立app中,而对于直播业务来讲,直播SDK通过pod本地引入集成到Demo中进行日...

    QQ音乐技术团队
  • 史上最全的前端资源大汇总

    Tanyboye
  • 前端大牛们都学过哪些东西?

    单纯的技术层面也就是上述的那些个东西。如果某个同学都学会了上面的那些东西,是不是就能完全的胜任前端开发工作呢?

    web前端教室
  • Django+Vue开发生鲜电商平台之4.Restful API和Vue介绍

    Github和Gitee代码同步更新: https://github.com/corleytd/Django_Fresh_Ecommerce; https:...

    cutercorley
  • Flutter Web在美团外卖的实践

    在多形态业务场景下,如何保障多端体验的一致性,是前端技术领域一个比较受关注的方向。美团外卖前端技术团队基于 Flutter Web 探索跨端(App\PC\H5...

    美团技术团队
  • 【前端工程】前端组件化开发需要一个思考框架

    最近前端开发有点青黄不接,招聘一时半会又没有合适的补充进来,只能自己动手解决前端问题了。

    明月AI
  • 前端构建这十年

    前端模块化/构建工具从最开始的基于浏览器运行时加载的 RequireJs/Sea.js 到将所有资源组装依赖打包 webpack/rollup/parcel的b...

    IT大咖说
  • 一个Java程序猿眼中的前后端分离以及Vue.js入门

    前后端不分,Jsp 是一个非常典型写法,Jsp 将 HTML 和 Java 代码结合在一起,刚开始的时候,确实提高了生产力,但是时间久了,大伙就发现 Jsp 存...

    南风
  • Vue 服务端渲染原理解析与入门实战

    在以往的概念里,渲染的工作更多的是放在客户端进行的,那么为什么现在我们要让服务端来做这个工作?

    西岭老湿
  • 一个Java程序猿眼中的前后端分离以及Vue.js入门

    松哥的书里边,其实有涉及到 Vue,但是并没有详细说过,原因很简单,Vue 的资料都是中文的,把 Vue.js 官网的资料从头到尾浏览一遍该懂的基本就懂了,个人...

    江南一点雨
  • 前端优化带来的思考,浅谈前端工程化

    这段时间对项目做了一次整体的优化,全站有了20%左右的提升(本来载入速度已经1.2S左右了,优化度很低),算一算已经做了四轮的全站性能优化了,回顾几次的优化手段...

    哲洛不闹
  • 最全前端资源汇总

    一、概要 这份汇总整理,很程度上参考了GitHub最全前端资源汇总;云集前端教程、开发资源、免费书籍、手册规范、求职面试等等,旨在为前端学习 & 技能提升提供方...

    张果

扫码关注云+社区

领取腾讯云代金券