自学内容网 自学内容网

前端架构: 脚手架之多package项目管理和架构

多package项目管理


1 )多package项目管理概述

  • 通常来说,当一个项目变大了以后,我们就要对这个项目进行拆分
  • 在前端当中,对于项目进行拆分的方式,通常把它称之为javascript包管理
  • 需要使用一个工具叫做 npm (Node Package Management)
  • 它是使用nodeJS来对包进行一个管理,用了这个包管理以后,项目就可以以大化小
  • 把一个复杂的项目拆分成若干个小的项目,如何把一个大的项目进行一个拆分
  • 这里就用到 workspaces 和 lerna 这两个特性
  • 其实 lerna 是更早出现的一个特性, 而 workspace 是 npm 7 以后默认出现一个特性
  • lerna 和 workspace 都是解决复杂项目管理的, 即:多 package 管理
  • 了解如何利用 lerna 和 worspace 的这个特性去完成项目的创建,依赖的安装,本地调试,还有项目发布
  • 之前也谈到过,Lerna 采用 Yargs 作为脚手架框架

2 )脚手架架构

  • 这是一般脚手架的整体架构
  • 最下面一层是标准层,也就是说我们整个今天前端能发展成这样
  • 它是由一些若干条标准而生成的,其中最重要的标准就是ECMA和Module模块化
  • ECMA 它的一个核心产出,其实就是javascript这个开发语言
  • 而模块化,它的核心产出,目前还在用的就是CommonJS和ES Module这样2个模块化的标准
  • 基于ECMA和module模块化, 产生了 nodejs 框架, Nodejs框架其实核心包含三个部分
    • 第一个是 V8引擎,它的用途是用来去做javascript开发语言的一个编译和运行,包括输出最终的一个运行结果
    • 第二个是 internal module 主要指向 nodejs 很多的内置库,包括fs文件处理库, path 路径库等等
    • 第三个是 一个node的可执行文件
    • 由这样的几个部分组成,这个就是Node.js
    • 而 Nodejs 之上, 就会生成一个包括管理工具叫 npm
  • 我们每个前端项目今天都在去使用 npm, 而 npm 在7版本之后,默认就会附带一个特性叫做 workspace
  • 这个 workspace 就是用来做多package 复杂项目管理用的
  • 少于7版本的时候,想做复杂项目管理的时候,就要用lerner
  • Lerna它是基于 nodejs的 npm 之上生成的一个自己开发的一个包管理工具
  • 这个工具最主要的用途就是做很多个小模块之间拼成一个大的项目,做这个大的项目管理就是 Lerna
  • 在 npm 7版本之前,我们就会使用 Lerna 去做包管理
  • 今天的 Lerna 最新版本已经到 8.1.2, 同时,它已经基于npm的 workspace 特性去进行了重构和改造
  • 所以今天依然可以用Lerna来做包管理,它可以帮我们去省略到很多操作的步骤
  • 除此之外,像 npm 上面还有一些常用的工具,像webpack这些, Lerna 和 webpack 是属于同一层的这个工具
  • 而我们自己的脚手架是基于这些库之上,也就是说我们自己的脚手架会基于Lerna 去进行一个构建
  • 构建的时候它核心是会分为6个
  • 第一个包是 cli-core 包含脚手架中核心的一个内核,基于这个内核去开展我们具体的业务
  • 也就是说上面5个业务只是其中五个功能
  • 如果未来我们要开发更多的脚手架的时候,只要再往里面横向的去进行扩充就可以了
  • 这就是基于 Lerna 它架构的一个好处,它的横向扩展性很强
  • 脚手架的内核不变更的情况下,可以非常轻易的去添加出新的功能
  • 否则, 我们每一个脚手架都要重新开发一套全新的代码,然后去做发布,去做部署和运行, 整个过程是比较复杂的

原文地址:https://blog.csdn.net/Tyro_java/article/details/136343984

免责声明:本站文章内容转载自网络资源,如本站内容侵犯了原著者的合法权益,可联系本站删除。更多内容请关注自学内容网(zxcms.com)!