[发明专利]一种使用iframe内嵌网页的web端开发方法

说明书

本发明公开了一种使用iframe内嵌网页的web端开发方法，包括：将配置文件分为主目录配置文件和子项目配置文件并分别进行配置；运行主目录配置文件中命令时首先创建本地http服务，然后获取所有子项目目录及其下的配置文件；分别执行配置文件中的编译命令，并设置输出目录及在浏览器中打开主目录；设置代码热更新服务，监听代码文件的修改，当监听到代码修改时重新编译并更新输出文件。本发明的方法过采用webpack编译运行多项目的方法有效解决了前端iframe嵌入的项目无法同时编译运行的问题，使得项目在开发过程中更加方便、快捷，从而节约时间成本。

技术领域

本发明涉及设计计算机技术前端技术领域，特别涉及一种使用iframe内嵌网页的web端开发方法。

背景技术

在web端开发中，通常会使用iframe将一块功能比较复杂、已经稳定运行的页面嵌入到新的页面中，或者在开发中需要将功能复杂、使用不同技术的功能模块独立开发并嵌入到其他页面，也会需要使用iframe嵌入，但也会因此增加开发的难度，对于使用前端模块化开发的框架来说，目前的方案不能同时开发并编译引入的页面，导致多个需要项目分开开发运行。即需要使用iframe嵌入子项目页面的前端工程中，将主项目与子项目分开运行编译，然后主项目引入打包好的子项目才能查看页面效果，这样如果主项目与子项目需要同时开发、修改时，需要多个项目分别运行、编译，然后互相引用，配置代理解决跨域引起的问题，就会十分麻烦、费时，因此实现将主项目与子项目同时编译运行在同一http服务下十分重要。

发明内容

本发明的目的是克服上述背景技术中不足，提供一种使用iframe内嵌网页的web端开发方法，针对使用iframe嵌入页面与现代前端框架开发相结合时不能同时运行、实时刷新的问题，在对项目进行编译时，针对主项目和子功能项目分别进行编译放到同一端口不同的目录下，保证主项目与子项目同时运行在同一端口下，但代码上解耦合，项目之间编译、更改互不影响，各自独立，同时，运行时任一项目中的代码更改都会重新编译对应的子项目，然后触发热更新，查看修改效果，解决开发时不能同时运行，不能实时刷新页面的问题。

为了达到上述的技术效果，本发明采取以下技术方案：

一种使用iframe内嵌网页的web端开发方法，包括：

将配置文件分为主目录配置文件和子项目配置文件并分别进行配置；

运行主目录配置文件中命令时首先创建本地http服务，然后获取所有子项目目录及其下的配置文件；

分别执行配置文件中的编译命令，并设置输出目录及在浏览器中打开主目录；

设置代码热更新服务，监听代码文件的修改，当监听到代码修改时重新编译并更新输出文件；当代码修改触发更新时，首先判断哪个子项目代码被修改，然后执行相应的编译命令，并替换对应的输出文件，并不会每次都重新编译所有代码；

本发明的技术方案中，前端项目的运行依赖于配置文档，配置文档包含项目所需要的各种包、http服务配置、脚本命令配置、编译规则等，而在本方案中，支持在多个项目同时编译运行在同一http服务下，因此需要多个配置文档，分为主目录下配置文件(即主目录配置文件)和各项目中的配置文件(即子项目配置文件)，分别对不同的功能进行配置；在配置时，主目录下的package.json里配置主项目与子项目的项目目录，该目录名称也同时作为输出目录名称，通过该目录可以分别获取对应的项目下的配置文档；然后在各个项目目录下对各个目录下的package.json进行配置，该配置包含该项目编译所需要的各种包配置、规则配置等，这样各个项目的编译互不相关，就可以对不同的项目使用不同的技术框架；项目编译运行后需要在同一端口下进行访问，通过不同的目录访问不同的项目，主项目在通过iframe嵌入子项目时就可以通过根路径下的子目录引入对应的子项目，无需设置http地址。