require.context妙用-实现前端自动引入同一文件夹下多个文件(替代import)

news/2024/7/19 15:24:14 标签: js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

// 知识点1: 可用于模块的批量导入,类同于import引入同一文件夹下多个文件。
// require.context(directory, useSubdirectories = false, regExp = /^.//);
// 参数: 1. 读取文件的路径 2. 是否遍历文件的子目录 3. 匹配文件的正则表达式
// 返回是一个函数,是该文件夹下的匹配文件的执行环境
// 该函数有三个属性
// 1. resolve {Function} -接受一个参数request,request为test文件夹下面匹配文件的相对路径,返回这个匹配文件相对于整个工程的相对路径
// 2. keys {Function} -返回匹配成功模块的名字组成的数组
const modulesFiles = require.context('./modules', true, /\.js$/)

// 知识点2:reduce(()=> {total, currentValue, currentIndex, arr}, initValue)
// 参数: 1. 执行每条数据的函数 2. 传递给函数的初始值,可选(以前没发现初始值的妙用-可用于统计个数、去重等)
// 函数的参数 
// 1. total             必需。初始值, 或者计算结束后的返回值。如果设置初始值就用初始值,否则就是函数的第一条数据
// 2. currentValue     必需。当前元素


const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  // 忽略第1个js
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  // 执行modulesFiles函数,返回一个对象{default: {// 文件内容}, _esModule: true}
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})

const store = new Vuex.Store({
  modules,
  getters
})

export default store

http://www.niftyadmin.cn/n/951544.html

相关文章

<canvas>直接设置宽高和通过样式设置宽高的问题

canvas 设置宽高的方法有两种&#xff1a; <canvas width"600" height"400"></canvas><canvas style"width: 600; height:400 "></canvas> 在<canvas>中设置宽高相当于直接设置了画布的大小,如第一种&#xff0c…

vue组件什么情况下销毁

组件销毁有很多种情况 比如页面关闭&#xff0c;路由跳转&#xff08;没有使用keep-alive时的路由切换&#xff09; 还可以使用v-if和改变key值来销毁组件&#xff0c;这属于手动销毁组件

vue中cross-env使用(解决跨平台设置NODE_ENV的问题)

在搭建公司前端项目的时候&#xff0c;package.json配置后会提示 NODE_ENV不是内部或外部命令&#xff0c;也不是可运行的程序 或批处理文件。 简单来说&#xff0c;就是windows不支持 NODE_ENVdevelopment 解决办法&#xff1a;就可以用到cross-env cross-env cross-env是跨…

vue 统一引入全局过滤器

一、在filter/index 文件中实现全局过滤器函数 如下所示目录 export function pluralize(time, label) {if (time 1) {return time label;}return time label s; }/* 数字 格式化 */ export function numberFormatter(num, digits) {const si [{ value: 1e18, symbol: E …

node 统计文件夹下所有文件的行数

原文章地址&#xff1a; https://blog.csdn.net/wangzhikui1/article/details/81811994亲测有效&#xff0c;记录一下// 统计文件的行数&#xff0c;简单的方法就是统计换行符的个数&#xff0c;即使用String.split(‘\n’)分割后返回数组的长度。// 引用文件系统模块 let fs …

fs.stat 总结

1.异步&#xff1a;fs.stat(path,callback): path是一个表示路径的字符串,callback接收两个参数(err,stats),其中stats就是fs.stats的一个实例&#xff1b; 2.同步&#xff1a;fs.statSync(path) 只接收一个path变量&#xff0c;fs.statSync(path)其实是一个fs.stats…

vue.use() 的作用详解

官方解释&#xff1a; Vue.use( plugin ) 参数&#xff1a; {Object | Function} plugin 用法&#xff1a; 安装 Vue.js 插件。如果插件是一个对象&#xff0c;必须提供 install 方法。如果插件是一个函数&#xff0c;它会被作为 install 方法。install 方法调用时&#xff0c…

Prettier格式化配置

Prettier格式化配置 HTML/CSS/JS/LESS 文件的 prettier 格式化规则 {// 使能每一种语言默认格式化规则"[html]": {"editor.defaultFormatter": "esbenp.prettier-vscode"},"[css]": {"editor.defaultFormatter": "es…