/first-package

Primary LanguageTypeScriptMIT LicenseMIT

first-package

  • npm init -y
  • .gitignore
  • 配置 package.json : bugs, repository
  • npm i react typescript @types/react -D
    • react 也用 -D 是可以防止用户在安装包时必须下载React，这样如果他们的项目已经存在 react 包，就不需要再安装额外的了。 问题来了，我们的package 是react的包，用户没有安装react怎么办
  • 把 devDependencies 的 react 复制一份到 peerDependencies, 代表告诉包管理工具，检查 app 是否安装了相关的包。如果没有找到，高版本的 npm 包会自动安装，低版本的（3-6）会显示 warning
  • test react component: npm i -D jest @testing-library/react
  • npm i -D ts-jest, 创建 jest.config.ts , 配置支持 ts 语法
  • npm i -D ts-node jest 需要 ts-node 来读取 ts 配置文件
  • npm i -D jest-environment-jsdom jest 默认测试环境是 nodejs, 因此当创建web相关的包的时候需要明确一个类似浏览器环境，安装后在 jest.config.ts 中配置 testEnvironment: 'jsdom'; 然后更新 package.json scripts test: jest --config jest.config.ts
  • 创建 TweetButton.tsx TweetButton.test.tsx, 编写内容
  • npm run test TweetButton.test.tsx
  • git add commit push

规范 git 提交

  • npm i -D @commitlint/config-conventional @commitlint/cli
  • 创建 commitlint.config.ts
  • npm i -D husky 配置 hooks

Git Action

Add the Commitlint GitHub Action to your team’s workflow.

  • 创建文件 mkdir .github
  • mkdir .github/workflows
  • touch .github/workflows/commitlint.yml

Styling React Components

  • index.css 添加样式，并再 TweetButton.tsx 中添加 className
  • 现在 jest 测试是会报错, 因为 jest 默认不能处理 css 文件
  • npm i -D jest-transform-css 可以将 stylesheets 导入到 jest 的 dom 环境中
  • 在 jest.config.ts 中添加 "^.+\\.css$": "jest-transform-css"

Compiling React to JavaScript

  "build": "rimraf dist && npm run build:esm && npm run build:cjs",
  "build:esm": "tsc",
  "build:cjs": "tsc --module commonjs --outDir dist/cjs",

将组建移到 src/components 中, 并在 tsconfig.json 中添加相应配置

"include": ["src/**/*"] "exclude": ["src/**/*.test.tsx"]

define a script for copying the stylesheet to the dist directory during each build

 "build": "rimraf dist && npm run build:esm && npm run build:cjs && npm run copy-files",
 "build:esm": "tsc",
 "build:cjs": "tsc --module commonjs --outDir dist/cjs",
 "copy-files": "cp ./src/index.css dist/",

定义 pkg 的 entry point

现在打包结果有两种格式, 应该使使用软件包的工具意识到它们可以在ES或CommonJS模块之间进行选择。因此，他们可以选择他们支持的一个。

默认情况下，大多数使用软件包的工具都希望在 package.json 的 main 字段中找到一个CommonJS模块

因此，请使用该字段来引用您的CommonJS模块。并将ECMAScript编译添加到该模块属性中。

"main": "./dist/cjs/TweetButton.js",
"module": "./dist/esm/TweetButton.js",

指定包含程序包的类型定义的声明文件也是一个很好的做法 "types": "./dist/esm/TweetButton.d.ts"

本地测试未发布的包

  • npm link tells NPM to create a symlink (symbolic link) in your system’s global directory that links to your package.

  • 创建 nextjs 项目

    • npx create-next-app@latest
    • 再创建的额项目下, npm link package-name
      • NPM disconnects the symlink automatically whenever you install or uninstall packages. So, remember to re-run thenpm link package-namecommand after installing or uninstalling any library.
    • 在 page.tsx 中使用组件 🎉
    • 再 nextjs 项目下执行 npm unlink package-name 会取消link
    • npm rm --global package-name 删除全局的 link
    • npm ls --global package-name 查看是否删除

Creating LICENSE

  • 创建 LICENSE 文件

如果你不申请开源许可，所有为你的项目做出贡献的人都会成为他们作品的独家版权所有者。 这意味着没有人可以使用、复制、分发或修改他们的贡献, 你也不行

publish to npm

  • 在 package.json 中添加 description, keywords, author, homepage
  • 声明你想发布的目录 "files": ["./dist"], "main" 字段中的文件, package.json README LICENSE 默认会被包含进去
  • npm publish --dry-run ，npm 会执行发布包的所有步骤，但不会实际将包上传到 npm , 可以帮助你确保你的 package.json files 配置是否正确, 是否有遗漏; 帮助你预览版本号, 包名等重要信息;
  • npm run test
  • npm run build
  • npm login
  • npm search pkg-name 确保名字可以用. 我们可以在名字前加个前缀 @<username>/first-package 代表包作为 NPM 用户名的一个作用域的发布。
  • npm publish 恭喜, 报错啦 !!!
    • 如果限定了包的名称, NPM的默认会假设这个有作用域的包是一个私有项目。因此，如果您使用npm publish 发布命令来共享它，就会得到一个错误。因此，要将您的包作为用户名的范围发布，请将——访问=公共标志添加到thenpm发布命令：
    • npm publish --access=public 执行

测试包的使用

  • npm i @aaamrh/first-package
  • 本地测试
  • 将测试用的 nextjs 项目提交到 github 上, 部署到 https://vercel.com/ 上, 后续好测试

Updating Package’s Versions

  • npm version [<newversion> | major | minor | patch | premajor | preminor | prepatch | prerelease [--preid=<prerelease-id>] | from-git]
  • 修改下组件标签 npm run build
  • npm version patch
  • git push -u origin main
  • npm publish 版本 v1.0.0 => v1.0.1
  • 增加一个 feature => npm run build => git add commit => npm version minor => git push => npm publish
  • npm version major 同理

Automating Version Management

  • npm i -D release-it
  • package.json scripts 增加·"release": "release-it"
  • git add commit
  • npm run release

覆盖 release-it 的默认配置

  • 创建 .release-it.json 并配置, 也可以写在 package.json 中

给 release-it 提供一个推荐版本

  • npm i -D @release-it/conventional-changelog , 配置到 .release-it.json 中
  • 会发现已经不会在提示让你选择版本

自动日志管理

  • 添加 infile 字段到 .release-it.json 的 plugins 中, 它规定了 日志文件名字
  • 我们增加一个 feature
  • npm run test => npm run build => git add => git commit -m 'feat(tweetbutton)!: 内容' => npm run release
    • commit 中的 ! 代表 breaking change
    • 这时候会生成 CHANGELOG.md, 也就是上面的 infile
  • 为什么 CHANGELOG 会忽略一些提交？
    • 因为 @release-it/conventional-changelog 预制了如下类型选项
 "types": [
   {"type": "feat", "section": "Features"},
   {"type": "fix", "section": "Bug Fixes"},
   {"type": "chore", "hidden": true},
   {"type": "docs", "hidden": true},
   {"type": "style", "hidden": true},
   {"type": "refactor", "hidden": true},
   {"type": "perf", "hidden": true},
   {"type": "test", "hidden": true}
 ]

可以在 .release-it.json 中覆盖配置

  • 继续修改一点组件
  • 重复上述流程 test -> build -> ...

github 自动发布

  • github 生成一个 access token
  • 创建 github 环境变量 GitHub 项目的 settings => Secrets and variables => Actions => New repository secret => 填写 access token, 还有名: RELEASE_IT_GITHUB_TOKEN
  • 配置 .release-it.json
    • "github": { "release": true, "tokenRef": "RELEASE_IT_GITHUB_TOKEN" },
  • 创建 .env , .gitignore 忽略 .env
  • npm i -D dotenv-cli
  • 修改 package.json scripts release "release": "dotenv release-it --"
  • git add commit
  • 修改我们的组件 重复上述流程 test -> build -> ...