vue-cli3でリーフレットマップコンポーネントをゼロからビルドする npm package write a test package

紹介

最初の記事では、npmパッケージのアップロード方法を設定する方法を簡単に説明します。

まず最初に、npmパッケージの開発に使用するvueプロジェクトを作成します。

vueプロジェクトの作成 準備編

プロジェクトの作成にはvue createを使用し、プロジェクト部分を作成しますあまり導入はしないでくださいこの記事を見ていただければパートナーは作成できると思いますtsとrouterの設定を使用するのは、npmパッケージを行うためですが、テスト用のプロジェクトでも行いたいし、パートナーに効果をよく見てもらうために表示させたいのでrouterを使用するという配慮です

作成後のディレクトリは

vueディレクトリ構造の変更

まず、コンポーネントをテストしたり表示したりするために、コンポーネントを呼び出すプロジェクトとして、srcの名前をdocに変更しました。

次に、vue.config.jsファイルを作成し、docフォルダへのエントリを変更して、それに従って設定しました。

const path = require('path');
const merge = require('webpack-merge')
module.exports = {
 lintOnSave: false,
 pages: {
 index: {
 // page  
 entry: "doc/main.ts",
 // テンプレートソース
 template: "public/index.html",
 // 出力ファイル名
 filename: "index.html"
 }
 },
};

その後、問題なくプロジェクトを実行します。

docフォルダは、将来のコンポーネントのテストとコンポーネントのプレゼンテーションのためのプロジェクトフォルダとして機能します。

ステップ2 npmコンテンツを書き始める

npmパッケージの作成開始

次に、npmコンポーネントのフォルダとしてpackagesフォルダを作成します。

packagesフォルダの中に、簡単なテストを行うためのtestフォルダを作成します。

testフォルダの中に、index.tsファイルとsrcフォルダを作成しました。index.tsは、コンポーネントを登録して公開するための設定に使用します。

srcフォルダには、コンポーネントが書き込まれるindex.vueファイルを作成しました。

テスト用の簡単なデモの作成

// テストとして簡単なデモを書いてみた。
<template>
	<div class="test">
		test component
	</div>
</template>
<script>
export default {
	name: "test",
	options: {
		name: "test",
	},
	created() {
		console.log("created,テスト・コンポーネント");
	},
};
</script>
<style>
.test {
	color: red;
}
</style>

コンポーネントの公開

次に、testフォルダに作成されたindex.tsファイルに書かれたコードは、index.tsのsrcのコードを取得し、コンポーネントとして登録し、それを公開します。

import test from "./src/index.vue";
/* istanbul ignore next */
(test as any).install = function(Vue: any) {
	Vue.component(test.name, test);
};
export default test;

現在のディレクトリ構成

ステップ3 グローバル登録コンポーネントの構成

グローバル登録ファイルの準備

この時点で、あなたは簡単なデモコンポーネントを書きましたが、まだ何の波風も立っておらず、エラーさえ報告しています。しかし、心配しないでください。packagesファイルの下にindex.tsを作成し、あなたが書いたコンポーネントを取得し、あなたが書いたすべてのコンポーネントをエクスポートします。

// 1つのコンポーネントをインポートする、複数のコンポーネントをここに追加する、ディレクトリをループして一度に取得する。
import test from './test'
// コンポーネントを配列構造に格納することで、コンポーネントをトラバースしやすくなる。
const components = [test];
// インストール方法を定義する
const install:any = function (Vue:any) {
 if (install.installed)return;
 install.installed = true;
 // グローバル・コンポーネントを繰り返し登録する
 components.map(component => {
 // Vue.component(component.name, component);
 Vue.use(component)
 });
};
if (typeof window !== "undefined" && window.Vue) {
 install(window.Vue);
}
export default {
 // エクスポートされたオブジェクトは、installメソッドを持たなければならない
 install,
 // コンポーネント一覧
 ...components
};

グローバル・オーサリング・コンポーネントの完成

素晴らしい仕事です！ 次にすることは、まずプロジェクトでテストすることです。

ステップ4 プロジェクトでのテスト

プロジェクトでテストされたコンポーネントが機能しているかどうか 参照コンポーネント

docフォルダに移動して、先ほど書いたテストコンポーネントが問題ないか、動作するかどうかを確認することができます。 まず最初に、doc/main.tsに先ほど書いたコンポーネントを導入する必要があります。

import Vue from "vue";
import App from "./App.vue";
import test from "../packages/index"; //コンポーネントの紹介
Vue.use(test); //登録する。
Vue.config.productionTip = false;
new Vue({
	render: (h) => h(App),
}).$mount("#app");

今書いたテストコンポーネントをプロジェクトで使う

mainにはグローバル登録があるので、コンポーネント名だけでOKです。

<template>
	<div id="app">
		<div id="nav">
			test
			<test></test>
		</div>
	</div>
</template>
<style lang="scss">
#app {
	font-family: Avenir, Helvetica, Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-align: center;
	color: #2c3e50;
}
</style>

ページをチェックしてください。

導入が完了したら、ページを見て正しい効果かどうかを確認します。

ok style output all exist one not missing next is packaged into npm package released to npm for others to use.

ステップ5 設定とパッケージング

パッケージコマンドの設定

パッケージを区別するために、packagesフォルダはlibとしてパッケージ化されます。

package.jsonのスクリプトに新しいlibコマンドを追加します。

 "lib": "vue-cli-service build --target lib --name test --dest lib packages/index.ts"
 // このコマンドは、パックするフォルダと名前を指定する。

設定読み込みパス main

パッケージの設定が完了したら、パッケージを読み込むためのパスを設定するか、package.jsonで変更する必要があります。 package.jsonのmainをパッケージ化されたjsに変更します。

 "main": "lib/test.umd.min.js",

コンフィギュレーション

梱包開始

設定が完了したら、yarn libまたはnpm run libを使ってパッケージをnpmパッケージにすることができます。 packageコマンドを実行してみましょう。

OK, パッケージは正常にパッケージ化されました。 パッケージが正常にパッケージ化されると、ディレクトリに lib フォルダが追加されます。 このフォルダが npm パッケージです。 次のステップは、npm にアップロードして使用することです。

ステップ6 npmへのアップロード

nrmのインストールとnpmの管理

次のステップはnpmへのアップロードです。 まず、npmを管理するためのnrmプラグインをダウンロードする必要があります。

// コマンドでnrmをグローバルにインストールする
npm install -g nrm 

簡単なnrmコマンド

nrm ls // npmリストを見る
nrm use //  

npmソースに切り替える

最初にnrm lsを使って、現在どのソースにいるかを確認します。アスタリスクが現在のソースです。

nrm use npm

もう一度リストを見てみると、npmの前にアスタリスクがあり、切り替えが成功したことがわかります。

ステップ7 npm sourceにログインし、ノートをアップロードします。

ログイン

npmソースに切り替わったら、npm loginコマンドでログインします。 ログインしたらnpm publishをアップロードできますが、ログイン後にアップロードする前にいくつか注意すべき点があります。

備考

npm publish

それでは、npm publishを使って直接アップロードしてみましょう。

問題なくアップロードできたので、npmでパッケージが存在するか確認してみましょう。

ステップ8 ダウンロード

それではダウンロードを始めましょう。

他のプロジェクトにダウンロードしてテストしてみましょう。 直接npmでlf-map-npmをインストールします。

はじめに

この時点で、他のプロジェクトのmain.jsにコンポーネントとコンポーネントのcssと登録を導入することは基本的に決まりました。

import lfMapNpm from 'lf-map-npm' // コンポーネントの紹介
import 'lf-map-npm/lib/test.css' // コンポーネントcssの紹介
Vue.use(lfMapNpm) // 利用登録する 

プロジェクト内の必要な場所で直接使用します。ここでは便宜上、App.vueで直接使用します。

<template>
 <div id="app">
 	<test></test>
 </div>
</template>
<script>
export default {
 name: "App",
};
</script>
<style>
#app {
 font-family: Avenir, Helvetica, Arial, sans-serif;
 -webkit-font-smoothing: antialiased;
 -moz-osx-font-smoothing: grayscale;
 text-align: center;
 color: #2c3e50;
 margin-top: 60px;
}
</style>

成功しました！

いよいよ一番盛り上がるところに来ましたので、緊張感を持ってページを見ていきましょう。

okok Successful no problem print style are in.

まとめ

この記事では、vueを使ってnpmパッケージの書き方やアップロード方法を説明します。

1.nrm ls npm listを見る

2.nrm use switch npm source

3.npm login npmにログイン

4.npm publish npmにアップロード

そしてフォルダと設定の変更です。

最初のステップが終わったので、leafletをベースにしたすぐに使えるnpmパッケージの統合を始めましょう。

npm

npm

www.npmjs.com/package/lf-...

https://..//--pm

github

設定はlibブランチに置いておきましたので、必要な方はlibブランチからダウンロードしてください。

https://.//-//ib

皆さんのお役に立てれば幸いです。一緒に議論し、成長し、欠点があれば指摘してください。

もし使いたいのであれば、ソースを示して承認を得てほしい。