从零开始搭建脚手架

简介

是一个集成项目初始化、调试、构建、测试、部署等等流程，能够让使用者专注于 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, 将在控制台看到下面的帮助信息。

从零开始搭建一款前端脚手架

从零开始搭建脚手架

简介

项目初始化

初认识 commander

参考

猜你喜欢