webpack自动路由插件

最新推荐文章于 2024-05-29 16:28:40 发布
最新推荐文章于 2024-05-29 16:28:40 发布
阅读量795 收藏
点赞数
文章标签： node.js vue.js javascript webpack
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wang15180138572/article/details/120788169
版权

由于之前的搭建的单页面架构自动路由这块，配置meta信息，需要单独写配置文件，而且只配置支持二级路由，三级路由需要手写配置生成。动态路由也是需要配置id。对使用者不太友好。现在就想使用webpack 插件的形式，自动生成路由文件，meta信息在每个vue页面里面去配置，支持多级路由，来优化路由这块的代码。（网上也有一些自动路由插件，但不太合适接入到之前写的单页面架构中，于是就自己动手写了一个）

整体思路

1、写一个webpack插件，在代码运行时生成routes.js文件
2、代码运行时传入需要生成文件的目录，以及输出routes.js的目录路径
3、根据目录路径（system/user/index.vue）生成 嵌套树

system:{
    value:[],
    children:[]
}

4、根据嵌套树在递归遍历配置路由信息生成json数据
5、nodejs读取目录下vue文件里面的meta信息整合到路由Json中

[ { name: 'system',
    path: 'system',
    component: '@/views/autoRouter/system/_layout.vue',
    index: 1,
    meta:
     '{\n    title: \'系统管理\',\n    icon: \'form\',\n    permissionArray: [1, 2, 3],\n    sortIndex: 1,\n    newTime: \'2022-05-20\'\n  }',
    children: [ [Object], [Object], [Object] ] } ]

6、在将路由json数据递归匹配可生成routes.js 的字符串数据
7、使用nodejs 在输出的目录下写入routes.js 文件

代码实现

const fg = require('fast-glob') // 读取文件目录
const prettier = require('prettier') // 处理文件格式

1、定义一个自动路由插件类，在这个类里面定义一个方法实现目录路径输入，routes.js文件输出数据。在写入文件中

// 定义一个自动路由插件类
    const generate = () => {
      const code = generateRoutes(this.options)
      let to
      // 处理路由文件生成目录 默认与插件文件并级 如果配置routePath，那生成文件就是此路径下
      if (this.options.routePath) {
        to = path.join(process.cwd(), this.options.routePath)
      } else {
        to = path.join(__dirname, './routes.js')
      }
      // 以同步的方法检测目录是否存在。 如果目录存在 返回true,如果目录不存在 返回false 语法
      // 读取文件信息 如果没有改变直接返回
      if (fs.existsSync(to) &&
        fs.readFileSync(to, 'utf8').trim() === code.trim()) {
        return
      }
      fs.writeFileSync(to, code)
    }

2、将目录生成嵌套树

/**
 * 根据目录去生成路由
 * @param pages 解析路由文件目录
 * @param importPrefix import导入前缀目录
 * @param layout 想要生成嵌套路由，目录下需要layout文件，用于配置父节点的meta信息 另个作用是当路由大于二级路由时,_layout需要有<router-view/>，不然页面不会显示
 * @param common 过滤文件路径路径
 * @returns {*}
 */
function generateRoutes({ pages = 'src/views', importPrefix = '@/views/', layout = '_layout.vue', common = 'common' }) {
  // 指定文件不需要生成路由配置
  const patterns = ['**/*.vue', `!**/${layout}`, `!**/${common}/*.vue`]
  // 获取所有layout的文件路径
  const layoutPaths = fg.sync(`**/${layout}`, {
    cwd: pages,
    onlyFiles: true
  })
  // 获取所有需要路由配置的文件路径
  const paths = fg.sync(patterns, {
    cwd: pages,
    onlyFiles: true
  })
  const pathsArr = paths.map((p) => p.split('/'))
  const layoutPathsArr = layoutPaths.map((p) => p.split('/'))
  // 生成嵌套目录
  const map = {}
  layoutPathsArr.forEach((path) => {
    const dir = path.slice(0, path.length - 1)
    dir.unshift('rootPathLayoutName')
    setToMap(map, pathToMapPath(path.slice(0, path.length - 1)), path)
  })
  pathsArr.forEach((path) => {
    let dir = path
    if (path.indexOf('index.vue') > -1) {
      dir = path.slice(0, path.length - 1)
    }
    setToMap(map, pathToMapPath(dir), path)
  })

  //  将目录匹配生成路由json
  const routerStr = pathMapToMeta({
    children: map.children,
    routers: [],
    pages: pages,
    importPrefix: importPrefix
  })
  // 将json转换文件字符串
  return createRoutes(routerStr)
}
/**
 * 将目录生成嵌套树 将每个目录生成key:{value:[],childer:[]}
 * @param map {}
 * @param paths 不带.vue的路径
 * @param value 所有解析处理的层级目录数组
 */
function setToMap(map, paths, value) {
  const target = paths.reduce((item, key) => {
    if (!item.children) {
      item.children = new Map()
    }
    let child = item.children.get(key)
    if (!child) {
      child = {}
      item.children.set(key, child)
    }
    return child
  }, map)
  target.value = value
}

3、递归处理将嵌套树生成路由json数据，并读取vue页面中的meta信息
注意：想要生成嵌套路由，目录下需要layout文件，用于配置父节点的meta信息 另个作用是当路由大于二级路由时,_layout需要有，不然页面不会显示

/**
 *
 * @param children 嵌套目录
 * @param routers 路由
 * @param pages 需要自动生成文件的目录
 * @param importPrefix import 引入页面文件的前缀目录
 * @returns {*[]}
 */
function pathMapToMeta({ children, routers = [], pages, importPrefix }) {
  Array.from(children.keys()).forEach((row) => {
    const item = children.get(row)
    // 配置参数
    const router = {
      name: row,
      path: (row.indexOf('_id') > -1 ? (row.indexOf('_id') === 0 ? row.replace('_', ':') : row.replace('_', '/:')) : row),
      component: '',
      index: 1,
      meta: `{ title: "${row}", icon: "form"}`,
      children: []
    }

    // 如果value有值，说明可以根据文件路径取meta信息
    if (item.value) {
      router.component = path.join(importPrefix, item.value.join('/'))
      const file = fs.readFileSync(path.join(pages, item.value.join('/')), 'utf8')
      const metaArr = file.match(/\meta: {[^\{]+\}/g) || file.match(/\meta:{[^\{]+\}/g)
      if (metaArr) {
        const metaStr = metaArr[0]
        // 匹配meta信息
        let meta = ''
        if (metaStr.indexOf('meta') > -1) {
          meta = metaStr.substring(metaStr.indexOf('{'), metaStr.indexOf('}') + 1)
        }
        router.meta = meta
        // 匹配排序
        if (metaStr.indexOf('sortIndex') > -1) {
          const sortIndexAll = metaStr.substring(metaStr.indexOf('sortIndex'), metaStr.indexOf('}'))
          const sortIndex = sortIndexAll.substring(sortIndexAll.indexOf(':') + 1, (sortIndexAll.indexOf(',') > -1 ? sortIndexAll.indexOf(',') : sortIndexAll.length - 1))
          router.index = Number(sortIndex)
        }
      }
    }
    // 如果有children 需要遍历循环匹配
    if (item.children) {
      router.children = pathMapToMeta({
        children: item.children,
        routers: router.children,
        pages: pages,
        importPrefix: importPrefix
      })
    }
    routers.push(router)
  })
  return routers
}

4、将路由json数据匹配生成routes.js 文件字符串数据


/**
 * 将路由json格式化成字符串
 * @param routers 路由json
 * @returns {*}
 */
function createRoutes(routers) {
  const code = routers.map(createRoute)
  return prettier.format(`import Layout from '@/layout'\nexport default [\n
    ${code}
  \n]`, {
    parser: 'babel',
    semi: false,
    singleQuote: true,
    trailingComma: 'none' // 处理最后一行不加，的问题
  })
}

/**
 * 一级路由转换 第一级的时候需要把component换成Layout 如果没有子节点，则需要将父节点复制一份成为子节点，component指向文件路径
 * @param map
 * @param children
 * @returns {string}
 */
function createRoute(map, children = {}) {
  if (map.children && map.children.length !== 0) {
    children = map.children.map(createRouteZJ)
    return `\n{
      path:'/${map.path}',
      name:'${map.name}',
      meta:${map.meta},
      index:${map.index},
      alwaysShow: false,
      component: Layout,
      children:[${children}]
    }`
  } else {
    // 如果只有一级目录，需要单独处理name 不然会报警告name相同
    children = `\n{
      path:'${map.path}',
      name:'${map.name}',
      meta:${map.meta},
      index:${map.index},
      alwaysShow: false,
      component:() => import('${map.component}')
    }`
    return `\n{
      path:'/${map.path}',
      name:'${map.name}p',
      meta:${map.meta},
      index:${map.index},
      alwaysShow: false,
      component: Layout,
      children:[${children}]
    }`
  }
}

/**
 * 二级及以上路由转换
 * @param map json里面的children  子节点里面的path不需要'/'
 * @param children
 * @returns {string}
 */
function createRouteZJ(map, children = {}) {
  if (map.children) {
    children = map.children.map(createRouteZJ)
  }
  return `\n{
  path:'${map.path}',
  name:'${map.name}',
  meta:${map.meta},
  index:${map.index},
  component:() => import('${map.component}'),
  children:[${children}]
  }`
}

使用方式

1、导入

npm install  ff-auto-router

2、修改vue.config.js

const autoRouter = require('ff-auto-router/lib/router-webpack-plugin')
configureWebpack(config) {
    config.plugins = [
      ...config.plugins,
      // eslint-disable-next-line new-cap
      new autoRouter({
        pages: 'src/views/autoRouter',
        importPrefix: '@/views/autoRouter',
        routePath: 'src/router/routes.js'
      })
    ]
}

pages 需要自动生成文件的目录
importPrefix import 引入页面文件的前缀目录
routePath 路由生成的文件目录，如果设置了则会在当前项目指定目录生成路由文件，否则可以从ff-auto-route导入 ff-auto-router/lib/routes

其中meta为vue-router配置的meta属性一致
写在每个组件的export default {}中

meta: {
    title: '系统管理',
    icon: 'form',
    permissionArray: [1, 2, 3],
    sortIndex: 1,
    newTime: '2022-05-20'
  }

3、修改src/router/index.js 文件,
这里的配置根据项目实际情况写。这样是基本写法可使用

import routes from './routes'
const createRouter = () => new Router({
  mode: 'history', // require service support
  base: process.env.BASE_URL,
  scrollBehavior: () => ({ y: 0 }),
  routes
})

展示效果

目录文件

{
    path: '/system',
    name: 'system',
    meta: {
      title: '系统管理',
      icon: 'form',
      permissionArray: [1, 2, 3],
      sortIndex: 1,
      newTime: '2022-05-20'
    },
    index: 1,
    alwaysShow: false,
    component: Layout,
    children: [
      {
        path: 'menu',
        name: 'menu',
        meta: {
          title: '菜单管理',
          icon: 'form',
          permissionArray: [1, 2, 3],
          sortIndex: 2,
          newTime: '2022-05-20'
        },
        index: 2,
        component: () => import('@/views/autoRouter/system/menu.vue'),
        children: []
      },
      {
        path: 'user',
        name: 'user',
        meta: {
          title: '用户管理',
          icon: 'form',
          permissionArray: [1, 2, 3],
          sortIndex: 1,
          newTime: '2022-05-20'
        },
        index: 1,
        component: () => import('@/views/autoRouter/system/user.vue'),
        children: []
      },
      {
        path: 'role/:id',
        name: 'role_id',
        meta: {
          title: '角色管理',
          icon: 'form',
          permissionArray: [1, 2, 3],
          sortIndex: 3,
          newTime: '2022-05-20'
        },
        index: 3,
        component: () => import('@/views/autoRouter/system/role_id/index.vue'),
        children: []
      }
    ]
  }

运行结果

代码可自行npm 下载查看
https://www.npmjs.com/package/ff-auto-router

放飞@wlg
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vue-router-invoke-webpack-plugin:根据文件目录自动生成vue-router的路由
05-14
Vue路由器调用Webpack插件 typescript 重写了新版本，同时支持vue2.x和vue3.x 根据文件目录自动生成vue-router的路由。 安装 npm npm install vue - router - invoke - webpack - plugin - D cnpm cnpm install vue - router - invoke - webpack - plugin - D 纱 yarn add vue - router - invoke - webpack - plugin - D 什么是自动生成路线 路由自动注入是指根据文件目录的格式自动生成相应的router.js ，每次无需创建模块即可参考手册 用法 Webpack 我们需要知道环境是development或production 。所以你应该设置process.env.NODE_ENV等
案例 -- web移动端项目（vue）
tby_pr的博客
11-03 3983
开发流程 选择手动模式 安装vue扩展 一路回车就行 路由模式 每个配置都用单文件设置 vant组件库 网址： Vant - Mobile UI Components built on Vue 安装vant库 npm i vant -S 自动按需引入组件(推荐) npm i babel-plugin-import -D 在项目根目录下面有一个babel.config.js文件，在此文件中进行如下操作 修改babel.config.js文件后，一定要重...
从零开始学Vue3--根据目录结构自动生成路由
最新发布
Cloud的专栏
05-29 465
我们在测试或者小项目中经常遇到一个问题，就是加一个页面，就要在router.js中加一个路由，相当的麻烦，有没有办法可以根据目录结构自动生成路由呢？
Vue2中利用webpack动态生成路由
2301_76250038的博客
03-06 981
利用webpack来根据目录结构动态生成路由，将对路由的维护集中到路由组件本身，降低维护的难度。
第一天——使用Webpack脚手架创建项目并搭建路由
weixin_53314387的博客
03-27 409
如何使用webpack来创建初始化一个项目，并对项目进行一些便于我们开发的配置，如浏览器自动打开、关闭eslint校验工具、设置src别名为@等，还有对项目结构进行拆分路由，，如何搭建路由和配置路由，如何进行路由跳转，$route和$router是什么，编程式导航和声明式导航是什么，它们的优缺点有哪些等等
TypesScript+vue3+vite项目根据文件目录自动生成路由注册表
weixin_48226213的博客
03-02 872
vue工程化项目每新增一个页面都要注册路由，是个繁琐而且重复的工作，下面通过vite提供的import.meta.glob方法自动引入路由，拼接路由注册表，从而减少手动注册路由的工作量。备注：如果使用webpack可以使用require.context()，也能做到根据文件目录生成路由注册表，这里不多赘述
使用 webpack 插件自动生成 vue 路由文件的方法
10-16
`vue-route-webpack-plugin` 是一个专为Vue.js项目设计的webpack插件，它可以在编译过程中自动扫描指定目录下的Vue组件文件，并根据组件中的注释生成相应的路由配置。这使得路由配置与组件代码更加紧密地结合在一起...
React + webpack 路由组件 Demo
08-19
在本项目中，"React + webpack 路由组件 Demo" 是一个基于React框架和webpack构建工具的示例应用，展示了如何将React组件与webpack的路由功能结合使用，以实现前端单页应用（SPA）的基本架构。这个项目是可运行的，...
vue自动化路由的实现代码
10-16
Vue 自动化路由的实现主要是通过第三方库或者自定义插件来完成的，这里我们讨论的是名为 `router-auto` 的库。 `router-auto` 的主要目标是简化 Vue 项目的路由配置，通过扫描项目文件结构自动创建和管理路由。在...
webpack结合express实现自动刷新的方法
10-17
1. **Webpack配置**：如何在`webpack.config.js`中设置入口、输出、插件等，以支持自动刷新。 2. **Webpack中间件**：理解并使用`webpack-dev-middleware`和`webpack-hot-middleware`，它们在开发环境中提供了内存...
webpack的基本使用（内含plugins插件）
m0_69674158的博客
08-15 547
webpack的概念和基本使用，含pluins插件
前端路由&webpack基础配置详解
10-16
主要介绍了前端路由&webpack基础配置详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
node express使用 express-auto-routes 管理路由(2021-5-23)
doubi6的博客
05-23 218
----app.js // auto-routes配置 const autoRoutes = require('express-auto-routes')(app); autoRoutes(path.join(__dirname, './routes')); ----模型（位于route目录下） exports.get = async function get(req, res, next) { // const token = req.headers['t-data'] // console.
vue2 webpack 根据views下的目录自动生成路由
心若有所向往，何惧道阻且长。
02-21 589
vue2 webpack 根据目录自动生成路由
webpack入门+路由配置
weixin_43919497的博客
05-03 703
webpack安装 vue init webpack 项目名 安装路由 npm install vue-router --save-dev 安装elementui npm i element-ui -S
vue 使用webpack自动形成路由
weixin_42145650的博客
05-07 244
import Vue from 'vue' import Router from 'vue-router' import HelloWorld from '@/components/HelloWorld' Vue.use(Router) const r = require.context('../components', true, /\.route\.js/) let arr = [] r.k...
路由模式、打包优化
ioncannontic的博客
09-30 1639
路由模式和打包优化
webpack 路由懒加载的原理
qq_22656655的博客
07-23 2355
前言 路由懒加载也可以叫做路由组件懒加载，最常用的是通过import()来实现它。 function load(component) { return () => import(`views/${component}`) } 然后通过Webpack编译打包后，会把每个路由组件的代码分割成一一个js文件，初始化时不会加载这些js文件，只当激活路由组件才会去加载对应的js文件。 在这里先不管Webpack是怎么按路由组件分割代码，只管在Webpack编译后，怎么实现按需加载对应的路由组件
vue webpack模板创建项目的两种路由
兔子鱼兮
03-31 1034
1 webpack模板创建项目方法 $ npm install -g vue-cli $ vue init webpack my-project $ cd my-project $ npm install $ npm run dev 2 目录结构 3 默认路由 利用url的hash，就是常说的描点（#）。 4 修改为history模式 HTML5的History模式，它使u...
webpack常见面试题
11-03
1. 什么是Webpack？ Webpack是一个开源的JavaScript模块打包工具，它可以将许多分散的模块按照依赖关系进行打包，生成优化后的静态资源。Webpack的主要目的是实现前端资源的模块化、组件化以及自动化构建。 2. Webpack的工作原理是什么？ Webpack的工作原理主要包括两个部分：一是定义入口文件（entry），即需要打包的JavaScript文件；二是确定输出结果的配置（output），即打包后的文件格式和输出路径。Webpack会从入口文件开始，递归地查找并打包所有依赖的模块，最后生成优化后的静态资源。 3. Webpack有哪些常用的加载器（loader）？ Webpack提供了多种加载器，用于处理不同类型的文件。常见的加载器有： - babel-loader：将ES6+代码转换为浏览器兼容的JavaScript代码。 - css-loader：解析CSS文件中的@import和url()语句，返回对应的CSS代码。 - file-loader：将文件输出到指定目录，通常用于处理图片、字体等资源文件。 - json-loader：处理JSON文件，将JSON字符串转换为JavaScript对象或数组。 - url-loader：将小于某个大小的URL转换为DataURL，以减小文件体积。 - vue-loader：用于处理Vue.js单文件组件（.vue文件）。 - sass-loader：用于处理Sass或SCSS文件，将其转换为CSS代码。 4. Webpack有哪些常用的插件（plugin）？ Webpack提供了许多插件，用于优化构建过程。常见的插件有： - clean-webpack-plugin：在每次构建前清理/dist文件夹。 - html-webpack-plugin：自动生成HTML文件，用于启动开发服务器。 - copy-webpack-plugin：将单个文件或多个文件复制到指定目录。 - optimise-css-assets-webpack-plugin：压缩和优化CSS代码。 - minimizer-webpack-plugin：压缩和优化JavaScript代码。 - terser-webpack-plugin：压缩和优化JavaScript代码。 - webpack-bundle-analyzer：分析打包后的资源文件，提供优化建议。 5. 如何配置Webpack的热更新（Hot Module Replacement, HMR）？ 要启用Webpack的热更新功能，需要在项目的入口文件中引入`webpack/hot/dev-server`模块，并在`webpack.config.js`中配置`devServer`选项。以下是一个简单的配置示例： ```javascript const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); const { hotMiddleware } = require('react-hot-loader'); const config = { // ...其他配置项 devServer: { contentBase: path.join(__dirname, 'dist'), compress: true, port: 9000, hot: true, // 开启热更新功能 historyApiFallback: true, // 使用HTML5 History API作为路由模式 }, }; module.exports = config; ``` 6. 如何配置Webpack的多入口（Multiple Entry Points）？ 要配置Webpack的多入口，需要在`entry`配置项中添加多个入口文件路径数组。例如： ```javascript module.exports = { // ...其他配置项 entry: { main: './src/main.js', app: './src/app.js', }, }; ```

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值