vue足場アーキテクチャに基づいてライブラリを構築しnpmにパブリッシュ

ライブラリを構築する一般的な方法は2つあります.1つは、自分で手動でwebpackライブラリを構築してパッケージ化し、outputをlibraryに設定することです.もう1つは、vue-cli3に基づいてライブラリリソースパケットを出力することである.ライブラリを構築するには、2番目のvue足場を使用します.
新規ライブラリコマンド

// package.json 
"scripts": {
    // ...
    "lib": "vue-cli-service build --target lib --name Step --dest dist packages/index.js"
}

// packages/index.js      Step
import Step from '../steps/src/step';
Step.install = function(Vue) {
    Vue.component(Step.name, Step);
};
export default Step;

--name:ライブラリ名.

--target:ターゲットを構築し、デフォルトではアプリケーションモードです.ここでlib有効ライブラリモードに変更します.

--dest:出力ディレクトリ、デフォルトdist.

[entry]:最後のパラメータはエントリファイルで、デフォルトはsrc/Appです.vue.

詳細構成については、☛vue足場公式サイトを参照してください.
ライブラリが他のライブラリに依存している場合は、vue.config.jsでexternalsを構成します.

// vue.config.js
module.exports = {
    configureWebpack:{
      externals: {
         vue: 'Vue',
         'vue-router':'VueRouter',
         axios: 'axios'
      }
    }
}

npm run libを実行すると、ライブラリがルートディレクトリのdistフォルダの下にパッケージされていることがわかります.
追加npmignoreファイル(オプション)
和.gitignoreの文法と同じように、具体的にどんな書類を提出する必要があるかは、それぞれの実際の状況を見てみましょう.

#     
examples/
packages/
public/

#       
vue.config.js
babel.config.js
*.map

npmライブラリ情報の構成
パッケージを構成します.jsonファイルを使用して、ライブラリファイルをパブリッシュします.

{
  "name": "gis",
  "version": "1.2.5",
  "description": "   Vue     ",
  "main": "dist/gis.umd.min.js",
  "keyword": "vue gis",
  "private": false,
   "files": ["dist"],
  "license": "MIT"
 }

name:パッケージ名、この名前は唯一です.npm公式サイトで名前を検索できますが、存在する場合は名前を変更する必要があります.

version:バージョン番号は、npmにパブリッシュされるたびにバージョン番号を変更する必要があります.履歴バージョン番号と同じではありません.

description:説明.

main:最終的にコンパイルされたパッケージファイルを指すエントリファイル.

keyword:キーワードは、ユーザーが最終的に検索したい語をスペースで分離します.

author:著者

files:アップロードするファイル

private:プライベートかどうかは、npm

にパブリッシュするにはfalseに変更する必要があります.

license:オープンソースプロトコル

dependencies:依存ライブラリ

注意新しいライブラリをパブリッシュするたびに、バージョン番号を変更する必要があります.ルールは次のとおりです."version": "1.2.5"主バージョン番号は1、次バージョン番号2、改訂番号5

メインバージョン番号(Major):互換性のないAPIを変更すると

次バージョン番号(Minor):下向き互換性のある機能を追加すると

リビジョン番号(Patch):下位互換の問題修正

を行った場合
ログインnpm
まずログインしたnpmミラーアドレスを設定します
npm config set registry
http://168.20.20.57.4873
そして端末でログインコマンドを実行し、ユーザー名、パスワード、メールボックスを入力してログインする
npm login
次にnpmにライブラリリソースをパブリッシュします
npm publish
最終的には、公式サイトで対応するパッケージを確認してダウンロードすることができます.
npm install package_name