release-it を使用してリリース コンポーネント ライブラリを自動的に管理する
前回の記事ではコンポーネント ライブラリをパッケージ化しましたが、この記事ではコンポーネント ライブラリを公開する方法を紹介します。もちろん、この記事で紹介することは決して出版という単純なものではありません。
コンポーネントライブラリを公開しました
pnpm init公開したいパッケージはパッケージ化後に easyest という名前が付けられているため、生成はeasyest で実行されます。package.json
{
"name": "easyest",
"version": "1.0.0",
"main": "lib/index.js",
"module": "es/index.mjs",
"files": [
"es",
"lib"
],
"keywords": [
"easyest",
"vue3组件库"
],
"sideEffects": [
"**/*.css"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts",
}
いくつかのフィールドについて説明する
- 主要
コンポーネントライブラリエントリファイル
- モジュール
コンポーネントライブラリを使用する環境がesmoduleをサポートしている場合、エントリファイルはこのフィールドになります
- ファイル
npm 上のファイル ディレクトリにパブリッシュする
- 副作用
パッケージ化されたコンポーネントのコードなど、ツリーの揺れによって副作用が発生するコードは無視します。
import "./xxx.css"
これにより、ビルド ツールはこのコードに副作用があるかどうか (つまり、インポートされた他のファイルのコードが使用されるかどうか) を認識できなくなり、ビルド時にコードが完全にパッケージ化され、自動オンデマンド インポート機能が失われます。エスモジュールの。したがって、sideEffects フィールドを追加すると、このコードが副作用を生じないことをビルド ツールに伝えることができ、ツリー シェイキングを安心して実行できます。
- タイピング
ファイル エントリを宣言し
、パッケージング ディレクトリで pnpm public を実行します。この時点では npm アカウントにログインしていることに注意してください。そうでない場合は、公式 Web サイトにアクセスして登録できます。公開する前に、コードをwareware またはサフィックス pnpm public を追加します --no- git-checks だけを実行し、npm にログインして、リリースしたばかりのパッケージを確認します
自動公開
上記のリリースが更新されるたびに、手動でバージョンアップしたり、手動でタグ付けしたりする必要があり、非常に不便です。
最初にグローバルにインストールするrelease-it
pnpm add release-it -D -w
次に、スクリプト スクリプトと git ウェアハウス アドレスをパッケージ化されたファイルの下の package.json に追加するのが最も簡単です
{
"name": "easyest",
"version": "1.0.1",
"main": "lib/index.js",
"module": "es/index.mjs",
"files": [
"es",
"lib"
],
"keywords": [
"easyest",
"vue3组件库"
],
"sideEffects": [
"**/*.css"
],
"author": "小月",
"license": "MIT",
"description": "",
"typings": "lib/index.d.ts",
"scripts": {
"release": "release-it"
},
"repository": {
"type": "git",
"url": "https://github.com/qddidi/easyest"
}
}
タスクを公開するために、スクリプト ディレクトリに新しいpublish/index.tsを作成します。
import run from "../utils/run";
import {
pkgPath } from "../utils/paths";
import {
series } from "gulp";
export const publishComponent = async () => {
run("release-it", `${
pkgPath}/easyest`);
};
export default series(async () => publishComponent());
スクリプトコマンド gulp を追加して、ルート ディレクトリの package.json ファイルにあるpublish/index.ts を実行します。
"scripts": {
"build:easyest": "gulp -f packages/components/script/build/index.ts",
"publish:easyest": "gulp -f packages/components/script/publish/index.ts"
},
次に、変更を送信して実行するpnpm run publish:easyestと、バージョンのアップグレード方法、公開するかどうか、タグを追加するかどうかなどを選択できることがわかります。選択後、
コンポーネント ライブラリが正常にリリースされ、github が作成されます。タグも正常に追加されました
