JS工程化中模块的优雅导入

最新推荐文章于 2025-08-27 15:12:37 发布

原创最新推荐文章于 2025-08-27 15:12:37 发布 · 1.2w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #正则表达式 #es6/es7 #vue #javascript

JS 同时被 2 个专栏收录

17 篇文章

订阅专栏

VUE

10 篇文章

订阅专栏

本文探讨了在JS工程化中如何优雅地导入模块，强调了不能直接使用变量命名路径字符串，而是推荐使用匹配路径目录的方法。文章通过介绍三个关键参数：路径目录、是否深层遍历以及正则匹配，提供了实现这一目标的指导。并给出了具体实例来进一步解释这些概念。

注意点

require 不能直接导入用变量命名的路径字符串,可以用 require.context
require.context 有三个参数:
1. 匹配的路径目录，（从当前目录开始算起）
2. 是否深层遍历
3. 正则匹配，匹配出你需要的路径

例子

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

const routes = []
const context = require.context('./router', true, /\/[\w]+\.(js|ts)$/)

context.keys().forEach(_ => {
  const path = _.replace('./', '')
  routes.push(...require('./router/' + path).routes)
})

export default new Router({
  routes: [
    {path: '/', redirect: '/Home'},
    ...routes
  ]
})