如何构建大型的前端项目

如何构建大型的前端项目

1. 搭建好项目的脚手架

一般新开发一个项目时,我们会首先搭建好一个脚手架,然后才会开始写代码。一般脚手架都应当有以下的几个功能:

  1. 自动化构建代码,比如打包、压缩、上传等功能
  2. 本地开发与调试,并有热替换与热加载等功能
  3. 本地接口数据模拟
  4. css 模块化
  5. 检查并自动矫正不符合规范的代码,并优化代码格式

社区已有很多模板(boilerplate)或工具帮助我们搭建一个现成的脚手架,比如:

当然,如果这些模板或工具都不能满足你的需求,你也可以搭建自己的脚手架,可以参考:

2. 定义好项目的目录结构

对于大型目录而言,一个好的目录结构是非常必要的。一个好的目录结构应当具有以下的一些特点:

  1. 解耦:代码尽量去耦合,这样代码逻辑清晰,也容易扩展
  2. 分块:按照功能对代码进行分块、分组,并能快捷的添加分块、分组
  3. 编辑器友好:需要更新功能时,可以很快的定位到相关文件,并且这些文件应该是很靠近的,而不至于到处找文件

可以参考 目录结构优化

3. 做好项目的组件化

这里的组件化,并非框架层面的组件化,而是工程层面的组件化。

当一个项目中的不同的区块需要共用同一段代码,或者不同项目之间需要共享同一个组件的时候,就需要做组件化了。

组件化一般分为项目内的组件化和项目外的组件化。

项目内的组件化是,同一个项目内不同区块共用的代码可以提取出来为一个单独的组件。

项目外的组件化是,跨项目间共享的代码可以提取出来为一个单独的项目,然后如正常的 npm 包一样使用。

可以参考:

4. 封装团队的构建工具

对于多项目而言,不管使用 webpack 还是 rollup 来打包项目,都会面临一些问题:

  1. 不同项目有不同配置文件,更新配置需要到处改,而且很难保持一致
  2. 如果有项目的升级,不同区块可能会有不同的配置

这个时候,把配置文件封装成一个项目,然后使用版本化的方式管理,如正常的 npm 包一样使用,就会很方便了。

比如,我的项目都是使用 lila 来构建的。

5. 选好基础 js 框架、ui 框架、页面模板

开始开发前,需要先选好基础 js 框架,比如 reactvueangularjquery 等,因为一旦选定,基本上后面都不能更换了,因为更换的成本太大了。

选好基础 js 框架后,可以选一个比较好的 ui 框架,这样可以少写很多代码,可以参考 前端最受欢迎的 UI 框架

如果页面的定制化程度不高,可以选择一个比较好的页面模板,比如:

6. 测试

一般前端测试分以下几种:

  1. 单元测试:模块单元、函数单元、组件单元等的单元块的测试
  2. 集成测试:接口依赖(ajax)、I/O 依赖、环境依赖(localStorage、IndexedDB)等的上下文的集成测试
  3. 样式测试:对样式的测试
  4. E2E 测试:端到端测试,也就是在实际生产环境测试整个应用

一般会用到下面的一些工具:

另外,可以参考 聊聊前端开发的测试

7. 持续集成构建与测试

一般大型工程的的构建与测试都会花很长的时间,在本地做这些事情的话就不太实际,这就需要做持续集成构建与测试了。

持续集成工具用的比较多的:

jenkins 是通用型的工具,可以与 githubbitbucketgitlab 等代码托管服务配合使用,优点是功能强大、插件多、社区活跃,但缺点是配置复杂、使用难度较高。

gitlab cigitlab 内部自带的持续集成功能,优点是使用简单、配置简单,但缺点是不及 jenkins 功能强大、绑定 gitlab 才能使用。

另外,如果是开源项目,travis ci 是个不错的选择。

后续

更多博客,查看 https://github.com/senntyou/blogs

作者:深予之 (@senntyou)

版权声明:自由转载-非商用-非衍生-保持署名(创意共享3.0许可证


前端小站
web, 前端, javascript, nodejs, electron, babel, webpack, rollup, react, vue ...

达则兼济天下,穷则独善其身。

12.7k 声望
6.5k 粉丝
0 条评论
推荐阅读
Spring 源码解析十五:SpringCloud 的基础组件
Spring 源码解析十五:SpringCloud 的基础组件SpringCloud 并不是只有一个项目,而是很多项目构成的生态体系总称,如spring-cloud-netflix: 对 https://github.com/netflix 开源组件的集成spring-cloud-gateway: ...

深雨2阅读 2.6k

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.1k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图

达则兼济天下,穷则独善其身。

12.7k 声望
6.5k 粉丝
宣传栏