ホームページ > 記事 > ウェブフロントエンド > vue を使用してプラグインをカプセル化し、npm に公開する詳細な例

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

小云云オリジナル: 2018-01-09 15:16:471888ブラウズ

この記事では主に、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 id="flag">
 ...
 </p>
</template>

<script>
 export default {
  name: 'vue-flag-list',
  ...
 }
</script>

<style scoped>
 ...
</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
 },