自分でツールプロジェクトを作成し、npm にアップロードして使用する方法

ステップ 1: npm 公式 Web サイトにアカウントを登録する

ステップ 2: cmd ウィンドウでプロジェクトを作成します (ここでは例として vue3 を使用します)

npm create vite 项目名

フレームを選択してください:

言語を選択してください:

プロジェクトでコマンドを使用して、プロジェクトの依存関係をインストールします。

npm i

プロジェクトを実行します。

npm run dev

成功したインターフェイスを実行します。

知らせ：

version : 現在リリースされているバージョン番号。プロジェクトを変更するたびに、リリースする前にバージョンを変更する必要があります。デフォルトでは、0.0.1 からのみアップロードできます。同じバージョンはアップロードできません。次のことを忘れないでください。コードを変更するたびにバージョン番号を変更します。

name: パッケージ名は小文字のみにすることができ、すべての npm パッケージ名で繰り返すことはできません。最初に tools-cli を使用したとき、名前が占有されているためにアップロードが失敗することがわかりました。

package.json コードは次のとおりです。

{
  "name": "tt-tool",
  "private": false, // 默认是true,要改成false,不然后期没法成功上传
  "version": "0.0.1",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
    "vue": "^3.2.47"
  },
  "devDependencies": {
    "@vitejs/plugin-vue": "^4.1.0",
    "vite": "^4.3.9"
  }
}

ステップ 3: npm ユーザー情報を追加する

npm adduser    //1. 根据提示输入你的 username、password、email

上記のコマンドを入力してもアカウントとパスワードを入力できない場合は、npm 設定を確認して変更してください。

npm config list    //可查看你当前的 npm 配置
 
npm config set registry https://registry.npmjs.org/    //npm 源更换为 npm 官方源

npm adduserを再度実行してください

※パスワードを入力しても表示されませんので、通常通り入力してください。

プロジェクトを公開する:

npm publish    //发布

注:「このパッケージはプライベートとしてマークされています」という公開エラーが報告された場合は、package.json 構成を変更し、プライベート属性値を false に変更します。

成功したインターフェイスは次のとおりです。

ステップ 4: アップロードしたプロジェクトが正常かどうかをテストする

また、プロジェクトを見つけてコマンドを入力し、npm にアップロードしたプロジェクトをインストールします (私のプロジェクトは tt-tool と呼ばれます)。

npm install tt-tool

次のプロンプトが表示されれば成功です。

ステップ 5: 他のプロジェクトに導入するためにツールプロジェクトにいくつかのメソッドを追加する方法

ここでは2つのタイプに分けて説明します。

最初のタイプ: プロジェクトは、コンポーネントの形式ではなく、いくつかの純粋なメソッドのみをスローします。

1.「npm create vite Demon」でプロジェクトを作成し、その他をフレームワークとして選択します。

2. テンプレートのライブラリを選択し、Enter キーを押して言語を選択すると、作成が成功します。

3. プロジェクトのコード構造はおおよそ次のとおりです。

vite.config.js コード:

import { defineConfig } from "vite";

export default defineConfig({
  build: {
    //构建的库
    //通过build.lib把代码打包成一个第3方库，这个库可以直接在浏览器和node.js环境中使用
    lib: {
      entry: './lib/main.js', // 入口文件目录（相对于根目录来说）
      name: 'TtUtils', // 导出的全局变量名称
      fileName: 'ttUtils', // 构建后的代码文件名
      minify:true, // 是否对代码进行压缩
    }
  }
})

libフォルダに投げるメソッドを書く

build コマンドを使用してプロジェクトをビルドしてターゲットファイル (スクリーンショットでは ttUtils.js) を生成し、npm public コマンドを使用してプロジェクトを npm に公開します。外部プロジェクトは npm install xxx を使用してインストールされ、main.js に導入する必要があります。または使用前のコンポーネント。