CN108536431A - 一种全局命令行创建前端项目方法及系统 - Google Patents

Abstract

本发明公开了一种全局命令行创建前端项目方法及系统，其技术方案要点是其特征在于，包括如下步骤：建立预设的项目开发目录；对项目开发目录中的静态资源进行实时编译，其中，静态资源包括JavaScript文件、层叠样式表文件以及图片资源；根据编译结果进行优化处理，压缩合并以生成可被识别文件；将所述可被识别文件上传至服务器。通过制定统一的项目开发目录，使得具有统一的目录结构和开发工具，由此达到了相互分离的各个开发过程整合到一起，方便开发人员之间的代码共享和代码的统一，从而提高开发效率。

Description

一种全局命令行创建前端项目方法及系统

技术领域

本发明涉及网络开发技术领域，特别涉及一种全局命令行创建前端项目方法及系统。

背景技术

随着前端技术在开发中日益重要，前端开发人员在项目中占比越来越大，开大人员之间的项目创建和维护越来越重要。在构建前端开发存在以下问题：

1、由于前端开发的内容繁多，不同的框架使用工具也多样化，不同的框架使用不同的构建工具，导致不同的开发人员使用不同的目录结构和管理，使得开发结构不统一，协作交流成本提高；

2、从开发结构确认到预编译、调试、测试、上线、线上包、以及线上环境配置缺少自动化部署，导致开发量增加；

3、前端开发需要考虑模板文件、JavaScript文件和层叠样式表（CSS）文件，这些静态资源的压缩、编译存在参差不齐的开发工具，不同工具之间的配合往往较差，严重会影响开发人员的效率。

因此，为了避免上述情况，统一的全局命令行创建、构建、开发、调试项目就显得日益重要。

发明内容

针对现有技术存在的不足，本发明的目的在于提供一种全局命令行创建前端项目方法，具有提高开发人员开发效率的特点。

本发明的上述技术目的是通过以下技术方案得以实现的：

一种全局命令行创建前端项目方法，包括如下步骤：

建立预设的项目开发目录；

对项目开发目录中的静态资源进行实时编译，其中，静态资源包括JavaScript文件、层叠样式表文件以及图片资源；

根据编译结果进行优化处理，压缩合并以生成可被识别文件；

将所述可被识别文件上传至服务器。

通过上述技术方案，通过制定统一的项目开发目录，使得具有统一的目录结构和开发工具，由此达到了相互分离的各个开发过程整合到一起，方便开发人员之间的代码共享和代码的统一，从而提高开发效率。

优选的，在建立预设的项目开发目录中，包括如下步骤：

建立若干局部命令行，其中，每个局部命令行与项目开发目录中的子目录相关联；

将若干局部命令行进行整合以形成所述全局命令行；

获取键入的全局命令行以生成所述项目开发目录。

通过上述技术方案，通过局部命令行的形式建立预设的项目开发目录中的子目录，将局部命令行整合形成全局命令行，通过在开发页面中键入全局命令行的形式，能够将整体的项目开发目录进行建立，以提高项目开发目录建立的效率，从而提高工作人员的开发效率，以及达到项目开发目录的统一标准。

优选的，在获取键入的全局命令行以生成所述项目开发目录中，还包括如下步骤：

基于所述全局命令行生成关于项目开发目录的基础信息录入窗口；

在基础信息录入窗口中，携带有供用户键入项目名称和项目版本号的填充区域、针对于项目开发框架的添加事件、以及针对于是否导入项目开发资源包的选择事件；

基于基础信息录入窗口中的录入信息生成所述项目开发目录。

通过上述技术方案，在生成项目开发目录后，通过基础信息录入窗口进行录入，其中，录入信号包括有项目名称和项目版本号，项目开发框架的选择以及是否导入项目开发资源包的选择，开发人员通过上述选定后，能够进一步确定项目开发目录的统一性，以进一步提高开发人员的开发效率。

优选的，在建立预设的项目开发目录之后，还包括如下步骤：

对项目开发目录中的公共静态资源进行预编译。

通过上述技术方案，通过对公共静态资源进行预编译，将公共静态资源中的内容包预编译成一个公共包，由此，提高了编译效率，避免在实时编译中反复编译公共静态资源中的内容包。

优选的，对项目开发目录中的公共静态资源进行预编译之后，还包括如下步骤：

建立对项目开发目录中静态资源热更新的代码接口；

通过该代码接口注入热更新代码后对项目开发目录中的静态资源进行实时编译。

通过上述技术方案，通过热更新代码的注入，能够达到浏览器中页面无刷新更新，并且与上述对项目开发目录中的公共静态资源进行预编译进行配合，由此进一步提高了开发人员的开发效率。

优选的，根据编译结果进行优化处理，压缩合并以生成可被识别文件，包括如下步骤：

对编译结果进行测试优化；

将测试后的编译结果打包压缩合并处理生成可被识别文件；

将可被识别文件进行线上环境配置。

优选的，在将所述可被识别文件上传至服务器之后，还包括如下步骤：

对可识别文件进行分析处理，生成轻量的压缩可识别文件。

通过上述技术方案，通过对可识别进行分析处理，去除可识别文件中重复的代码段落，有效减少代码大小形成轻量的压缩可识别文件，用户的浏览器打开后，浏览器识别上述的压缩可识别文件，以有效提高浏览器识别的响应速度。

优选的，通过Browserify工具、Webpack工具或Parcel工具进行编译。

针对现有技术存在的不足，本发明的另一个目的在于提供一种全局命令行创建前端项目系统，具有提高开发人员开发效率的特点。

本发明的上述技术目的是通过以下技术方案得以实现的：

一种全局命令行创建前端项目系统，包括：

建立单元，建立预设的项目开发目录；

编译单元，对项目开发目录中的静态资源进行实时编译，其中，静态资源包括JavaScript文件、层叠样式表文件以及图片资源；

优化单元，根据编译结果进行优化处理，压缩合并以生成可被识别文件；

上传单元，将所述可被识别文件上传至服务器。

综上所述，本发明对比于现有技术的有益效果为：

通过制定统一的项目开发目录，使得具有统一的目录结构和开发工具，由此达到了相互分离的各个开发过程整合到一起，方便开发人员之间的代码共享和代码的统一，从而提高开发效率。

附图说明

通过阅读参照以下附图对非限制性实施例所作的详细描述，本发明的其他特征、目的和优点将会变得更明显：

图1为实施例的流程框架图。

具体实施方式

为了更好的使本发明的技术方案清晰的表示出来，下面结合附图对本发明作进一步说明。

本发明实施例提出了一种全局命令行创建前端项目方法及系统。本实施例是以Node.js为运行环境运行。现对本实施例中出现的名词做出如下解释：

1、Node.js：Node.js是一个JavaScript运行环境（runtime）。实际上它是对GoogleV8引擎进行了封装。V8引擎执行JavaScript的速度非常快，性能非常好。Node.js对一些特殊用例进行了优化，提供了替代的API，使得V8在非浏览器环境下运行得更好。Node.js是一个基于Chrome JavaScript运行时建立的平台，用于方便地搭建响应速度快、易于扩展的网络应用。Node.js使用事件驱动，非阻塞I/O模型而得以轻量和高效，非常适合在分布式设备上运行数据密集型的实时应用。

2、Webpack：Webpack是一款用户打包前端模块的工具。主要用来打包在浏览器端使用的JavaScript的，同时也能转换、捆绑、打包其他的静态资源，包括css、image、fontfile、template等。

3、npm：NPM的全称是Node Package Manager，是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。

4、js：JavaScript的缩写。JavaScript是世界上最流行的编程语言之一，被广泛应用于HTML和Web领域，并被广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript是一种脚本语言、一种轻量级的编程语言、可插入HTML页面的编程代码。当js被插入到HTML页面后，可由所有的现代浏览器执行。

实施例一

本发明实施例提供一种如图1所示的全局命令行创建前端项目方法，该方法可以由网页前端开发装置执行，其中该装置可由软件和/或硬件实现。

该方法包括如下步骤：

步骤S100，建立预设的项目开发目录。

具体地，在开始开发项目时，需要建立标准化、统一化目录结构的项目开发目录来提高开发人员的开发效率。其中，在建立预设的项目开发目录中，包括步骤S110，需要预先建立若干局部命令行，其中，每个局部命令行与项目开发目录中的子目录相关联。步骤S120,将若干局部命令行进行整合以形成所述全局命令行。步骤S130,获取键入的全局命令行以生成所述项目开发目录。

即在项目开发时，输入局部命令行将在本地客户端生成相应的项目开发目录的子目录，这样显然造成项目开发目录的统一、标准程度较低，由此，通过局部命令行的整合形成的全局命令行，如开发人员键入npm install –g tr-cli时，将在本地客户端生成标准化、统一化的项目开发目录。

值得说明的是，在获取键入的全局命令行以生成所述项目开发目录中，还包括如下步骤：

步骤S131,基于所述全局命令行生成关于项目开发目录的基础信息录入窗口；

步骤S132，在基础信息录入窗口中，携带有供用户键入项目名称name和项目版本号version的填充区域、针对于项目开发框架select framework的添加事件、以及针对于是否导入项目开发资源包install default npm package的选择事件；本申请中，项目开发框架包括开发需要的主流框架，如React、VUE、jQuery等。其中，项目开发资源包括中存储有开发需要的技术包。

步骤S133,基于基础信息录入窗口中的录入信息生成所述项目开发目录。由此，通过上述基础信息录入窗口的录入信息后，能够根据后续开发人员的需求去选定项目开发框架、以及是否导入预设的项目开发资源包，也可以根据需要去导入新的项目开发资源包，制定统一的项目开发框架，并且提前导入项目开发资源包，减少项目开发资源包加载时间，以有效提高后续开发人员的开发效率。

值得说明的是，在建立预设的项目开发目录之后，还包括如下步骤：

步骤S140，对项目开发目录中的公共静态资源进行预编译，即对项目开发目录中的公共静态资源进行预打包编译。并在预打包编译之后包括步骤S200，对项目开发目录中的静态资源进行实时编译，其中，静态资源包括npm包、模块文件，模块文件包括模板文件、JavaScript文件、层叠样式表（CSS）文件以及图片资源，模板文件可为velocity模板文件。

具体地，在项目开发中通过命令行npm run startpre，对公共静态资源（公共包）进行预编译的过程是将项目开发目录中的公共静态资源进行合并，打包成一个公共包，剔除没有用的引用，从而提高开发编译的效率，避免实时编译中反复对公共静态资源进行编译。

其中，本申请中预编译、以及实时编译通过Browserify工具、Webpack工具或Parcel工具的编译引擎功能进行编译。静态资源编译存在不同的编译工具，假设基于同样大小的web应用，1700多的模块文件，6M多的未压缩文件，同等条件的硬件配置，打包时间Browserify大约为23秒，Webpack大约为20秒，Parcel大约为10秒。从现有的技术生态出发，Browserify，Webpack有着比较成熟的生态资源，从打包时间出发，Parcel有很强的优势，当然这也是基于以上条件的测试，并且在压缩文件处理上，基于以上配置压缩后的文件大小，Parcel压缩大小约Webpack的一倍左右。所以在小型到中型规模的项目中可以使用Parcel，在大型以及企业级规模的项目推荐Webpack。这一点可以从构建工具本身进行约束，在打包构建时，根据读取本地文件数据进行选择。本实施例中，采用Webpack工具。

其中，对项目开发目录中的公共静态资源进行预编译之后，还包括如下步骤：

步骤S150,建立对项目开发目录中静态资源热更新的代码接口；

步骤S160，通过该代码接口注入热更新代码后，进入到步骤S200中，以对项目开发目录中的静态资源进行实时编译。

热更新的实现原理如下，当浏览器的页面首次打开后，服务器与客户端通过建立通信渠道，把下一次的hash返回前端，客户端获取到hash，这个hash将作为下一次请求服务器hot-update.js和hot-update.json的hash，修改页面代码后，Webpack监听到文件修改后，开始编译，编译完成后，发送build消息给客户端，客户端获取到hash，成功后客户端构造hot-update.js script连接，然后插入主文档，hot-update.js插入成功后，执行hotAPI的createRecord和reload方法，获取到Vue组件的render方法，重新render组件，继而实现页面无刷新更新。即完成热更新的代码注入后，当项目开发目录中的静态资源发生变化时，对项目开发目录中的静态资源进行实时编译，并且实现浏览器页面的无刷新更新。

具体地，在开发调试过程中进行实时编译，具体采用npm run start命令行生成开发页面，开发人员在开发调试阶段完成代码的录入。如在开发调试过程中应用热更新，将直接在开发页面进行数据更新，而无需开发人员手动刷新开发页面进行数据更新，通过上述方式，能够提高开发人员的开发速度，以进一步提高开发效率。

步骤S300，根据编译结果进行优化处理，压缩合并以生成可被识别文件。其中，根据编译结果进行优化处理，压缩合并以生成可被识别文件，包括如下步骤：

步骤S310,对编译结果进行测试优化。具体地，本申请中应用Webpack工具中的bundle-analyzer（可视化视图查看器）插件对编译结果进行优化，具体通过npm run build命令行进行，用于查看经过webpack打包后所有组件与组件之间的依赖关系，针对多余的包文件过大，剔除首次影响加载的效率问题进行剔除修改。

步骤S320, 将测试后的编译结果打包压缩合并处理生成可被识别文件。具体地，如将测试后的编译结果中多个JS文件、CSS文件进行合并，成为一个文件，以减少浏览器请求数。

步骤S330,将可被识别文件进行线上环境配置。具体包括服务器选择的配置、服务器地址的配置、服务器代理的配置等。

在完成配置后，进入到步骤S400中，将所述可被识别文件上传至服务器。

具体地，在将所述可被识别文件上传至服务器之后，还包括如下步骤：步骤S500,对可识别文件进行分析处理，生成轻量的压缩可识别文件。

通过对可识别进行分析处理，去除可识别文件中重复的代码段落，有效减少代码大小形成轻量的压缩可识别文件，用户的浏览器打开后，浏览器识别上述的压缩可识别文件，以有效提高浏览器识别的响应速度。

本申请中可被识别文件上传至服务器中，该服务器可包括测试服务器和发布服务器，测试人员通过测试服务器完成该Web前端的内测。在完成调试后，通过改变域名通过发布服务器发布到互联网，用户在客户端上浏览器中键入域名即可进入到Web页面中。

工作过程：

在新建一个项目时，本申请通过全局命令行的键入，可在项目开发中直接生成标准化、统一化的项目开发目录，由此每个开发人员能够根据标准化的项目开发目录进行开发调试。通过制定统一的项目开发目录，使得具有统一的目录结构和开发工具，由此达到了相互分离的各个开发过程整合到一起，省去开发过程中在不同工具之间进行切换的繁琐步骤，方便开发人员之间的代码共享和代码的统一，从而提高开发效率。

实施例二

一种全局命令行创建前端项目系统，包括：

建立单元，建立预设的项目开发目录；

编译单元，对项目开发目录中的静态资源进行实时编译，其中，静态资源包括JavaScript文件、层叠样式表文件以及图片资源；

优化单元，根据编译结果进行优化处理，压缩合并以生成可被识别文件；

上传单元，将所述可被识别文件上传至服务器。

以上所述仅是本发明的优选实施方式，本发明的保护范围并不仅局限于上述实施例，凡属于本发明思路下的技术方案均属于本发明的保护范围。应当指出，对于本技术领域的普通技术人员来说，在不脱离本发明原理前提下的若干改进和润饰，这些改进和润饰也应视为本发明的保护范围。

Claims (9)

1.一种全局命令行创建前端项目方法，其特征在于，包括如下步骤：

建立预设的项目开发目录；

对项目开发目录中的静态资源进行实时编译，其中，静态资源包括JavaScript文件、层叠样式表文件以及图片资源；

根据编译结果进行优化处理，压缩合并以生成可被识别文件；

将所述可被识别文件上传至服务器。

2.根据权利要求1所述的一种全局命令行创建前端项目方法，其特征在于，在建立预设的项目开发目录中，包括如下步骤：

建立若干局部命令行，其中，每个局部命令行与项目开发目录中的子目录相关联；

将若干局部命令行进行整合以形成所述全局命令行；

获取键入的全局命令行以生成所述项目开发目录。

3.根据权利要求2所述的一种全局命令行创建前端项目方法，其特征在于，在获取键入的全局命令行以生成所述项目开发目录中，还包括如下步骤：

基于所述全局命令行生成关于项目开发目录的基础信息录入窗口；

在基础信息录入窗口中，携带有供用户键入项目名称和项目版本号的填充区域、针对于项目开发框架的添加事件、以及针对于是否导入项目开发资源包的选择事件；

基于基础信息录入窗口中的录入信息生成所述项目开发目录。

4.根据权利要求1所述的一种全局命令行创建前端项目方法，其特征在于，在建立预设的项目开发目录之后，还包括如下步骤：

对项目开发目录中的公共静态资源进行预编译。

5.根据权利要求4所述的一种全局命令行创建前端项目方法，其特征在于，对项目开发目录中的公共静态资源进行预编译之后，还包括如下步骤：

建立对项目开发目录中静态资源热更新的代码接口；

通过该代码接口注入热更新代码后对项目开发目录中的静态资源进行实时编译。

6.根据权利要求1所述的一种全局命令行创建前端项目方法，其特征在于，根据编译结果进行优化处理，压缩合并以生成可被识别文件，包括如下步骤：

对编译结果进行测试优化；

将测试后的编译结果打包压缩合并处理生成可被识别文件；

将可被识别文件进行线上环境配置。

7.根据权利要求1所述的一种全局命令行创建前端项目方法，其特征在于，在将所述可被识别文件上传至服务器之后，还包括如下步骤：

对可识别文件进行分析处理，生成轻量的压缩可识别文件。

8.根据权利要求1所述的一种全局命令行创建前端项目方法，其特征在于，通过Browserify工具、Webpack工具或Parcel工具进行编译。

9.一种全局命令行创建前端项目系统，其特征在于，包括：

建立单元，建立预设的项目开发目录；

编译单元，对项目开发目录中的静态资源进行实时编译，其中，静态资源包括JavaScript文件、层叠样式表文件以及图片资源；

优化单元，根据编译结果进行优化处理，压缩合并以生成可被识别文件；

上传单元，将所述可被识别文件上传至服务器。