自动生成路由文件的插件及其方法技术

一种自动生成路由文件的插件及其方法，包括：步骤1：运行webpack进行打包，在webpack打包的过程中，会加载定义的webpack插件；步骤2：webpack插件会根据自定义的插件配置项生成所需要的路由文件；步骤3：这样在webpack打包结束时，就可以正常使用路由信息进行页面跳转了。结合其他结构和方法有效避免了现有技术中web项目每新建一个页面都要手动配置一次路由、操作繁琐且效率低下的缺陷。

【技术实现步骤摘要】
自动生成路由文件的插件及其方法
本专利技术涉及生成路由文件的
，也属于插件
，具体涉及一种自动生成路由文件的插件及其方法。
技术介绍
一个Web项目,可大可小,大到整个阿里巴巴,小到用户的博客,留言板.虽然所采用的技术不一样,规模不一样,但是都由一些执行相同作用的组件所构成的,当然根据规模的不同,要实现的功能的不同，在web项目中,其实就是俩个软件之间的信息交换,客户端机器中的浏览器软件和服务器端机器中的web服务器软件之间的交换,比如在网上的学习中,就是客户端的浏览器和服务器端的tomcat进行信息交换。随着web项目规模的不断扩大，每次新建一个页面都要手动配置一次路由，操作繁琐且效率低下。
技术实现思路
为解决上述问题，本专利技术提供了一种自动生成路由文件的插件及其方法，有效避免了现有技术中web项目每新建一个页面都要手动配置一次路由、操作繁琐且效率低下的缺陷。为了克服现有技术中的不足，本专利技术给予了一种自动生成路由文件的插件及其方法的解决方案，具体如下：一种自动生成路由文件的插件的方法，包括如下步骤：步骤1：运行webpack进行打包，在webpack打包的过程中，会加载设定而定义的webpack插件；步骤2：webpack插件会根据自定义的插件配置项生成用户所需要的路由文件；步骤3：这样在webpack打包结束时，就可以正常使用路由信息进行页面跳转了。进一步的，在初始化所述webpack插件时，就进行以下配置来得到自定义的插件配置项。进一步的，所述页面的目录文件夹的命名方式，包括：步骤1-1：webpack插件遍历页面pages的目录，获取该目录下所有文件的文件路径；步骤1-2：对文件路径进行处理，根据-和$号获取参数类型和名称；步骤1-3：根据reactrouter或者vuerouter的官方配置生成用户需要的配置文件，其中，-符表示分割参数，$符表示参数可选。进一步的，所述生成所需要的路由文件的方法，包括：步骤2-1：根据获取到的文件路径，获取文件基本信息，包括文件名、参数名、文件所处路径；步骤2-2：将作为参数的文件基本信息传递到设定的路由模版生成函数中生成符合官方路由标准的路由文件。一种自动生成路由文件的插件，包括：运行在处理终端上的webpack打包组件、执行模块、处理模块和生成模块；所述执行模块用于运行webpack进行打包，在webpack打包的过程中，会加载设定而定义的webpack插件；所述处理模块用于运用webpack插件根据自定义的插件配置项生成用户所需要的路由文件；所述生成模块用于在webpack打包结束时，就可以正常使用路由信息进行页面跳转了。本专利技术的有益效果为：本专利技术基于webpack开发了一个插件，可以根据页面文件自动生成与之匹配的路由信息，并且不需要重启web项目即可生效。有效避免了现有技术中web项目每新建一个页面都要手动配置一次路由、操作繁琐且效率低下的缺陷。附图说明图1为本专利技术的自动生成路由文件的插件的方法的流程图；图2为本专利技术的页面的目录文件夹的命名方式的流程图；具体实施方式随着web项目规模的不断扩大，每次新建一个页面都要手动配置一次路由，操作繁琐且效率低下。为了使这个过程自动化，提升开发效率，所以就基于webpack开发了一个插件，可以根据页面文件自动生成与之匹配的路由信息，并且不需要重启web项目即可生效。下面将结合附图和实施例对本专利技术做进一步地说明。如图1-图2所示，自动生成路由文件的插件的方法，包括如下步骤：步骤1：运行webpack进行打包，在webpack打包的过程中，会加载设定而定义的webpack插件；步骤2：webpack插件会根据自定义的插件配置项生成用户所需要的路由文件；步骤3：这样在webpack打包结束时，就可以正常使用路由信息进行页面跳转了。webpack是代码编译工具，有入口，出口、loader和插件。其天生就代码分割、模块化，webpack2.0中加入treeshaking，用来提取公共代码，去掉死亡代码。webpack是以commonJS的形式来书写脚本滴，但对AMD/CMD的支持也很全面，方便旧项目进行代码迁移。其支持很多模块加载器的调用，可以使模块加载器灵活定制，比如babel-loader加载器，该加载器能使操作者使用ES6的语法来编写代码；less-loader加载器，可以将less编译成css文件；开发便捷，能替代部分grunt/gulp的工作，比如打包、压缩混淆、图片转base64等。可以通过配置打包成多个文件，有效的利用浏览器的缓存功能提升性能。这里以vue-cli生成的项目为例：npminstall--save-devroute-auto-generateconstpath＝require("path")；该npminstall--save-devroute-auto-generate命令用于在网页项目中安装此路由自动生成插件。这里，Vue-cli是一款非常优秀的用于迅速构建基于Vue的Web应用工具。其不同于creat-react-app这样的工具，开发者只需要关注项目逻辑的代码，而不需要关心webpack打包、启动Node服务等等诸如此类的这些问题。Vue-cli是一款基于模板化的开发工具，等于就是把别人的项目结构给照搬过来，所有的配置都是暴露出来的，具体自动生成插件包括：一般是在webpack配置文件中引入，如果是vue-cli生成的项目请在vue.config.js引入；下面这一段代码是为了达成引入插件：constRouteAutoGenerateWebpackPlugin＝require("route-auto-generate")；module.exports＝{configureWebpack:{resolve:{alias:{下面这一段代码是为了配置页面文件目录别名："@":path.resolve(dirname,"src/")}},plugins:[下面这一段代码是为了实现初始化插件配置：newRouteAutoGenerateWebpackPlugin({下面这一段代码是为了实现项目路由文件地址：routerPath:path.resolve(dirname,"./src/router.js"),下面这一段代码是为了实现路由页面目录：pagesPath:path.resolve(dirname,"./src/views"),下面这一段代码是为了实现目录别名：pagesAlias:"@/views/"})]}}；<本文档来自技高网...

【技术保护点】
1.一种自动生成路由文件的插件的方法，其特征在于，包括如下步骤：/n步骤1：运行webpack进行打包，在webpack打包的过程中，会加载定义的webpack插件；/n步骤2：webpack插件会根据自定义的插件配置项生成所需要的路由文件；/n步骤3：这样在webpack打包结束时，就可以正常使用路由信息进行页面跳转了。/n

【技术特征摘要】
1.一种自动生成路由文件的插件的方法，其特征在于，包括如下步骤：
步骤1：运行webpack进行打包，在webpack打包的过程中，会加载定义的webpack插件；
步骤2：webpack插件会根据自定义的插件配置项生成所需要的路由文件；
步骤3：这样在webpack打包结束时，就可以正常使用路由信息进行页面跳转了。


2.根据权利要求1所述的自动生成路由文件的插件的方法，其特征在于，在初始化所述webpack插件时，就进行以下配置来得到自定义的插件配置项。


3.根据权利要求1所述的自动生成路由文件的插件的方法，其特征在于，所述页面的目录文件夹的命名方式，包括：
步骤1-1：webpack插件遍历页面pages的目录，获取该目录下所有文件的文件路径；
步骤1-2：对文件路径进行处理，根据-和$号获取参数类型和名称；
步骤1-3：根据reactrouter或者vueroute...

【专利技术属性】
技术研发人员：戚静远，樊伟伟，李恒，朱晓明，杭建，孙建，
申请(专利权)人：随身云南京信息技术有限公司，
类型：发明
国别省市：江苏;32