乐趣区

关于webpack-dev-server:vue批量导入文件篇一

序言

在咱们创立路由的时候,会发现如果所有的路由都在一个文件内,那么当我的项目路由多的时候,就会呈现路由难找,路由跟路由不在一块等状况呈现(没保护好)。
所以,为了防止这种状况,咱们能够应用模块化这种思维来解决问题。
那么,问题就来了,当模块多的时候,一个个的导入就很浪费时间,须要反复 引入 – 赋值 这一过程,所以,咱们是不是能让程序来帮咱们做这一步骤呢,那么咱们岂不是能够欢快游玩了。


一、webpack

require.context


依照官网解释,该办法能够在构建时在代码中解析要搜寻的目录。艰深的来说,就依据你给出的规定,而后找到符合条件的文件,而后在构建的时候主动生成咱们之前须要手动导入的那些代码。

/**
 * 能够看出该办法承受 4 个参数
 * @param {string} directory 须要搜寻的目录
 * @param {boolean} useSubdirectories 是否搜寻子目录,默认 true
 * @param {regExp} regExp 文件匹配规定 默认 /^\.\/.*$/
 * @param {string} mode 模式,默认 sync
 * @return {function} function(resolve, keys, id)
 */
require.context(
  directory,
  (useSubdirectories = true),
  (regExp = /^\.\/.*$/),
  (mode = 'sync')
)

/**
 * 该办法返回一个函数,具备 3 个属性:resolve、keys、id
 * resolve{function},返回解析申请的模块 ID
 * keys{function},返回正则匹配的文件名称数组
 * id{string},上下文模块的模块 ID
 */
// 例子,搜寻当前目录下的 modules,不须要搜寻 modules 子目录,匹配规定是所有的 js 文件
require.context('./modules', false, /\.js$/);
/**
 * 残缺例子,主动导入路由模块
 * 目录
 * --> modules
 * ---- home.js
 * ---- system.js
 */
(r => r.keys().map(key => r(key).default))(require.context('./modules', false, /\.js$/))

// console
[{
  path: '/home'
  name: 'home',
  component: () => import('@/views/home'),
}, {
  path: '/system'
  name: 'system',
  component: () => import('@/views/system'),
}]

二、vite

import.meta.glob


依照官网解释,该办法是一个懒加载办法,通过动静导入实现,与 import.meta.globEager 的区别只是一个同步,一个异步,视状况应用。

const modules = import.meta.globEager('./modules/*.ts');
let routes = [];

for (const key in modules) {modules[key]().then((mod) => {routes.push(mod.default);
  })
}

// console
[{
  path: '/home'
  name: 'home',
  component: () => import('@/views/home/index.vue'),
}, {
  path: '/system'
  name: 'system',
  component: () => import('@/views/system/index.vue'),
}]

import.meta.globEager


依照官网解释,该办法是一个同步办法,可间接引入匹配的模块

const modules = import.meta.globEager('./modules/*.ts');
let routes = [];

for (const item of Object.values(modules)) {routes.push(item.default);
}

// console
[{
  path: '/home'
  name: 'home',
  component: () => import('@/views/home/index.vue'),
}, {
  path: '/system'
  name: 'system',
  component: () => import('@/views/system/index.vue'),
}]

参考

webpack
vite

退出移动版