如何自己搭建TS开发脚手架初始化项目

文
章
目
录

• 搭建项目
• 初始化项目目录
• 设置tsconfig.json
• 安装其他依赖
• 团队合作方面
• ESLint
• Prettier
• 提交代码规范
• 构建项目
• 脚手架
• 脚手架常用工具包
• 本地调试
• npm link详解
• 报错
• husky错误，输出乱码

本文主要讲解关于如何自己搭建TS开发脚手架初始化项目相关内容，让我们来一起学习下吧！

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

搭建项目

初始化项目目录

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

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

#!/usr/bin/env node

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

console.log(\'hello world\');

设置tsconfig.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\"]
}

安装其他依赖

1. @types/node

yarn add @types/node -D

node ts的类型

1. ts-node-dev

yarn add ts-node-dev -D

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

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

团队合作方面

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

ESLint

初始化ESLint

npx eslint --init

Prettier

yarn add prettier -D

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

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也有格式化代码的功能，所以需要安装一个第三方库解决冲突问题

yarn add eslint-config-prettier -D

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

提交代码规范

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

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

生成配置文件

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

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

npx mrm lint-staged

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

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

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

npx husky add .husky/commit-msg  \'npx --no -- commitlint --edit \'

构建项目

在package.json中添加以下命令

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

脚手架

脚手架常用工具包

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

安装工具

yarn add commander chalk shelljs inquirer clear-console

本地调试

在package.json中添加

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

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

npm link详解

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

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

ts-cli

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

报错

husky错误，输出乱码

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

yarn add husky -D

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

以上就是关于如何自己搭建TS开发脚手架初始化项目相关的全部内容，希望对你有帮助。欢迎持续关注潘子夜个人博客（www.panziye.com），学习愉快哦！