前端实例 | 设计一个企业级脚手架工具

前端脚手架,主要解决以下几个主要问题:

(1) 统一团队开发风格,降低新人上手成本。

(2) 规范项目开发流程,减少重复性工作。

(3) 提供一键实现项目的创建、配置、开发、插件等,让开发者将更多时间专注于业务。

随着前端工程化的发展,越来越多的企业选择脚手架来从零到一搭建自己的项目。

脚手架可以分为通用型和专用型,通用型是用来进行二次开发的,专用型主要是给特殊框架提供的创建和构建工具,如表6-2所示。

■ 表6-2  大前端Scaffold分类

业界比较流行的几个脚手架,它们的功能丰富但复杂程度不一样,总体来讲会包含以下几个基本功能。

1. 搭建项目

(1) 根据用户输入生成配置文件。

(2) 下载指定项目模板。

(3) 在目标目录生成新项目。

2. 运行项目

(1) 本地启动预览。

(2) 热更新。

(3) 语法、代码规范检测。

3. 部署项目

(1) 将代码推送至仓库。

(2) 前端部署的管理到后台进行发布。

(3) 以NPM 包的方式发布到了NPM 市场,使用时直接安装。

(4) 清晰和良好格式的日志输出。

搭建自己的脚手架,可以根据需要引入依赖,如表6-3所示。

■ 表6-3  第三方依赖包安装

先通过架构图了解脚手架的大致工作流程,如图6-4所示。

■ 图6-4  脚手架架构图

下面逐步介绍,如何创建一个脚手架并发布到线上仓库。

1. 创建脚手架Lerna工程项目

创建命令如下:

mkdir hello-scallfold
lerna init #初始化lerna工程项目

执行lerna init命令后会默认执行git init命令,创建.gitignore,忽略以下文件:

**/node_modules
.vscode
.DS_Store
lerna-deBug.log

添加到本地暂存,并查看状态,代码如下:

git add . && git status

提交到本地仓库,代码如下:

git commit -m 'init'

2. 创建包& 测试发布

创建core核心包和工具包utils,输入lerna create core,根据创建包向导提示设置package name: (core) @hello-cli/core。core包的package.json文件如下:

{
  "name": "@hello-cli/core",
  "version": "1.0.0",
  "description": "> TODO: description",
  "author": "xlwcode <624026015@qq.com>",
  "homepage": "",
  "license": "ISC",
  "main": "lib/core.js",
  "directories": {
    "lib": "lib",
    "test": "__tests__"
  },
  "files": [
    "lib"
  ],
  "publishConfig": {
    "registry": "https://registry.npmjs.org"
  },
  "scripts": {
    "test": "echo \"Error: run tests from root\" && exit 1"
  }
}

创建完成core和utils模块后,工程结构目录如图6-5所示。

■ 图6-5  Lerna项目目录图

3. 修改模块中的publicConfig

在publicConfig配置中添加 "access": "public",代码如下:

"publishConfig": {
    "access": "public",
    "registry": "https://registry.npmjs.org"
  },

4. 提交代码到Git仓库

这里使用git命令创建一个公开库,并将工程代码提交到仓库中,命令如下:

git remote add origin https://gitee.com/xxx/xx-cli.git
git push -u origin master

5. 将库发布到npmjs网站

首先登录npmjs网站,进入创建组织页面(https://www.npmjs.com/org/create),如图6-6所示。

■ 图6-6  npmjs网站

创建成功后,单击npmjs→个人头像→Packages页面查看即可。

接下来,在工程目录中执行lerna publish命令,如图6-7所示。

■ 图6-7 lerna publish工程项目

发布过程中,需要选择版本,每发布一次,版本号会自动递增,回车后开始上传,效果如图6-8所示。

■ 图6-8 lerna publish 成功提示

在npmjs.com 网站查看,如图6-9所示。

■ 图6-9 npm.js 查看上传成功的包

参考书籍

相关图书推荐