CN110347378A

CN110347378A - 项目开发环境的搭建方法及装置

Info

Publication number: CN110347378A
Application number: CN201910631820.3A
Authority: CN
Inventors: 宋超; 洪强
Original assignee: Beijing Mininglamp Software System Co ltd
Current assignee: Beijing Mininglamp Software System Co ltd
Priority date: 2019-07-12
Filing date: 2019-07-12
Publication date: 2019-10-18

Abstract

本申请提供了一种项目开发环境的搭建方法及装置，其中，该方法包括：建立TypeScript环境和React环境，用于接收程序语言；建立node环境，用于对所述程序语言进行打包编译；建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。采用上述方案，充分利用React技术随处编写的特点，大幅加快了搭建项目开发环境的速度，解决了相关技术中搭建项目开发环境的效率较低的问题。

Description

项目开发环境的搭建方法及装置

技术领域

本申请涉及但不限于计算机领域，具体而言，涉及一种项目开发环境的搭建方法及装置。

背景技术

在相关技术中，React作为目前前端领域最流行的技术框架之一，已经拥有越来越多的开发使用者和社区维护者，react的出现让我们对于前端的重新构建的思考可以说具有颠覆性的意义，其官方指出其最主要的三个特性声明式，组件化、一次学习，以及随处编写，这三个特性背后的思想的确与曾经著名的jQuery有着天壤之别，jQuery是个Javascript库。

Koa是一个新的web框架，由Express幕后的原班人马打造，致力于成为web应用和API开发领域中的一个更小、更富有表现力、更健壮的基石。通过利用异步async函数，Koa帮你丢弃回调函数，并有力地增强错误处理。Koa并没有捆绑任何中间件，而是提供了一套优雅的方法，帮助您快速而愉快地编写服务端应用程序。

针对相关技术中搭建项目开发环境的效率较低的问题，目前还没有有效的解决方案。

发明内容

本申请实施例提供了一种项目开发环境的搭建方法及装置，以至少解决相关技术中搭建项目开发环境的效率较低的问题。

根据本申请的一个实施例，提供了一种项目开发环境的搭建方法，包括：建立TypeScript环境和React环境，用于接收程序语言；建立node环境，用于对所述程序语言进行打包编译；建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。

根据本申请的另一个实施例，还提供了一种项目开发环境的搭建装置，包括：第一建立模块，用于建立TypeScript环境和React环境，用于接收程序语言；第二建立模块，用于建立node环境，用于对所述程序语言进行打包编译；第三建立模块，用于建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；第四建立模块，用于基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；传输模块，用于配置服务器环境，以及用于在配置完成后，传输所述程序语言至所述服务器。

根据本申请的又一个实施例，还提供了一种存储介质，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行上述任一项方法实施例中的步骤。

根据本申请的又一个实施例，还提供了一种电子装置，包括存储器和处理器，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行上述任一项方法实施例中的步骤。

通过本申请，建立TypeScript环境和React环境，用于接收程序语言；建立node环境，用于对所述程序语言进行打包编译；建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。采用上述方案，充分利用React技术随处编写的特点，大幅加快了搭建项目开发环境的速度，解决了相关技术中搭建项目开发环境的效率较低的问题。

附图说明

此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是本申请实施例的一种项目开发环境的搭建方法的计算机终端的硬件结构框图；

图2是根据本申请实施例的项目开发环境的搭建方法的流程图。

具体实施方式

下文中将参考附图并结合实施例来详细说明本申请。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。

下面对本申请的技术术语进行说明：

Typescript：TypeScript是直译式脚本语言JavaScript的一个超集，支持ECMAScript 6标准。TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript可以运行在任何浏览器上。

Less是一门层叠样式表CSS(Cascading Style Sheets，简称为CSS)预处理语言，它扩展了CSS语言，增加了变量、Mixin、函数等特性，使CSS更易维护和扩展。Less可以运行在Node或浏览器端。

Webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个bundle。

ESLint最初是由Nicholas C.Zakas于2013年6月创建的开源项目。它的目标是提供一个插件化的javascript代码检测工具。

Jest是相关技术中的一款测试框架，集成了Mocha，chai，jsdom，sinon等功能。

MongoDB是一个基于分布式文件存储的数据库。由C++语言编写。旨在为WEB应用提供可扩展的高性能数据存储解决方案。

GraphQL既是一种用于API的查询语言也是一个满足你数据查询的运行时。GraphQL对API中的数据提供了一套易于理解的完整描述，使得客户端能够准确地获得它需要的数据，而且没有任何冗余，也让API更容易地随着时间推移而演进，还能用于构建强大的开发者工具。

实施例一

本申请实施例一所提供的方法实施例可以在计算机终端、计算机终端或者类似的运算装置中执行。以运行在计算机终端上为例，图1是本申请实施例的一种项目开发环境的搭建方法的计算机终端的硬件结构框图，如图1所示，计算机终端可以包括一个或多个(图1中仅示出一个)处理器102(处理器102可以包括但不限于微处理器MCU或可编程逻辑器件FPGA等的处理装置)和用于存储数据的存储器104，可选地，上述计算机终端还可以包括用于通信功能的传输装置106以及输入输出设备108。本领域普通技术人员可以理解，图1所示的结构仅为示意，其并不对上述计算机终端的结构造成限定。例如，计算机终端还可包括比图1中所示更多或者更少的组件，或者具有与图1所示不同的配置。

存储器104可用于存储应用软件的软件程序以及模块，如本申请实施例中的项目开发环境的搭建方法对应的程序指令/模块，处理器102通过运行存储在存储器104内的软件程序以及模块，从而执行各种功能应用以及数据处理，即实现上述的方法。存储器104可包括高速随机存储器，还可包括非易失性存储器，如一个或者多个磁性存储装置、闪存、或者其他非易失性固态存储器。在一些实例中，存储器104可进一步包括相对于处理器102远程设置的存储器，这些远程存储器可以通过网络连接至计算机终端。上述网络的实例包括但不限于互联网、企业内部网、局域网、移动通信网及其组合。

传输装置106用于经由一个网络接收或者发送数据。上述的网络具体实例可包括计算机终端的通信供应商提供的无线网络。在一个实例中，传输装置106包括一个网络适配器(Network Interface Controller，NIC)，其可通过基站与其他网络设备相连从而可与互联网进行通讯。在一个实例中，传输装置106可以为射频(Radio Frequency，RF)模块，其用于通过无线方式与互联网进行通讯。

在本实施例中提供了一种运行于上述计算机终端的项目开发环境的搭建方法，图2是根据本申请实施例的项目开发环境的搭建方法的流程图，如图2所示，该流程包括如下步骤：

步骤S202，建立TypeScript环境和React环境，用于接收程序语言；

步骤S204，建立node环境，用于对所述程序语言进行打包编译；

步骤S206，建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；

步骤S208，基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；

步骤S2010，配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。

通过上述步骤，建立TypeScript环境和React环境，用于接收程序语言；建立node环境，用于对所述程序语言进行打包编译；建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。采用上述方案，充分利用React技术随处编写的特点，大幅加快了搭建项目开发环境的速度，解决了相关技术中搭建项目开发环境的效率较低的问题。

可选地，建立TypeScript环境，包括：新建tsconfig.json文件；配置eslint支持Typescript语言；选择babel作为编译器。Eslint是一个语法规则和代码风格的检查工具，它的目标是保证代码的一致性，避免错误。Babel是一个Javascript的编译器。

可选地，建立React环境，包括：新建Html(Hyper Text Markup language，简称为HTML)文件，用于挂载文件对象模型(Document Object Model，简称为dom)；新建index.tsc文件，用于引入组件，并调用render方法将组件渲染至预先建立的根节点中；实现React项目分层；配置Webpack，用于对所述程序语言进行打包；编写npm script，用于启动开发模式。Render函数可以具备Javascript的完全编程的能力。Node的开发可以使用到npm，npmscript脚本功能是npm最强大、最常用的功能之一。

可选地，建立GraphQL环境，包括：通过配置gulp的方式建立GraphQL环境。Gulp是一个前端构建工具，gulp使用的是nodejs中的stream来读取和操作数据，速度较快。

可选地，建立GraphQL环境，包括：通过apollo建立所述GraphQL环境；使用schema定义查询请求的类型，查询结果返回格式。Schema即XML Schema，指出如何形式描述XML文档的元素。Apollo是GraphQL库，可以让使用GraphQL API变得更容易，它有两个主要的组件：Apollo代码生成，网络和缓存组件。

可选地，配置服务器支持GraphQL，配置服务器为apollo server。GraphQL是一种用于API的查询语言，需要服务器端配置Graphql支持，同时也需要客户端使用Graphql语法的格式进行请求。使用apollo更快的搭建Graphql环境。服务器端配置apollo-server。使用schema，定义请求的类型，返回的格式。使用resolvers来处理对应的schema。客户端配置apollo-client。按照apollo-server定义的schema，来请求数据。

本发明实施例中选定react作为前端开发环境，koa作为后端开发环境，同时引入了强类型语言Typescript，css预编译器less，以及webpack作为构建工具，eslint辅助代码规范执行，jest作为测试框架，mongodb作为数据库存储，graphQl作为后台接口方式。

本申请实施例中的方案包括以下步骤：

步骤1)搭建TypeScript环境：

a)新建tsconfig.json文件。tsc-init生成初始化tsconfig.json文件。vscode会根据tsconfig.json文件，进行动态类型检查，语法错误提示等。tsc命令会根据tsconfig.json文件配置的规则，将ts代码转换为js代码。tslint会读取tsconfig.json文件中的规则，辅助编码规范校验。

b)配置eslint。根据typescript-eslint引导，配置eslint对typescript的支持。

@typescript-eslint/parser解析ts语法。@typescript-eslint/eslint-plugin为ts文件应用eslint和tslint规则。

c)选择一个typescript编译器，可以使用babel。使用babel的优点如下：babel社区有许多非常好的插件，babel-preset-env可以支持到具体兼容浏览器的版本号，而tsc编译器没这个功能。babel可以同时支持编译js和ts，所以没必要在引入tsc编译ts文件，同时只管理一个编译器，可维护性更高。

babel编译速度更快。tsc编译器需要遍历所有类型定义文件(*.d.ts)，包括node_modules里的，以确保代码中正确地使用，type太多会造成卡顿。

步骤2)搭建React环境：

a)新建一个html文件，并在body中创建一个根节点，用于挂载react最后生成的dom。

b)新建一个index.tsx文件，用于将项目中的所有组件，引入进来，并调用render方法，将组件渲染到根节点中。

c)React项目分层。containers目录，存放单独的页面；components目录，存放的是组件，一个组件包含jsx和css两个部分。context目录，存放公用的react context。config目录，存放公共配置文件。utils目录，公用的函数组件库。constants目录，存放静态变量。

d)配置webpack，以index.tsx为入口文件，进行打包编译。由于不同环境的打包方式并不相同，这里抽象出开发环境、上线环境、优化环境的配置文件，使用webpack-merge合并配置文件。配置css预处理器，使用less-loader。配置ts编译器，使用babel-loader。@babel/preset-env：编译最新的es语法。@babel/preset-react：编译react语法。@babel/preset-typescript：转换typescript语法。配置url-loader，打包项目中的图片资源。配置html-webpack-plugin将最后生成的js，css，注入第1步的html中。使用ejs模板配置开发环境和线上环境引入的cdn。开发环境配置，使用开箱即用的webpack-dev-server。webpack-dev-server可以自动监听文件修改，自动刷新页面，以及默认source-map等功能。配置热模块替换，react-hot-loader。

webpack打包原理：webpack打包过程就像是一条流水线，从入口文件开始，搜集项目中所有文件的依赖关系，如果遇到不能够识别的模块，就使用对应的loader转换成能够识别的模块。webpack还能使用plugin在流水线生命周期中挂载自定义事件，来控制webpack输出结果。

e)编写npm script，一键开启开发模式。

//cross-env用来跨环境设置环境变量"scripts":{"dev:client":"cross-envNODE_ENV＝development webpack-dev-server--open"}

f)现在运行npm run dev:client就可以愉快地编写客户端代码了。

步骤3)搭建node环境：

由于node端使用了typescript和最新的es语法，所以需要进行打包编译。配置gulp，遍历每一个ts文件，调用gulp-babel，将ts代码转换成js代码。配置supervisor自动重启node服务(nodemon对于不存在的目录不能进行监控)。编写npm script一键启动node端开发环境。

配置好gulp后，就可以运行npm run dev:server一键启动服务器端开发环境。

步骤4)搭建GraphQL环境

GraphQL是一种用于api的查询语言，需要服务器端配置graphql支持，同时也需要客户端使用graphql语法的格式进行请求。使用apollo更快的搭建graphql环境。服务器端配置apollo-server。使用schema，定义请求的类型，返回的格式。使用resolvers来处理对应的schema。客户端配置apollo-client。按照apollo-server定义的schema，来请求数据。

步骤5)搭建测试环境

本发明使用jest作为测试框架，jest包含了断言库、测试框架、mock数据等功能，是一个大而全的测试库。由于前端使用了react项目，这里引入了专门用来测试react的enzyme库。

a)、新建jest.config.js文件。配置初始化setup.ts文件。根据react版本配置对应的enzyme-adapter。mock全局变量，如fech，canvas等。配置需要测试的文件。配置mock数据文件。配置测试文件的编译方式。ts代码使用ts-jest编译。

配置代码覆盖率文件。

b)编写测试文件。新建__mocks__，__tests__目录，存放测试文件和mock数据文件。按照src中的目录，建立相应的测试文件目录。c)编写测试脚本和上传覆盖率脚本。

步骤6)配置服务器环境:安装nodejs环境。nvm安装node；安装pm2进程守护。npm ipm2-g；安装mongodb。mongodb官方文档；安装免费https证书。letsencrypt官网。域名需要先进行备案(使用阿里云备案，资料准备齐全的话10天左右就可以批下来)。

步骤7)代码发布：本项目发布非常简单，只需要一步操作就搞定了，这些都是经过持续集成配置后的结果。

#clone with Git Bash

git clone https://github.com/yhlben/cdfang-spider.git

#change directorycd cdfang-spider

#install dependencies

npm i

#build for production with minification

npm run build

所有的事情都在build命令下完成了，我们分析一下npm run build命令做的事情。eslint语法错误检查。单元测试，上传测试覆盖率。打包客户端代码。打包后生成html文件作为node端的view层，和后端绑定在一起。其他静态资源，在webpack打包后自动上传到七牛cdn，使用qiniu-upload-plugin来进行一键上传。打包服务器端代码。

上述事情通过创建npm script就可以了完成需求了，但这些命令也不应该每次都由手工敲一遍，通过配置travisCI，每一次master分支提交代码时，自动运行上述命令就行了。

采用上述方案，实现了以下四个方面的技术效果：

开发方面：将前端、后端、数据库端连通起来，组合成了一个小全栈的项目；

测试方面：通过编写单元；测试，ui测试，api测试，增强了项目的稳定性；

运维方面：通过配置持续集成，守护进程，nginx，https等，实现了项目上的部署；

技术方面：项目中使用了一些比较新的技术，如：hooks api，graphql等，但目前用的还比较基础。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到根据上述实施例的方法可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件，但很多情况下前者是更佳的实施方式。基于这样的理解，本申请的技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品存储在一个存储介质(如ROM/RAM、磁碟、光盘)中，包括若干指令用以使得一台终端设备(可以是手机，计算机，服务器，或者网络设备等)执行本申请各个实施例所述的方法。

实施例二

在本实施例中还提供了一种项目开发环境的搭建装置，该装置用于实现上述实施例及优选实施方式，已经进行过说明的不再赘述。如以下所使用的，术语“模块”可以实现预定功能的软件和/或硬件的组合。尽管以下实施例所描述的装置较佳地以软件来实现，但是硬件，或者软件和硬件的组合的实现也是可能并被构想的。

根据本申请的另一个实施例，还提供了一种项目开发环境的搭建装置，包括：

第一建立模块，用于建立TypeScript环境和React环境，用于接收程序语言；

第二建立模块，用于建立node环境，用于对所述程序语言进行打包编译；

第三建立模块，用于建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；

第四建立模块，用于基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；

传输模块，用于配置服务器环境，以及用于在配置完成后，传输所述程序语言至所述服务器。

可选地，所述第一建立模块还用于新建tsconfig.json文件；还用于配置eslint支持Typescript语言；以及用于选择babel作为编译器。

可选地，所述第一建立模块还用于新建Html文件，用于挂载dom；还用于新建index.tsc文件，用于引入组件，并调用render装置将组件渲染至预先建立的根节点中；还用于实现React项目分层；还用于配置Webpack，用于对所述程序语言进行打包；以及用于编写npm script，用于启动开发模式。

需要说明的是，上述各个模块是可以通过软件或硬件来实现的，对于后者，可以通过以下方式实现，但不限于此：上述模块均位于同一处理器中；或者，上述各个模块以任意组合的形式分别位于不同的处理器中。

实施例三

本申请的实施例还提供了一种存储介质。可选地，在本实施例中，上述存储介质可以被设置为存储用于执行以下步骤的程序代码：

S1，建立TypeScript环境和React环境，用于接收程序语言；

S2，建立node环境，用于对所述程序语言进行打包编译；

S3，建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；

S4，基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；

S5，配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。

可选地，在本实施例中，上述存储介质可以包括但不限于：U盘、只读存储器(ROM，Read-Only Memory)、随机存取存储器(RAM，Random Access Memory)、移动硬盘、磁碟或者光盘等各种可以存储程序代码的介质。

本申请的实施例还提供了一种电子装置，包括存储器和处理器，该存储器中存储有计算机程序，该处理器被设置为运行计算机程序以执行上述任一项方法实施例中的步骤。

可选地，上述电子装置还可以包括传输装置以及输入输出设备，其中，该传输装置和上述处理器连接，该输入输出设备和上述处理器连接。

可选地，在本实施例中，上述处理器可以被设置为通过计算机程序执行以下步骤：

S1，建立TypeScript环境和React环境，用于接收程序语言；

S2，建立node环境，用于对所述程序语言进行打包编译；

可选地，本实施例中的具体示例可以参考上述实施例及可选实施方式中所描述的示例，本实施例在此不再赘述。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，并且在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims

1.一种项目开发环境的搭建方法，其特征在于，包括：

建立TypeScript环境和React环境，用于接收程序语言；

建立node环境，用于对所述程序语言进行打包编译；

建立GraphQL环境，用于为浏览器的应用程序编程接口API提供查询服务；

基于Jest作为测试框架建立测试环境，用于对所述程序语言进行测试；

配置服务器环境，在配置完成后，传输所述程序语言至所述服务器。

2.根据权利要求1所述的方法，其特征在于，建立TypeScript环境，包括：

新建tsconfig.json文件；

配置eslint支持Typescript语言；

选择babel作为编译器。

3.根据权利要求1所述的方法，其特征在于，建立React环境，包括：

新建超文本标记语言Html文件，用于挂载文件对象模型dom；

新建index.tsc文件，用于引入组件，并调用render方法将组件渲染至预先建立的根节点中；

实现React项目分层；

配置Webpack，用于对所述程序语言进行打包；

编写npm script，用于启动开发模式。

4.根据权利要求1所述的方法，其特征在于，建立GraphQL环境，包括：

通过配置gulp的方式建立GraphQL环境。

5.根据权利要求1所述的方法，其特征在于，建立GraphQL环境，包括：

通过阿波罗apollo建立所述GraphQL环境；

使用schema定义查询请求的类型，查询结果返回格式。

6.一种项目开发环境的搭建装置，其特征在于，包括：

7.根据权利要求6所述的装置，其特征在于，所述第一建立模块还用于新建tsconfig.json文件；还用于配置eslint支持Typescript语言；以及用于选择babel作为编译器。

8.根据权利要求6所述的装置，其特征在于，所述第一建立模块还用于新建Html文件，用于挂载dom；还用于新建index.tsc文件，用于引入组件，并调用render装置将组件渲染至预先建立的根节点中；还用于实现React项目分层；还用于配置Webpack，用于对所述程序语言进行打包；以及用于编写npm script，用于启动开发模式。

9.一种存储介质，其特征在于，所述存储介质中存储有计算机程序，其中，所述计算机程序被设置为运行时执行所述权利要求1至5任一项中所述的方法。

10.一种电子装置，包括存储器和处理器，其特征在于，所述存储器中存储有计算机程序，所述处理器被设置为运行所述计算机程序以执行所述权利要求1至5任一项中所述的方法。