Continuous Integration Scheme For Front-end Framework Development

Continuous Integration(CI)is a new software development model which is derived from the idea of extreme programming,this model requires team members to integrate their work frequently and find errors in the integration process to repair through the automatic construction of the project.Practice has proved that the use of continuous integration is conducive to improve the efficiency of team work and can quickly develop software products with high cohesion.Different from most of existing studies that focus on continuous integration of the back-end projects,this thesis discusses the challenges of continuous integration in the front-end field combined with the background of the front-end framework project and aims at designing a continuous integration scheme that is suitable for the front-end framework project.On the basis of contrasting and analyzing mainstream continuous integration tools of the front-end field,this thesis uses selected tools to design the front-end package management scheme,the front-end automation scheme and the continuous integration scheme based on Jenkins to provide a unified development specification for the front-end framework project and solve the problems in the process of continuous integration.The main work of this thesis includes:(1)Design and implementation of the front-end package management scheme.In order to solve the code sharing problem between projects,the npm package management tool is used to design the front-end package management scheme which is suitable for the front-end framework project.Further,a one-click deployment of the development environment is implemented with the batch script and npm private warehouse sinopia is built to host and share the third-party and the private packages which finally realize the code sharing mechanism.(2)Design and implementation of the front-end automation scheme.In order to facilitate the repeated inspection and packaging process in the front-end field,the Grunt automated building tool is used to design the front-end automation scheme.Specifically,the function of Gruntfile.js is extended to call the global module which is set in the front-end package management scheme,and the related Grunt plugins is used to write front-end automated inspection,coverage detection and front-end automated packaging scripts for the front-end framework project which finally realize the front-end automation.(3)Design and implementation of the continuous integration scheme.Firstly,Jenkins is used to implement the process of calling the front-end automated building tool with the Ant building script to solve the defects that traditional continuous integration tools can only call the back-end automated building tools.Secondly,the code repository for the front-end framework project is built with the version control tool SVN.Finally,the HTML document display and e-mail notification are expanded by installing the related plugins and the integration process steps are designed to meet needs of the project.(4)Development of chart components and validation of the continuous integration scheme.Use the basic components which the back-end framework CWAP provide,the corresponding classes is designed and coded to implement the basic graphics services of Amcharts/Echarts which are further provided to the front-end with REST style.The front-end then uses AJAX technology to analyze the JSON data which the back-end provides and call the wrapped drawing functions for quick mapping.Based on the development of chart components,the feasibility of the proposed continuous integration scheme is validated and the results show that the scheme can be effectively used in the front-end framework project and reflect the value of continuous integration.