从零开始搭建脚手架
简介
-
是一个集成项目初始化、调试、构建、测试、部署等等流程,能够让使用者专注于 code 的工具。用白话说就是,一个建筑已经搭好架子,我们只需要不断加入砖头就行。
-
提高效率,在统一的基础上,提供更多提高效率的工具,这个效率不只是开发效率,是从开发到上线的全流程的效率,比如一些业务组件的封装,提高上线效率的发布系统,各种 utils 等。
-
一个完整的脚手架一般包含三个方面的内容:
- 脚手架命令脚本:我们所需要安装到全局的脚手架,通过它可以方便的开始一个项目的开发
- scripts 包:一般我们会将打包、编译、测试以及读取自定义配置文件等等操作(例如 webpack 相关配置操作,本地服务器相关内容等等),单独做成 npm 包。让使用者不必关心这些操作,专心 code。
- 模板文件:显而易见,就是我们初始化项目的时候,所拉取的项目内容。
项目初始化
-
使用
npm init
初始化项目 -
使用
git init
将项目添加到 git 管理 -
创建远程 git 仓库并与之关联
-
使用 eslint 做代码检查:
-
安装:
npm install eslint -D
-
配置
.eslintrc.js
module.exports = { extends: ["eslint:recommended", "prettier"], env: { node: true, es6: true, }, rules: { semi: ["error", "always"], quotes: "off", "no-console": "off", "no-unused-vars": "off", "no-unreachable": "off", "no-redeclare": "warn", }, }; 复制代码
-
配置
.eslintignore
#井号是注释 根据自己的项目需要进行忽略 # 如果 .eslintrc 开启了 env nodejs 那么 默认 node_modules是自动忽略的 node_modules /node_modules/** 复制代码
-
-
在
package.json
文件中,加入 bin 字段// package.json "bin": { "prix": "./bin/prix.js" }ss 复制代码
prix
是 cli 的名称,类似 npm 的 npm 或 npx 命令./bin/prix.js
是指运行 prix 命令是执行的是 bin 目录下的prix.js
文件
-
使用 prettier 进行代码格式化
-
安装:
npm install prettier eslint-config-prettier -D
-
配置
.prettierrc
{ "singleQuote": true, "semi": true, "tabWidth": 2 } 复制代码
-
-
在根目录下 创建
bin
文件夹,添加prix.js
#!/usr/bin/env node const package = require("../package.json"); const { version } = package; console.log(version); 复制代码
- 打开终端,执行
npm link
, 然后运行 prix 打印版本号 1.0.0 即表示项目初始化成功
- 打开终端,执行
初认识 commander
-
commander:TJ 大神开发的工具,能够更好地组织和处理命令行的输入。
- 中文文档
- 是完整的 node.js 命令行解决方案。
- 安装:
npm install commander
-
通过
prix
命令输出prix-cli
的 version:-
修改
prix.js
#!/usr/bin/env node const { Command } = require("commander"); const package = require("../package.json"); // 获取package.version const { version } = package; const program = new Command(); // 定义当前版本 program.version( `prix: ${version}`, "-v, --version", "output the current prix version" ); // 解析运行参数(必须且要放在最后一行) program.parse(process.argv); 复制代码
-
运行
prix -v
或prix --version
, 将在控制台打印prix: 1.0.0
-
-
自动化帮助信息:帮助信息是 Commander 基于你的程序自动生成的,默认的帮助选项是
-h
,--help
。运行prix -h
或prix --help
, 将在控制台看到下面的帮助信息。