CN106843869A - 一种前端开发工程化系统和方法 - Google Patents
一种前端开发工程化系统和方法 Download PDFInfo
- Publication number
- CN106843869A CN106843869A CN201710028280.0A CN201710028280A CN106843869A CN 106843869 A CN106843869 A CN 106843869A CN 201710028280 A CN201710028280 A CN 201710028280A CN 106843869 A CN106843869 A CN 106843869A
- Authority
- CN
- China
- Prior art keywords
- code
- engineering
- module
- css
- webpack
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Granted
Links
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F11/00—Error detection; Error correction; Monitoring
- G06F11/36—Preventing errors by testing or debugging software
- G06F11/3668—Software testing
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/40—Transformation of program code
- G06F8/41—Compilation
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Hardware Design (AREA)
- Quality & Reliability (AREA)
- Stored Programmes (AREA)
Abstract
本发明实施例提供了一种前端开发工程化系统和方法，系统包括：项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；开发环境建立模块，利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用构建发布模块对目标页面进行开发构建。
Description
技术领域
本发明属于涉及计算机软件技术领域，尤其涉及一种前端开发工程化系统和方法。
背景技术
随着社会的发展，各种智能设备已经成为人们生活和工作中不可或缺的电子设备。现有的智能设备能够安装各种应用程序(App)，以完成各种各样的功能。现有的各种应用程序大多需要经过前端开发工程化系统来进行开发，以方便技术人员。现有的典型的开发方式包括：
一种是淘宝网的def工具，这种开发工具的劣势在于淘宝网的def工具
过分依赖于淘宝自身体系，离开了起开发环境就无法使用，不具有普适性。同时def工具配置复杂、使用学习成本高、不易于扩展。
另一种是传统的前端开发采用grunt方式进行构建，这种开发工具具有以下缺陷:插件单一；配置复杂；流程控制糟糕；频繁的磁盘操作使得构建效率低下；读文件、修改文件、写文件的循环，导致插件与插件之前的工作无法有效串联起来。
还有一种是不使用工程化工具，这种方式具有以下缺点：这种开发方式原始且低效；无论是采用HTML语言、CSS语言、JS语言，开发过程中的线上的代码均得不到任何优化和处理，性能十分差；同时这种开发方式没有经过代码混淆和压缩，很容易暴露业务逻辑；无法使用模块方式进行复用模块的开发，重复会产生大量劳动；无法进行自动化发布及部署。
发明内容
针对现有技术中在对应用程序进行开发过程中缺少合式的开发工具的问题，本发明实施例的目的是提供一种有效且高效的前端开发工程化系统和方法。
为了解决上述问题，本发明实施例提出了一种前端开发工程化系统，包括：
项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；
构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
其中所述构建发布模块包括开发单元和发布单元，所述开发单元用于在系统工作在开发模式下时，查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；所述发布单元用于在系统工作在发布模式下时，通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务；
开发环境建立模块，用于利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建。
其中，所述系统还包括：
依赖更新模块，用于对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述系统还包括：
Base64编解码模块，用于利用Node.js将页面内的字体进行base64编码/解码。
进一步的，本发明实施例还提出了一种前端开发工程化方法，包括：
生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需的依赖程序；
利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建；
其中所述方法包括：
开发模式，在开发模式下所述方法包括：查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；
发布模式，在发布模式下所述方法包括：通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务。
其中，所述方法还包括：对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述方法还包括：利用Node.js将页面内的字体进行base64编码/解码。
本发明的上述技术方案的有益效果如下：上述的技术方案提出了一种前端开发工程化系统和方法，提供了一整套解决方案，集成了webpack和gulp的打包、构建能力；由express提供了稳定高效的编译、开发环境；基于Nodejs语言的特性，使得该工具非常易于维护，便于扩展，高定制化。本发明实施例的技术方案覆盖了整个前端开发流程，从前端单元测试、代码检测、页面开发调试、支持less、es6语法编译、前端js模块管理，js、css代码压缩及优化、自动构建、打包、发布于一体，极大的提高了前端开发者的工作效率。现有技术中，前端开发工程往往拥有固定的脚手架及目录，每次创建新工程就意味着要手动去创建许多目录结构、相应文件、依赖，十分浪费开发资源。使用本发明实施例的前端开发工程化系统，可以自动创建及生成工程所需的一切内容，极大地提高了开发效率。同时，本发明实施例中在本地开发环境的集成，使得前端开发者不再需要在本地启用apache或者nginx服务，就可以实现服务器端浏览的效果，并且继承了一系列编译、检测工具，一劳永逸的解决了前端工程化的问题。凭借着webpack和gulp，打包发布的流程也得到极大地简化，用户只需要少量配置，就可以完成代码优化、编译、发布的工作。本发明实施例实现了各种工具、代码检测、单元测试功能的集成，也提升了前端的开发效率，减少了后期优化的成本，降低了线上问题风险。
附图说明
图1是本发明实施例的系统结构示意图。
具体实施方式
为使本发明要解决的技术问题、技术方案和优点更加清楚，下面将结合附图及具体实施例进行详细描述。
本发明实施例提出了一种如图1所示的前端开发工程化系统和方法。本发明实施例中应用到的现有技术包括：
1、Node.js：Node.js是一个Javascript运行环境(runtime)。实际上它是对GoogleV8引擎进行了封装。V8引擎执行Javascript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。
2、Express:Express是一个简洁而灵活的node.js Web应用框架,提供一系列强大特性帮助你创建各种Web应用。Express不对node.js已有的特性进行二次抽象，我们只是在它之上扩展了Web应用所需的功能。丰富的HTTP工具以及来自Connect框架的中间件随取随用，创建强健、友好的API变得快速又简单。
3、Webpack：Webpack是一款用户打包前端模块的工具。主要是用来打包在浏览器端使用的javascript的。同时也能转换、捆绑、打包其他的静态资源，包括css、image、fontfile、template等。
4、Gulp:基于文件流的构建系统。
5、Grunt:Grunt是一个基于Nodejs的自动化任务执行工具
6、npm:NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块(包)的标准。
7、iconfont：国内功能很强大且图标内容很丰富的矢量图标库。
8、js:JavaScript的缩写。JavaScript是世界上最流行的编程语言之一，被广泛应用于HTML和Web领域，并被广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是一种脚本语言、一种轻量级的编程语言、可插入HTML页面的编程代码。当js被插入到HTML页面后，可由所有的现代浏览器执行。
本发明实施例提出了一种如图1所示的前端开发工程化系统，包括：
为了解决上述问题，本发明实施例提出了一种前端开发工程化系统，包括：
项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；
构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
其中所述构建发布模块包括开发单元和发布单元，所述开发单元用于在系统工作在开发模式下时，查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；所述发布单元用于在系统工作在发布模式下时，通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务；
开发环境建立模块，用于利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建。
其中，所述系统还包括：
依赖更新模块，用于对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述系统还包括：
Base64编解码模块，用于利用Node.js将页面内的字体进行base64编码/解码。
进一步的，本发明实施例还提出了一种前端开发工程化方法，包括：
生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需的依赖程序；
利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建；
其中所述方法包括：
开发模式，在开发模式下所述方法包括：查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；
发布模式，在发布模式下所述方法包括：通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务。
其中，所述方法还包括：对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
其中，所述方法还包括：利用Node.js将页面内的字体进行base64编码/解码。
本发明主要功能为以下几个模块：
1、项目模块化生成器(bid init)：
快速生成约定项目模板，当用户执行项目初始化命令时，会自动创建工程项目的目录及相关文件，并安装所需各种依赖，提升前端开发者的工作效率。
若要在一个新的目录下新建bid工程，可在该文件夹下使用bid init命令，会自动安装好所需要的依赖，同时生成出工程必须的目录结构。
2、开发环境服务器(bid dev)：
通过express.js建立web服务，通过多种express中间件，以及webpack提供的打包服务，完美的支持了less、sass、es6、react编译，以及css、js文件压缩、丑化、合并，并支持将代码内联在html中，减少多次http请求所消耗的时间及资源。通过webpack及其中间件模块，代码热刷新及实时编译构建(传统方式是watch文件后在进行构建或通过手动重启服务实现重新编译)。
在使用bid dev命令后，node服务端会自动在本地启动生成express server，同时遍历启动命令所在的目录结构下的工程目录，将全部页面以列表的形式展现在web端，用户点击某一具体页面，将通过构建模块(详见下文)进行开发构建。
3、构建及发布模块(bid build)：
使用gulp及webpack，通过相应中间件，提供模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成最轻量的压缩后的代码，保证线上文件得到最优化处理，并最大限度保护线上代码逻辑的安全性。
通过webpack相关插件以及npm包管理器中发布的多种lint模块，提供css、js代码规范及健康检测，及时发现代码的问题，并建立良好的前端开发规范，帮助前端开发者养成良好的编码习惯。
通过nodejs调用linux服务端发布脚本及发布配置文件，可将构建后的代码并行发布至多台服务器，提高发布效率。
在开发模式下，调用构建服务，会先查找将当前页面引用的全部js资源，将less编译解析生成css文件，然后将这些依赖打包、合并，并输出至开发服务器的内存中返回给前端。这种模式并不会生成任何文件，同时也不会对代码进行混淆，以方便开发者测试。
在发布模式下，调用构建服务，会通过gulp按顺序执行以下构建任务：init初始化(获取待构建页面及其依赖信息)、clean清理build目录、lint代码语法及规范检测、minify-js打包压缩js代码、内联html资源(将css和需要inline的js文件写入html文件)、复制图片资源、html、js资源至输出路径。
4、更新工程依赖模块(bid update)：
由于该发明的功能在不断添加，引用的依赖也会越来越多，为了及时能够使用到最新的功能，并确保需代码引用的依赖能够正常工作，需要为该发明提供依赖更新模块。
用户可以通过bid update命令对所需依赖进行更新。
5、其他工具模块(bid iconfont)：
通过nodejs，可以将ttf或者iconfont字体文件base64，节约线上字体加载请求，提高页面性能及效率。
以上所述是本发明的优选实施方式，应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明所述原理的前提下，还可以作出若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。
Claims (6)
1.一种前端开发工程化系统，其特征在于，包括：
项目模板化生成模块，用于生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需依赖程序；
构建发布模块，用于利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
其中所述构建发布模块包括开发单元和发布单元，所述开发单元用于在系统工作在开发模式下时，查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；所述发布单元用于在系统工作在发布模式下时，通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务；
开发环境建立模块，用于利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建。
2.根据权利要求1所述的前端开发工程化系统，其特征在于，所述系统还包括：
依赖更新模块，用于对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
3.根据权利要求1所述的前端开发工程化系统，其特征在于，所述系统还包括：
Base64编解码模块，用于利用Node.js将页面内的字体进行base64编码/解码。
4.一种前端开发工程化方法，其特征在于，包括：
生成项目模板，并在创建工程时根据生成的项目模板创建工程的目录和文件，并根据项目模板安装所需的依赖程序；
利用Gulp和Webpack中间件进行模块化的代码编译、压缩、混淆、代码内联、批量替换服务，并生成轻量的压缩后的代码；还用于通过Webpack中间件和npm进行css、js代码规范及健康检测；
利用Express.js建立web服务；通过Express的中间件进行less、sass、es6、react编译及css、js文件压缩、丑化、合并,并将代码内联在html页面内；并通过及Webpack及中间件进行代码热刷新及实时编译构建；并在接收到用户指令时调用所述构建发布模块对目标页面进行开发构建；
开发模式，在开发模式下所述方法包括：查找当前页面引用的全部js资源，并将less编译解析生成css文件，并将这些依赖文件进行打包、合并后发送到开发服务器的内存中并返回给前端；
发布模式，在发布模式下所述方法包括：通过Gulp按顺序执行以下构建任务：用于获取待构建页面及该页面的依赖信息的init初始化任务、清理项目模板化生成模块创建的工程的目录的Clean任务、lint代码语法及规范检测任务、minify-js打包压缩js代码任务、用于将css和需要需要进行inline处理的js文件写入html文件的内联html资源任务、复制图片资源及html及js资源到输出路径的复制输出任务。
5.根据权利要求4所述的种前端开发工程化方法，其特征在于，所述方法还包括：对项目模板化生成模块生成的工程的目录和文件对应的依赖进行更新。
6.根据权利要求4所述的种前端开发工程化方法，其特征在于，所述方法还包括：利用Node.js将页面内的字体进行base64编码/解码。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710028280.0A CN106843869B (zh) | 2017-01-16 | 2017-01-16 | 一种前端开发工程化系统和方法 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN201710028280.0A CN106843869B (zh) | 2017-01-16 | 2017-01-16 | 一种前端开发工程化系统和方法 |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN106843869A true CN106843869A (zh) | 2017-06-13 |
| CN106843869B CN106843869B (zh) | 2020-04-14 |
Family
ID=59124754
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN201710028280.0A Active CN106843869B (zh) | 2017-01-16 | 2017-01-16 | 一种前端开发工程化系统和方法 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN106843869B (zh) |
Cited By (53)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291474A (zh) * | 2017-06-23 | 2017-10-24 | 郑州云海信息技术有限公司 | 一种前端工程自动化构建系统 |
| CN107450927A (zh) * | 2017-08-02 | 2017-12-08 | 郑州云海信息技术有限公司 | 一种前端业务提供方法和装置 |
| CN107704234A (zh) * | 2017-08-22 | 2018-02-16 | 北京三快在线科技有限公司 | 前端工程构建方法、装置、电子设备及可读存储介质 |
| CN107861733A (zh) * | 2017-09-30 | 2018-03-30 | 福建天泉教育科技有限公司 | 轻应用组件构建方法及计算机可读存储介质 |
| CN108390773A (zh) * | 2018-02-02 | 2018-08-10 | 上海汉得信息技术股份有限公司 | 一种用于脚手架的动态路由的方法及设备 |
| CN108536431A (zh) * | 2018-04-04 | 2018-09-14 | 浙江小泰科技有限公司 | 一种全局命令行创建前端项目方法及系统 |
| CN108762805A (zh) * | 2018-05-07 | 2018-11-06 | 武汉斗鱼网络科技有限公司 | 一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法 |
| CN109062577A (zh) * | 2018-09-06 | 2018-12-21 | 福建星瑞格软件有限公司 | 一种前端脚本拆分与解构优化方法及系统 |
| CN109144482A (zh) * | 2018-08-22 | 2019-01-04 | 海南新软软件有限公司 | 一种基于webpack的快速开发环境搭建方法及装置 |
| WO2019007016A1 (zh) * | 2017-07-06 | 2019-01-10 | 武汉斗鱼网络科技有限公司 | 脚手架管理方法、装置及电子设备 |
| CN109284096A (zh) * | 2018-08-22 | 2019-01-29 | 深圳点猫科技有限公司 | 一种编程项目的自动化构建方法及电子设备 |
| CN109284471A (zh) * | 2018-11-07 | 2019-01-29 | 上海携程商务有限公司 | 网页布局与维护的方法及系统 |
| CN109298883A (zh) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | 一种教育平台下的自动生成组件文件的方法及电子设备 |
| CN109634647A (zh) * | 2018-12-25 | 2019-04-16 | 苏州思必驰信息科技有限公司 | 大型前端项目的构建方法及系统 |
| CN109739478A (zh) * | 2018-12-24 | 2019-05-10 | 网易（杭州）网络有限公司 | 前端项目自动化构建方法、装置、存储介质及电子设备 |
| CN109857397A (zh) * | 2019-01-18 | 2019-06-07 | 泰康保险集团股份有限公司 | 项目构建的方法、装置和存储介质 |
| CN109857375A (zh) * | 2018-12-25 | 2019-06-07 | 上海尼好系统集成有限公司 | 一种匹配后端开发测试的前端开发系统 |
| CN110032375A (zh) * | 2019-04-16 | 2019-07-19 | 山东浪潮通软信息科技有限公司 | 一种前端支持增量发布的多页面方法及装置 |
| CN110297647A (zh) * | 2019-05-29 | 2019-10-01 | 福建天泉教育科技有限公司 | 一种前端工程更新npm包的方法及终端 |
| CN110347378A (zh) * | 2019-07-12 | 2019-10-18 | 北京明略软件系统有限公司 | 项目开发环境的搭建方法及装置 |
| CN110362312A (zh) * | 2019-06-27 | 2019-10-22 | 绿漫科技有限公司 | 一种适用于多种框架的语法转换编译系统及方法 |
| CN110389755A (zh) * | 2019-07-24 | 2019-10-29 | 网易（杭州）网络有限公司 | 代码处理方法及装置、电子设备和计算机可读存储介质 |
| CN110389751A (zh) * | 2019-07-17 | 2019-10-29 | 北京海致星图科技有限公司 | 一种应用于知识图谱的数据接口mock方法 |
| CN110580152A (zh) * | 2018-06-07 | 2019-12-17 | 北京怡合春天科技有限公司 | 一种前端自动化脚手架 |
| CN110659062A (zh) * | 2019-09-20 | 2020-01-07 | 贝壳技术有限公司 | 前端脚手架的配置方法和装置、可读存储介质、电子设备 |
| CN110795088A (zh) * | 2019-10-29 | 2020-02-14 | 京东数字科技控股有限公司 | 前端工程项目构建方法和工具、计算机可读存储介质 |
| CN110825385A (zh) * | 2019-10-29 | 2020-02-21 | 福建天泉教育科技有限公司 | React Native离线包的构建方法及存储介质 |
| CN110968339A (zh) * | 2019-12-03 | 2020-04-07 | 望海康信(北京)科技股份公司 | 前端构建工具的方法、装置以及电子设备 |
| CN111124576A (zh) * | 2019-12-23 | 2020-05-08 | 焦点科技股份有限公司 | 一种多平台小程序及h5页面适配的方法及系统 |
| CN111258583A (zh) * | 2020-02-24 | 2020-06-09 | 厦门快商通科技股份有限公司 | 一种实现前端开发多模板支持的脚手架系统 |
| CN111273898A (zh) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | web前端代码自动化构建方法、系统及存储介质 |
| CN111290753A (zh) * | 2020-01-20 | 2020-06-16 | 远光软件股份有限公司 | 前端开发环境的搭建方法、装置、设备及存储介质 |
| CN111857810A (zh) * | 2020-07-30 | 2020-10-30 | 上海妙一生物科技有限公司 | 一种前端开发文件创建方法、装置及电子设备 |
| CN111897520A (zh) * | 2020-07-31 | 2020-11-06 | 平安科技（深圳）有限公司 | 前端项目框架的构建方法、装置、计算机设备及存储介质 |
| CN112083924A (zh) * | 2020-08-28 | 2020-12-15 | 杭州数云信息技术有限公司 | 一种软件设计界面一致性提升方法及工具 |
| CN112099794A (zh) * | 2020-09-28 | 2020-12-18 | 中国银行股份有限公司 | 前端项目构建方法及装置 |
| CN112162747A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
| CN112181432A (zh) * | 2020-10-13 | 2021-01-05 | 普元信息技术股份有限公司 | ReactNative框架中实现bundle的模块化打包处理的系统 |
| CN112199080A (zh) * | 2020-09-28 | 2021-01-08 | 上海上讯信息技术股份有限公司 | vuejs项目webpack构建方法及设备 |
| CN112230918A (zh) * | 2020-10-15 | 2021-01-15 | 四川长虹电器股份有限公司 | 一种使用iframe内嵌网页的web端开发方法 |
| CN112286504A (zh) * | 2020-11-12 | 2021-01-29 | 普元信息技术股份有限公司 | 移动APP中基于ReactNative实现小程序开发并加载的方法 |
| CN112685035A (zh) * | 2020-12-25 | 2021-04-20 | 京东数字科技控股股份有限公司 | 项目开发方法及装置、计算机可读存储介质、电子设备 |
| CN112685029A (zh) * | 2020-12-30 | 2021-04-20 | 京东数字科技控股股份有限公司 | 一种可视化模板的生成方法、装置、设备及存储介质 |
| CN112732228A (zh) * | 2020-12-31 | 2021-04-30 | 国泰君安证券股份有限公司 | 适用于生产环境中实现构建信息快速查询的系统 |
| CN112860278A (zh) * | 2021-02-08 | 2021-05-28 | 杭州玳数科技有限公司 | 一种依赖nodejs统一打包的前端终端工具 |
| CN113342400A (zh) * | 2021-06-29 | 2021-09-03 | 上海哔哩哔哩科技有限公司 | 离线包打包方法、装置及计算机设备 |
| CN113343143A (zh) * | 2021-05-24 | 2021-09-03 | 上海万物新生环保科技集团有限公司 | 一种流式加载网页模板的方法及设备 |
| CN113448559A (zh) * | 2021-07-13 | 2021-09-28 | 壹药网科技(上海)股份有限公司 | 一种针对多开发项目的全球广域网前端的开发系统和方法 |
| CN113590089A (zh) * | 2021-07-23 | 2021-11-02 | 北京有竹居网络技术有限公司 | 一种前端工程脚手架和工程套件创建方法、设备及介质 |
| CN113721907A (zh) * | 2021-08-31 | 2021-11-30 | 平安国际智慧城市科技股份有限公司 | 前端开发方法、装置、设备及存储介质 |
| WO2022247594A1 (zh) * | 2021-05-28 | 2022-12-01 | 腾讯科技（深圳）有限公司 | 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品 |
| CN116069325A (zh) * | 2023-01-28 | 2023-05-05 | 深圳市明源云采购科技有限公司 | 前端项目构建方法、装置、设备及计算机可读存储介质 |
| CN112685035B (zh) * | 2020-12-25 | 2024-05-17 | 京东科技控股股份有限公司 | 项目开发方法及装置、计算机可读存储介质、电子设备 |
Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN103955361A (zh) * | 2014-03-28 | 2014-07-30 | 世纪禾光科技发展（北京）有限公司 | 一种web前端代码自动化编译构建的模块化开发和发布系统 |
| CN104133685A (zh) * | 2014-08-05 | 2014-11-05 | 广州唯品会网络技术有限公司 | 网站前端开发的方法与系统 |
| CN104991860A (zh) * | 2015-06-24 | 2015-10-21 | 深圳欧德蒙科技有限公司 | Web前端自动化开发方法与系统 |
| CN105242926A (zh) * | 2015-09-30 | 2016-01-13 | 北京锐安科技有限公司 | Web前端开发平台 |
| US9294538B1 (en) * | 2013-02-12 | 2016-03-22 | Amazon Technologies, Inc. | Dynamic content injection |
| CN105893014A (zh) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | 用于前端的项目开发方法及系统 |
| CN106201642A (zh) * | 2016-06-29 | 2016-12-07 | 微梦创科网络科技（中国）有限公司 | 一种基于nodejs的模板自动化编译上线方法及系统 |
-
2017
- 2017-01-16 CN CN201710028280.0A patent/CN106843869B/zh active Active
Patent Citations (7)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| US9294538B1 (en) * | 2013-02-12 | 2016-03-22 | Amazon Technologies, Inc. | Dynamic content injection |
| CN103955361A (zh) * | 2014-03-28 | 2014-07-30 | 世纪禾光科技发展（北京）有限公司 | 一种web前端代码自动化编译构建的模块化开发和发布系统 |
| CN104133685A (zh) * | 2014-08-05 | 2014-11-05 | 广州唯品会网络技术有限公司 | 网站前端开发的方法与系统 |
| CN104991860A (zh) * | 2015-06-24 | 2015-10-21 | 深圳欧德蒙科技有限公司 | Web前端自动化开发方法与系统 |
| CN105242926A (zh) * | 2015-09-30 | 2016-01-13 | 北京锐安科技有限公司 | Web前端开发平台 |
| CN105893014A (zh) * | 2015-12-08 | 2016-08-24 | 乐视云计算有限公司 | 用于前端的项目开发方法及系统 |
| CN106201642A (zh) * | 2016-06-29 | 2016-12-07 | 微梦创科网络科技（中国）有限公司 | 一种基于nodejs的模板自动化编译上线方法及系统 |
Non-Patent Citations (2)
| Title |
|---|
| 张志飞: ""前端工程化的研究与实践"", 《电脑知识与技术》 * |
| 齐修_QIXIUSS: ""gulp & webpack整合，鱼与熊掌我都要！"", 《11. HTTPS://WWW.JIANSHU.COM/P/9724C47B406C》 * |
Cited By (70)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN107291474A (zh) * | 2017-06-23 | 2017-10-24 | 郑州云海信息技术有限公司 | 一种前端工程自动化构建系统 |
| WO2019007016A1 (zh) * | 2017-07-06 | 2019-01-10 | 武汉斗鱼网络科技有限公司 | 脚手架管理方法、装置及电子设备 |
| CN107450927A (zh) * | 2017-08-02 | 2017-12-08 | 郑州云海信息技术有限公司 | 一种前端业务提供方法和装置 |
| CN107704234A (zh) * | 2017-08-22 | 2018-02-16 | 北京三快在线科技有限公司 | 前端工程构建方法、装置、电子设备及可读存储介质 |
| CN107861733A (zh) * | 2017-09-30 | 2018-03-30 | 福建天泉教育科技有限公司 | 轻应用组件构建方法及计算机可读存储介质 |
| CN108390773A (zh) * | 2018-02-02 | 2018-08-10 | 上海汉得信息技术股份有限公司 | 一种用于脚手架的动态路由的方法及设备 |
| CN108390773B (zh) * | 2018-02-02 | 2021-09-28 | 上海汉得商业保理有限公司 | 一种用于脚手架的动态路由的方法及设备 |
| CN108536431A (zh) * | 2018-04-04 | 2018-09-14 | 浙江小泰科技有限公司 | 一种全局命令行创建前端项目方法及系统 |
| CN108762805A (zh) * | 2018-05-07 | 2018-11-06 | 武汉斗鱼网络科技有限公司 | 一种基于Cordova和Typescript的Hybrid开发框架及框架设计方法 |
| CN110580152B (zh) * | 2018-06-07 | 2023-05-12 | 北京怡合春天科技有限公司 | 一种前端自动化脚手架 |
| CN110580152A (zh) * | 2018-06-07 | 2019-12-17 | 北京怡合春天科技有限公司 | 一种前端自动化脚手架 |
| CN109144482A (zh) * | 2018-08-22 | 2019-01-04 | 海南新软软件有限公司 | 一种基于webpack的快速开发环境搭建方法及装置 |
| CN109284096A (zh) * | 2018-08-22 | 2019-01-29 | 深圳点猫科技有限公司 | 一种编程项目的自动化构建方法及电子设备 |
| CN109144482B (zh) * | 2018-08-22 | 2023-04-18 | 海南新软软件有限公司 | 一种基于webpack的快速开发环境搭建方法及装置 |
| CN109298883A (zh) * | 2018-08-23 | 2019-02-01 | 深圳点猫科技有限公司 | 一种教育平台下的自动生成组件文件的方法及电子设备 |
| CN109062577A (zh) * | 2018-09-06 | 2018-12-21 | 福建星瑞格软件有限公司 | 一种前端脚本拆分与解构优化方法及系统 |
| CN109284471A (zh) * | 2018-11-07 | 2019-01-29 | 上海携程商务有限公司 | 网页布局与维护的方法及系统 |
| CN109739478A (zh) * | 2018-12-24 | 2019-05-10 | 网易（杭州）网络有限公司 | 前端项目自动化构建方法、装置、存储介质及电子设备 |
| CN109857375A (zh) * | 2018-12-25 | 2019-06-07 | 上海尼好系统集成有限公司 | 一种匹配后端开发测试的前端开发系统 |
| CN109634647B (zh) * | 2018-12-25 | 2022-02-01 | 思必驰科技股份有限公司 | 大型前端项目的构建方法及系统 |
| CN109634647A (zh) * | 2018-12-25 | 2019-04-16 | 苏州思必驰信息科技有限公司 | 大型前端项目的构建方法及系统 |
| CN109857397A (zh) * | 2019-01-18 | 2019-06-07 | 泰康保险集团股份有限公司 | 项目构建的方法、装置和存储介质 |
| CN110032375A (zh) * | 2019-04-16 | 2019-07-19 | 山东浪潮通软信息科技有限公司 | 一种前端支持增量发布的多页面方法及装置 |
| CN110297647A (zh) * | 2019-05-29 | 2019-10-01 | 福建天泉教育科技有限公司 | 一种前端工程更新npm包的方法及终端 |
| CN110297647B (zh) * | 2019-05-29 | 2023-12-01 | 福建天泉教育科技有限公司 | 一种前端工程更新npm包的方法及终端 |
| CN110362312A (zh) * | 2019-06-27 | 2019-10-22 | 绿漫科技有限公司 | 一种适用于多种框架的语法转换编译系统及方法 |
| CN110347378A (zh) * | 2019-07-12 | 2019-10-18 | 北京明略软件系统有限公司 | 项目开发环境的搭建方法及装置 |
| CN110389751A (zh) * | 2019-07-17 | 2019-10-29 | 北京海致星图科技有限公司 | 一种应用于知识图谱的数据接口mock方法 |
| CN110389751B (zh) * | 2019-07-17 | 2022-02-08 | 北京海致星图科技有限公司 | 一种应用于知识图谱的数据接口mock方法 |
| CN110389755A (zh) * | 2019-07-24 | 2019-10-29 | 网易（杭州）网络有限公司 | 代码处理方法及装置、电子设备和计算机可读存储介质 |
| CN110659062B (zh) * | 2019-09-20 | 2023-09-29 | 贝壳技术有限公司 | 前端脚手架的配置方法和装置、可读存储介质、电子设备 |
| CN110659062A (zh) * | 2019-09-20 | 2020-01-07 | 贝壳技术有限公司 | 前端脚手架的配置方法和装置、可读存储介质、电子设备 |
| CN110825385A (zh) * | 2019-10-29 | 2020-02-21 | 福建天泉教育科技有限公司 | React Native离线包的构建方法及存储介质 |
| CN110795088B (zh) * | 2019-10-29 | 2021-05-04 | 京东数字科技控股有限公司 | 前端工程项目构建方法和工具、计算机可读存储介质 |
| CN110825385B (zh) * | 2019-10-29 | 2023-02-28 | 福建天泉教育科技有限公司 | React Native离线包的构建方法及存储介质 |
| CN110795088A (zh) * | 2019-10-29 | 2020-02-14 | 京东数字科技控股有限公司 | 前端工程项目构建方法和工具、计算机可读存储介质 |
| CN110968339B (zh) * | 2019-12-03 | 2023-08-15 | 望海康信(北京)科技股份公司 | 前端构建工具的方法、装置以及电子设备 |
| CN110968339A (zh) * | 2019-12-03 | 2020-04-07 | 望海康信(北京)科技股份公司 | 前端构建工具的方法、装置以及电子设备 |
| CN111124576A (zh) * | 2019-12-23 | 2020-05-08 | 焦点科技股份有限公司 | 一种多平台小程序及h5页面适配的方法及系统 |
| CN111124576B (zh) * | 2019-12-23 | 2022-08-09 | 焦点科技股份有限公司 | 一种多平台小程序及h5页面适配的方法及系统 |
| CN111290753A (zh) * | 2020-01-20 | 2020-06-16 | 远光软件股份有限公司 | 前端开发环境的搭建方法、装置、设备及存储介质 |
| CN111258583A (zh) * | 2020-02-24 | 2020-06-09 | 厦门快商通科技股份有限公司 | 一种实现前端开发多模板支持的脚手架系统 |
| CN111273898A (zh) * | 2020-02-25 | 2020-06-12 | 安徽以萨数据技术有限公司 | web前端代码自动化构建方法、系统及存储介质 |
| CN111273898B (zh) * | 2020-02-25 | 2024-03-19 | 安徽以萨数据技术有限公司 | web前端代码自动化构建方法、系统及存储介质 |
| CN111857810A (zh) * | 2020-07-30 | 2020-10-30 | 上海妙一生物科技有限公司 | 一种前端开发文件创建方法、装置及电子设备 |
| CN111897520A (zh) * | 2020-07-31 | 2020-11-06 | 平安科技（深圳）有限公司 | 前端项目框架的构建方法、装置、计算机设备及存储介质 |
| CN112083924A (zh) * | 2020-08-28 | 2020-12-15 | 杭州数云信息技术有限公司 | 一种软件设计界面一致性提升方法及工具 |
| CN112162747A (zh) * | 2020-09-25 | 2021-01-01 | 同程网络科技股份有限公司 | 一种前端页面组件化的方法、装置及计算机可读存储介质 |
| CN112199080A (zh) * | 2020-09-28 | 2021-01-08 | 上海上讯信息技术股份有限公司 | vuejs项目webpack构建方法及设备 |
| CN112199080B (zh) * | 2020-09-28 | 2023-02-17 | 上海上讯信息技术股份有限公司 | vuejs项目webpack构建方法及设备 |
| CN112099794A (zh) * | 2020-09-28 | 2020-12-18 | 中国银行股份有限公司 | 前端项目构建方法及装置 |
| CN112181432B (zh) * | 2020-10-13 | 2024-05-17 | 普元信息技术股份有限公司 | ReactNative框架中实现bundle的模块化打包处理的系统 |
| CN112181432A (zh) * | 2020-10-13 | 2021-01-05 | 普元信息技术股份有限公司 | ReactNative框架中实现bundle的模块化打包处理的系统 |
| CN112230918B (zh) * | 2020-10-15 | 2022-08-19 | 四川长虹电器股份有限公司 | 一种使用iframe内嵌网页的web端开发方法 |
| CN112230918A (zh) * | 2020-10-15 | 2021-01-15 | 四川长虹电器股份有限公司 | 一种使用iframe内嵌网页的web端开发方法 |
| CN112286504A (zh) * | 2020-11-12 | 2021-01-29 | 普元信息技术股份有限公司 | 移动APP中基于ReactNative实现小程序开发并加载的方法 |
| CN112685035B (zh) * | 2020-12-25 | 2024-05-17 | 京东科技控股股份有限公司 | 项目开发方法及装置、计算机可读存储介质、电子设备 |
| CN112685035A (zh) * | 2020-12-25 | 2021-04-20 | 京东数字科技控股股份有限公司 | 项目开发方法及装置、计算机可读存储介质、电子设备 |
| WO2022142896A1 (zh) * | 2020-12-30 | 2022-07-07 | 京东科技控股股份有限公司 | 可视化模板的生成方法、装置、设备及存储介质 |
| CN112685029A (zh) * | 2020-12-30 | 2021-04-20 | 京东数字科技控股股份有限公司 | 一种可视化模板的生成方法、装置、设备及存储介质 |
| CN112732228A (zh) * | 2020-12-31 | 2021-04-30 | 国泰君安证券股份有限公司 | 适用于生产环境中实现构建信息快速查询的系统 |
| CN112860278A (zh) * | 2021-02-08 | 2021-05-28 | 杭州玳数科技有限公司 | 一种依赖nodejs统一打包的前端终端工具 |
| CN113343143A (zh) * | 2021-05-24 | 2021-09-03 | 上海万物新生环保科技集团有限公司 | 一种流式加载网页模板的方法及设备 |
| WO2022247594A1 (zh) * | 2021-05-28 | 2022-12-01 | 腾讯科技（深圳）有限公司 | 一种页面呈现方法、装置、电子设备、计算机可读存储介质、及计算机程序产品 |
| CN113342400A (zh) * | 2021-06-29 | 2021-09-03 | 上海哔哩哔哩科技有限公司 | 离线包打包方法、装置及计算机设备 |
| CN113448559A (zh) * | 2021-07-13 | 2021-09-28 | 壹药网科技(上海)股份有限公司 | 一种针对多开发项目的全球广域网前端的开发系统和方法 |
| CN113590089A (zh) * | 2021-07-23 | 2021-11-02 | 北京有竹居网络技术有限公司 | 一种前端工程脚手架和工程套件创建方法、设备及介质 |
| CN113721907A (zh) * | 2021-08-31 | 2021-11-30 | 平安国际智慧城市科技股份有限公司 | 前端开发方法、装置、设备及存储介质 |
| CN116069325A (zh) * | 2023-01-28 | 2023-05-05 | 深圳市明源云采购科技有限公司 | 前端项目构建方法、装置、设备及计算机可读存储介质 |
| CN116069325B (zh) * | 2023-01-28 | 2023-08-04 | 深圳市明源云采购科技有限公司 | 前端项目构建方法、装置、设备及计算机可读存储介质 |
Also Published As
| Publication number | Publication date |
|---|---|
| CN106843869B (zh) | 2020-04-14 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN106843869A (zh) | 一种前端开发工程化系统和方法 | |
| CN106371825B (zh) | 一种移动端应用界面表单动态生成方法及装置 | |
| Wettinger et al. | Integrating Configuration Management with Model-driven Cloud Management based on TOSCA. | |
| Perchat et al. | Component based framework to create mobile cross-platform applications | |
| CN108536431A (zh) | 一种全局命令行创建前端项目方法及系统 | |
| CN102023856A (zh) | 根据用户的需求格式化输出及操作伺服端业务数据的方法 | |
| CN113064593B (zh) | 移动app动态化的方法、装置、计算机设备及存储介质 | |
| Di Martino et al. | A rule‐based procedure for automatic recognition of design patterns in UML diagrams | |
| El-Kassas et al. | ICPMD: Integrated cross-platform mobile development solution | |
| Marzolla | Simulation-based performance modeling of UML software architectures. | |
| CN103136100B (zh) | 一种Android测试的方法和系统 | |
| Benouda et al. | Automatic code generation within MDA approach for cross-platform mobiles apps | |
| CN102693238A (zh) | Widget应用方法、系统及多媒体终端 | |
| Mannadiar et al. | Domain-specific engineering of domain-specific languages | |
| Simonsen | PetriCode: a tool for template-based code generation from CPN models | |
| CN101303663A (zh) | 一种数字机顶盒软件开发模拟测试方法 | |
| de Carvalho Silva et al. | A platform of scientific workflows for orchestration of parallel components in a cloud of high performance computing applications | |
| Martinez et al. | Migrating c/c++ software to mobile platforms in the adm context | |
| CN104657139B (zh) | 用于故障注入的可视化命令流生成系统及方法 | |
| CN111857782B (zh) | 界面更新方法、装置、计算机设备和存储介质 | |
| Eclipse et al. | Model Decomposition of Robustness Diagram with Loop and Time Controls to Sequence Diagrams | |
| Zhang et al. | Research of web front-end engineering solution in public cultural service project | |
| CN111880775A (zh) | 多模块分层架构实现方法、装置、电子设备、存储介质 | |
| Bryksin et al. | Ubiq Mobile+ QReal a Technology for Development of Distributed Mobile Services | |
| Asp | A comparison of Ionic 2 versus React Native and Android in terms of performance, by comparing the performance of applications |
Legal Events
| Date | Code | Title | Description |
|---|---|---|---|
| PB01 | Publication | ||
| PB01 | Publication | ||
| SE01 | Entry into force of request for substantive examination | ||
| SE01 | Entry into force of request for substantive examination | ||
| CB02 | Change of applicant information | ||
| CB02 | Change of applicant information |
Address after: 100000 Beijing City, Shijingshan District Shijingshan Road, No. 31 hospital Shengjing International Plaza Building 3, 607 Applicant after: Bairong Yunchuang Technology Co., Ltd. Address before: 100000 Beijing City, Shijingshan District Shijingshan Road, No. 31 hospital Shengjing International Plaza Building 3, 607 Applicant before: Bai Rong (Beijing) financial information service Limited by Share Ltd |
|
| GR01 | Patent grant | ||
| GR01 | Patent grant |