Tdy-await-to-js NPM

学习参考项目

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

学习完成目标：

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

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

@everything-registry/sub-chunk-2883

1.0.1

1 year ago

1.0.0

1 year ago