vue を使用してプラグインをカプセル化し、npm に公開する詳細な例

この記事では主に、vue を使用してプラグインをカプセル化して npm に公開する方法と手順を紹介します。編集者はこれが非常に優れていると考えたので、参考として共有します。編集者をフォローして見てみましょう。皆さんのお役に立てれば幸いです。

1. Vue ベースの国市外局番リスト

vue-flag-list には、ほとんどの国の市外局番が含まれており、市外局番がない場合は、右側の三角形をクリックしてリストを展開します。リストにある市外局番を自分で入力することもできます。

グローバル市外局番リスト

1.1 初期化コンポーネント

は、vue-cli を使用してコンポーネントを初期化します。必要のないことがたくさんありますが、これには慣れているため、この手順に従います。

vue init webpack vue-flag-list
cd vue-flag-list
cnpm install 
npm run dev

1.2 独自のニーズに応じて特定の関数を実装します。主な関数は vue-flag-list.vue コンポーネントに記述されています。

<template>
 <p>
 ...
 </p>
</template>

<script>
 export default {
  name: &#39;vue-flag-list&#39;,
  ...
 }
</script>

<style>
 ...
</style>

関数を記述したら、package.jsonとその他の設定ファイルを変更してパッケージ化とリリースの準備をします

1.3 Index.jsを追加します

import flagComponent from './Vue-Flag-List.vue'

const VueFlagList = {
 install: function (Vue) {
 if (typeof window !== 'undefined' && window.Vue) {
  Vue = window.Vue
 }
 Vue.component('VueFlagList', flagComponent)
 }
}

export default VueFlagList

1.4 設定ファイルを変更します

1.4.1 package.json

{
 "name": "vue-flag-list",
 "version": "1.0.0",
 "description": "A vue plugin for entering and selecting area code",
 "author": "guimin",
 // 因为组件包是公用的，所以private为false
 "private": false,
 // 配置main结点，如果不配置，我们在其他项目中就不用import XX from '包名'来引用了，只能以包名作为起点来指定相对的路径
 "main": "dist/vue-flag-list.min.js", 
 "scripts": {
 "dev": "node build/dev-server.js",
 "start": "node build/dev-server.js",
 "build": "node build/build.js"
 },
 // 指定代码所在的仓库地址
 "repository": {
 "type": "git",
 "url": "git+https://github.com/linmoer/vue-flag-list.git"
 },
 // 指定打包之后，包中存在的文件夹
 "files": [
 "dist",
 "src"
 ],
 // 指定关键字
 "keywords": [
 "vue",
 "flag",
 "code",
 "flag code"
 ],
 "license": "MIT", //开源协议
 // 项目官网的url
 "homepage": "https://github.com/linmoer/vue-flag-list#readme",
 "dependencies": {
 "vue": "^2.3.3"
 },
 "devDependencies": {
 ...
 },
 "engines": {...},
 "browserslist": [...]
}

1.4.2. gitignore ファイル

dist フォルダーを使用する必要があるため、.gitignore ファイル内の dist/ を削除します。

1.4.3 webpack.prod.conf.js ファイル

複数の使用シナリオをサポートするには、適切なパッケージ形式を選択する必要があります。一般的なパッケージ形式には、CMD、AMD、UMD が含まれます。CMD は Node 環境でのみ実行でき、AMD はブラウザーでのみ実行でき、UMD は両方の実行環境をサポートします。明らかに、UMD形式を選択する必要があります。 Webpack での出力形式を指定する設定項目は、output.libraryTarget です。 サポートされる形式は次のとおりです。

• "var Library = xxx (default); as" this の属性として出力: this["Library"] = xxx;

• "commonjs" - エクスポートの属性として出力: exports["Library"] = xxx;

• "commonjs2" - モジュールとしてエクスポート形式の出力: module.exports = xxx;

• "amd" - AMD 形式で出力;

• "umd" - AMD、CommonJS2 およびグローバル属性形式で同時に出力します。

• 以下は webpack.prod.conf.js の出力設定の例です:

   output: {
   path: path.resolve(__dirname, '../dist'),
   publicPath: '',
   filename: 'vue-flag-list.min.js',
   library: 'VueFlagList',
   libraryTarget: 'umd',
   umdNamedDefine: true
   },

Vue はコンポーネント ライブラリの外部依存関係です。コンポーネント ライブラリのユーザーは、パッケージ化するときに Vue をコンポーネント ライブラリにパッケージ化しないでください。ただし、パッケージ化されたコンポーネント ライブラリを <script> タグの形式で直接インポートすると、正常に実行できず、vue が未定義であるというメッセージが表示されます。 </script>

<script> タグの形式でコンポーネントを使用する場合、Vue のインポートにも <script> タグが使用されます。 Vueでインポートされる変数は「window.vue」ではなく「window.Vue」なので、vueが定義されていないエラーが発生します。 <p><br/>そのため、次のように webpack.prod.conf.js で外部を設定する必要があります: <pre class="brush:php;toolbar:false">externals: { vue: { root: &#39;Vue&#39;, commonjs: &#39;vue&#39;, commonjs2: &#39;vue&#39;, amd: &#39;vue&#39; } },<p> さらに、CSS をファイルにパッケージ化するには、webpack.prod.conf の plugins オプションを変更する必要があります。 .js <pre class="brush:php;toolbar:false">new ExtractTextPlugin({ filename: utils.assetsPath(&#39;css/[name].[contenthash].css&#39;) }),<p>を<pre class="brush:php;toolbar:false">new ExtractTextPlugin({ filename: &#39;vue-flag-list.min.css&#39; }),<p>に変更します<pre class="brush:php;toolbar:false">entry: { app: &#39;./src/index.js&#39; },<p>エントリファイルを変更します<pre class="brush:php;toolbar:false">- vue-flag-list + build + dist - src + img index.js Vue-Flag-List.vue ...<p>1.5 ディレクトリ構造を整理します。私のディレクトリ構造は次のとおりです:<pre class="brush:php;toolbar:false">npm build npm pack<p>次に、npmを使用してパッケージを公開します<p>公式パッケージを送信する前に、ローカルでパッケージを作成し、問題がないかテストして問題がなければ、npm に公開します。 <p>2.1 は <pre class="brush:php;toolbar:false">cnpm install 路径/vue-flag-list-1.0.0.tgz<p>npm パックを使用してローカルにパッケージ化され、vue-flag-list-1.0.0.tgz ファイルが現在のディレクトリに生成されます。 <p>新しいvueプロジェクトを開き、現在のパスで実行します(「パス」はファイルの場所を示します)<pre class="brush:php;toolbar:false">import VueFlagList from &#39;vue-flag-list&#39; import &#39;vue-flag-list/dist/vue-flag-list.min.css&#39; Vue.use(VueFlagList)<p>新しいプロジェクト(main.js)のエントリファイルに<pre class="brush:php;toolbar:false"><flagCode height="30" width="120" @getCode="getCode"> methos: { getCode(code) { console.log(code) } }<p>を導入し、コンポーネント<pre class="brush:php;toolbar:false">npm login<p> 2.2 npmへの公開<p>1. npm公式Webサイトでnpmアカウントを登録します<p>2. パッケージ化するプロジェクトのルートディレクトリに切り替え、npmアカウントにログインし、ユーザー名を入力します、パスワード、メールアドレス<pre class="brush:php;toolbar:false"># lin@lin-Pro in ~/www/vue-flag-list on git:master $ npm publish # lin@lin-Pro in ~/www/vue-flag-list on git:master $ + vue-flag-list@1.0.0<p>3. 最後のステップはnpmを実行するだけですrrreee<p> 3. 追記<p> 長い間苦労した結果、vue-flag-listプラグインのプロトタイプをリリースしました非常にシンプルなプラグインですが、今後もメンテナンスを続け、より実用的な機能を追加していきます。 <p><ul class=" list-paddingleft-2">npm unpublish --force: 公開されたパッケージを削除します (パッケージの指定したバージョンを削除することもできます) <li><p>npm logout: ユーザーをログアウトします<li><p>関連推奨事項: <p>jQuery カプセル化ページングコンポーネント 詳細説明<p><a href="http://www.php.cn/js-tutorial-384268.html" target="_self">JavaScriptシミュレーション実装のカプセル化の3つの方法と書き方<p><a href="http://www.php.cn/js-tutorial-383826.html" target="_self">phpカプセル化検索クラス例<p><a href="http://www.php.cn/php-weizijiaocheng-383542.html" target="_self"></script>

以上がvue を使用してプラグインをカプセル化し、npm に公開する詳細な例の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。