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

最新推荐文章于 2024-05-05 22:44:46 发布

Silencer_1

最新推荐文章于 2024-05-05 22:44:46 发布

阅读量1.1w

点赞数 1

分类专栏： JS VUE 文章标签： js 正则表达式 es6/es7 vue javascript

本文链接：https://blog.csdn.net/Silencer_1/article/details/106546184

版权

JS 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

VUE

10 篇文章 0 订阅

订阅专栏

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

摘要由CSDN通过智能技术生成

注意点

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
  ]
})