学习参考项目

[Preview] README.md - scopsy/await-to-js - GitHub1s

学习完成目标：

1. 运用 pnpm 作为包管理器。✔
2. pnpm 全局包安装注意事项 ✔
3. nodeJs 作为环境构建。✔
4. 上传到 github ✔
5. ts 实现, 理解 promise 在 ts 的运用。✔
6. 使用 eslint 、eslint 配置文件详解。vscode 的 eslint 插件。✔
7. Prettier 的使用。vscode 的 Prettier 插件。✔
8. Eslint Prettier 一起使用的兼容问题说明。✔
9. Eslint Prettier Typescript JavaScript 一起使用的配置。✔
10. 运用 jest 测试。✔
11. vite打包, 支持 npm 引入使用。✔
12. 发布到npm网上。✔
13. 做好笔记。✔

pnpm安装与配置

配合食用：PNPM设置全局包路径 - 掘金 (juejin.cn)

安装 | pnpm中文文档 | pnpm中文网

• 推荐npm安装

• 修改pnpm的仓库路径、全局路径

  • 配置文件地址：C:\Users\电脑名称\.npmrc，往里添加。

  • global-dir-bin中的地址要在环境变量Path添加一份

  • 以上完成后, 运行命令：pnpm i -g pnpm，重新安装pnpm应用以上配置。

  #pnpm全局仓库路径
  store-dir=D:\.pnpm\store
  cache-dir=D:\.pnpm\cache
  state-dir=D:\.pnpm\state
  #pnpm全局安装路径
  global-dir=D:\.pnpm\global
  global-dir-bin=D:\.pnpm\bin

ESLint的安装与配置

ESlint官网 Getting Started

配合食用：VSCode 插件之 ESLint - 掘金 (juejin.cn)

配合食用：ESLint配置详解(一) - 超级深入详细 - 简书 (jianshu.com)

配合食用：ESLint配置详解(二) - 常用规则(Rules)集合 - 简书 (jianshu.com)

• pnpm安装eslint到项目

• 项目根目录cli方式自动建立或手动建立配置文件.eslintrc.js

• .eslintrc.js添加好规则后，只能在控制台发现问题和命令方式解决问题eslint --fix xx.js

• 下载vscode的插件eslint可以在编辑器中出现高亮报错提示，settings.json中配置保存eslint自动修复错误。

  settings.json

  // 开启vscode eslint插件 eslint规则报错高亮提示
  "eslint.enable": true,
  //编辑器保存时自动将代码按ESLint格式进行修复
  "editor.codeActionsOnSave": {
      "source.fixAll.eslint": true
  },

Prettier安装与配置

Install · Prettier官网

配合食用：VSCode 插件之 Prettier - 掘金 (juejin.cn)

• pnpm安装到项目，创建.prettierrc配置文件

• 没有安装prettier到项目, vscode安装有prettier插件，遵循以下规则：

  无 npm 包+无配置文件 = vscode-prettier 内置配置 + vscode 的 setting.json 配置
  有 npm 包+无配置文件 = vscode-prettier 内置配置 + vscode 的 setting.json 配置
  无 npm 包+有配置文件= vscode-prettier 内置配置 + 本地配置
  有 npm 包+有配置文件= npm 包配置 + 本地配置

• .prettierrc添加好规则后，只能在控制台发现问题和命令方式解决问题npx prettier --write .

• 下载vscode的插件prettier可以在编辑器中出现高亮报错提示，settings.json中配置保存prettier自动修复错误。

  settings.json

  "prettier.enable": true // 控制是否启用 vscode-prettier 插件。当你改变这个设置时，你必须重新启动 VSCode。
  "prettier.resolveGlobalModules": false // 启用后，如果没有本地依赖，该插件将尝试使用全局 npm 或 yarn 模块。
  // 编辑器开启保存后自动格式化，所有文件的格式化工具为prettier
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // 也可以只设置 javascript 的默认格式化工具为 prettier
  "[javascript]": {
      "editor.defaultFormatter": "esbenp.prettier-vscode", 
      "editor.formatOnSave": true, // 保存的时候自动格式化
  },
  // 以上是vscode-prettier特有的配置属性, 与prettier本身没有任何关系。
  /*
  * 因为vscode-prettier内置了prettier的缘故, 甚至可以在settings.json中配置prettier的规则。
  * 仅限项目中没有npm包和.prettierrc文件时,settings.json的prettier规则才会生效。
  */
  "prettier.semi": false, // 语句末尾添加分号
  "prettier.singleQuote": true // 使用单引号

ESLint和Prettier的组合使用

配合食用：ESLint 之与 Prettier 配合使用 - 掘金 (juejin.cn)

• 二者组合使用产生的问题：ESLint和Prettier都可以格式化代码的缘故, 格式化某些样式时产生分歧, 编辑器不知道听谁的，从而引发报错。

• 解决思路：

  • 在ESLint中引入一组配置, 禁用eslint中与prettier格式化中分歧的规则。

    现成的npm配置包：eslint-config-prettier

  • 在ESLint中插入prettier插件, 实现ESLint运行时Prettier也能同时运行。ESLint主要用于JS/TS的代码质量检查与修复、Prettier主要用于各种语音的代码风格统一。现成的npm插件包： eslint-plugin-prettier

• 配置文件

  .eslintrc.js

  module.exports = {
    env: {
      commonjs: true,
      es2021: true,
      node: true,
      browser: true
    },
    extends: ['plugin:prettier/recommended'],
    overrides: [
    ],
    parserOptions: {
      ecmaVersion: 'latest'
    },
    rules: {}
  }

  .prettierrc

  {
    "useTabs": false,
    "tabWidth": 2,
    "printWidth": 100,
    "singleQuote": true,
    "trailingComma": "none",
    "bracketSpacing": true,
    "semi": false
  }

  vs-code的settings.json

  因为eslint-plugin-prettier插件让prettier在eslint中运行了, 因此开启eslint运行就OK。

  // eslint
  "eslint.enable": true,
  //保存时自动将代码按ESLint格式进行修复
  "editor.codeActionsOnSave": {
     "source.fixAll.eslint": true
  },

ESLint Prettier TypeScript JavaScript组合使用

• 在ESLint和Prettier的组合使用的基础上添加配置。

• 安装

  pnpm add -D  
  @typescript-eslint/eslint-plugin @typescript-eslint/parser 
  eslint prettier typescript 
  eslint-config-prettier eslint-plugin-prettier 
  eslint-config-airbnb-base eslint-config-standard-with-typescript

• .eslintrc.js配置文件

  module.exports = {
    env: {
      commonjs: true,
      es2021: true,
      node: true,
      browser: true
    },
    extends: ['standard-with-typescript', 'plugin:prettier/recommended'], // 'standard-with-typescript'内部overrides了ts类型相关的文件, 无需overrides。
    overrides: [
      {
        files: ['*.ts', '*.tsx'],
        parserOptions: {
          project: ['./tsconfig.json'] // 指定ts配置文件路径 不然报错
        }
      },
      {
        files: ['*.js'],
        extends: ['airbnb-base', 'plugin:prettier/recommended'], // 'airbnb-base'没做js和ts兼容, 防止规则冲突单独适配js。
        rules: {
          'no-console': 'off' // rules里的配置优先级大于extends
        }
      }
    ],
    parserOptions: {
      ecmaVersion: 'latest'
    },
    rules: {}
  }

Jest安装与配置

快速开始 · Jest官网 (jestjs.io)

• 安装完成后,根据Jest官网指引安装兼容Typescript的包。

  @types/jest ts-jest

• 上一步完成后, 初始化生成jest配置文件： npx jest --init

  jest.config.ts 配置文件里添加preset属性的值

  import type { Config } from "jest"
  const config: Config = {
      preset: "ts-jest" // 配置里添加预设
  }
  export default config

• 根据Jest官网指引安装Babel，babel配置加入对应预设。完成后支持JsModule方式导入测试文件。

  @babel/core @babel/preset-env babel-jest

  babel.config.js

  module.exports =  {
      presets: [["@babel/preset-env", { targets: { node: "current" } }]]
  }

• 安装解析jest.config.ts文件的包：pnpm add -D ts-node @types/node

• 本地创建一个文件夹tests，里面包含*.test.ts的文件用于测试

• package.json的script加入test: jest，开启测试~

Vite安装与配置

开始 | Vite 官方中文文档 (vitejs.dev)

• 安装选项选择：lib模式

• 生成的tsconfig.json的include追加vite.config.ts，为了eslint检测到这个文件。

• vite.config.ts设置了几个模式，其中lib模式打包构建lib目录文件，dev模式下可以在线调试运行调试项目和打包构建，production模式是上线模式，请求的url更改为线上地址。

• package.json增加或修改的配置：

  "type": "module", // vite默认使用原生ES模块
  // 打包后生成静态文件库，库作为依赖被引用。不同的引用方式动态使用不同的静态包。
  // ESModule方式使用这个规则下的包："import": "./dist_lib/gracefulPromise.js"
  // CommonJs方式则是"require": "./dist_lib/gracefulPromise.umd.cjs"
  // main是兼容前两种的方式外还支持umd方式的引用
  // 有关types字段与ts提示语法相关，不做过多说明。
  "main": "./dist_lib/gracefulPromise.umd.cjs",
  "module": "./dist_lib/gracefulPromise.js",
  "exports": {
      "types": "./index.d.ts",
      "import": "./dist_lib/gracefulPromise.js",
      "require": "./dist_lib/gracefulPromise.umd.cjs"
  },
  "types": "./index.d.ts",
  // 当你的包作为依赖项安装时要包含的条目
  "files": [
      "dist_lib",
      "index.d.ts"
  ],

• babel.config.js和.eslintrc.js的后缀改为cjs，因为package.json文件声明了type:module，config文件的导出模式与之冲突，改为cjs npm才能识别它们是commonJs的导出模块，而不是ESModule

发布包到npm

• npm login
• npm publish