ts开发脚手架—初始化项目的心血历程

平常写项目的时候，一般都会使用官方的脚手架去开发，虽然这个确实省掉了我们不少时间，也给我们一个项目模板，不过对于一个项目来讲，官方给的模板肯定不足以满足我们的日常开发需求，我们平常经常使用的或者封装的一些工具或组件这些东西还需要我们手动给粘贴过来，这种做法麻烦不说，有时候粘贴的时候还会出现报错，修改起来也比较麻烦。另外还有一点就是之前在学习RN的时候，一些依赖的版本问题特别麻烦，稍微修改一下就会导致一些第三方库无法使用。由此我就想着自己开发一个脚手架，用于初始化项目，避免重发搭建项目初始框架的大量工作。

搭建项目

初始化项目目录

javascript 复制代码

mkdir 项目名称 && cd 项目名称 && npm init -y && yarn add typescript -D && npx tsc --init

这条命令是在当前目录下创建一个目录，并且切换到该目录中，初始化项目生成package.json文件，并使用yarn安装typescript，最后生成tsconfig.json文件之后再创建的项目文件夹中新建src文件夹，并新建index.ts文件，用于当作项目的入口文件在index.ts中写代码之前一定要在最上方加一句

javascript 复制代码

#!/usr/bin/env node

表示从环境变量中查找，使用node解释器运行在index.ts中添加测试代码

typescript 复制代码

console.log('hello world');

设置tsconfig.json

json 复制代码

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "ES2018",
    "module": "commonjs",
    "moduleResolution": "node",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "inlineSourceMap": true,
    "noImplicitThis": true,
    "noUnusedLocals": true,
    "stripInternal": true,
    "pretty": true,
    "declaration": true,
    "outDir": "lib",
    "baseUrl": "./",
    "paths": {
      "*": ["src/*"]
    }
  },
  "exclude": ["lib", "node_modules"]
}

安装其他依赖

@types/node

bash 复制代码

yarn add @types/node -D

node ts的类型

ts-node-dev

bash 复制代码

yarn add ts-node-dev -D

开发环境实时编译在package.json的scripts中增加如下内容

json 复制代码

{
  "scripts": {
    "dev": "ts-node-dev --respawn --transpile-only src/index.ts"
  }
}

团队合作方面

在一个多人合作中，代码的质量可以说是非常重要的一个东西，特别是在多人协作的一个大型项目，代码质量一方面是代码规范另一方面是代码格式规范还有一方面是提交代码规范

ESLint

初始化ESLint

bash 复制代码

npx eslint --init

Prettier

bash 复制代码

yarn add prettier -D

新建.prettierrc.js，这个文件是配置Prettier格式化代码的规则的，推荐配置如下：

javascript 复制代码

module.exports = {
    // 一行最多 80 字符
    printWidth: 80,
    // 使用 2 个空格缩进
    tabWidth: 2,
    // 不使用 tab 缩进，而使用空格
    useTabs: false,
    // 行尾需要有分号
    semi: true,
    // 使用单引号代替双引号
    singleQuote: true,
    // 对象的 key 仅在必要时用引号
    quoteProps: 'as-needed',
    // jsx 不使用单引号，而使用双引号
    jsxSingleQuote: false,
    // 末尾使用逗号
    trailingComma: 'all',
    // 大括号内的首尾需要空格 { foo: bar }
    bracketSpacing: true,
    // jsx 标签的反尖括号需要换行
    jsxBracketSameLine: false,
    // 箭头函数，只有一个参数的时候，也需要括号
    arrowParens: 'always',
    // 每个文件格式化的范围是文件的全部内容
    rangeStart: 0,
    rangeEnd: Infinity,
    // 不需要写文件开头的 @prettier
    requirePragma: false,
    // 不需要自动在文件开头插入 @prettier
    insertPragma: false,
    // 使用默认的折行标准
    proseWrap: 'preserve',
    // 根据显示样式决定 html 要不要折行
    htmlWhitespaceSensitivity: 'css',
    // 换行符使用 lf
    endOfLine: 'lf'
}

由于eslint也有格式化代码的功能，所以需要安装一个第三方库解决冲突问题

javascript 复制代码

yarn add eslint-config-prettier -D

在.eslintrc.js文件的extends最后添加'prettier'，用于覆盖一部分ESLint规则

提交代码规范

运行下面命令之前要先初始化git仓库

bash 复制代码

yarn add @commitlint/config-conventional @commitlint/cli -D

生成配置文件

bash 复制代码

echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

生成使用命令的方式生成 commitlint.config.js文件，有可能会被系统误认为utf-16的编码格式，我们需要看一下这个文件，如果是utf-16编码的话改成utf-8，否则会因为编码格式的原因导致pretter工作的时候出现乱码问题生成提交代码的钩子函数

javascript 复制代码

npx mrm lint-staged

为package.json文件添加下列配置，这个会在commit阶段提交之前执行lint-staged命令

json 复制代码

"husky": {
  "hooks": {
    "pre-commit": "lint-staged"
  }
},

同时修改lint-staged的配置项，为其添加ts 添加提交钩子

bash 复制代码

npx husky add .husky/commit-msg  'npx --no -- commitlint --edit ${1}'

构建项目

在package.json中添加以下命令

json 复制代码

"build": "rimraf lib && tsc --build"

脚手架

脚手架常用工具包

commander 完整的node.js命令行解决方案
chalk 装饰终端
shelljs 在node中使用unix sehll命令
inquirer 交互式命令行用户界面
clear-console 清空命令行的当前界面
ora 丰富命令行，添加一些图标、动效
download-git-repo 使用node从git仓库下载代码

安装工具

shell 复制代码

yarn add commander chalk shelljs inquirer clear-console

本地调试

在package.json中添加

json 复制代码

"bin": {
  "ts-cli": "./lib/index.js"
}

bin表示命令(ts-cli)的可执行文件的位置，运行yarn build 生成lib文件，接下来在项目根目录执行npm link

npm link详解

该命令一般用于我们在平常写的一些包并没有发布，在我们本地运行测试，其主要作用是在全局文件中创建一个符号连接，这个连接指向npm link运行的地方，这样我们就可以在全局运行我们写的脚手架进行测试了

完成上述操作后，我们可以运行命令来测试我们是否成功

bash 复制代码

ts-cli

如果在控制台输出hello world就表示搭建成功了

报错

husky错误，输出乱码

这个原因是我们没有安装husky，安装一下就行了

bash 复制代码

yarn add husky -D

到此我们就搭建好了基本的脚手架工具