リーフレットプラグイン開発ガイド

PLUGIN-GUIDE.md

#Leafletプラグインオーサリングガイド

#MapleLeafプラグイン決定的なガイド

Leafletの最大の利点の1つは、その強力なプラグインエコシステムです。

Leafletの最も強力な点は、その強力なプラグインエコシステムです。

[Leafletプラグインページ](http://leafletjs.com/plugins.html)には、数十のすばらしいプラグインがリストされており、毎週さらに多くのプラグインが追加されています。

Leafletプラグインページ(http://leafletjs.com/plugins.html)には、多数の優れたプラグインがリストされており、毎週新しいプラグインが追加されています。

このガイドには、Leaflet自体の品質基準を満たすLeafletプラグインを公開するためのいくつかのベストプラクティスがリストされています。

このガイドでは、Leafletの品質基準を満たすLeafletプラグインを公開するための最も強力な方法をいくつか紹介します。

コンテンツディレクトリ

1. [プレゼンテーション](#presentation)

  -[リポジトリ](#repository)

  -[名前](#name)

  - [Demo](#demo)

  -[Readme](#readme)

  -[ライセンス](#license)

2. [コード](#code)

  -[ファイル構造](#file-structure)

  -[コード規約](#code-conventions)

  -[プラグインAPI](#plugin-api)

3. [NPMで公開](#publishing-on-npm)

4. [モジュールローダー](#module-loaders)

5. [プラグインリストへの追加](#adding-to-the-plugins-list)

1. [プレゼンテーション](#プレゼンテーション)
-[ストレージライブラリ](#ストレージライブラリ)
-[名前](#名)
-[デモンストレーション](デモンストレーション)
-[自述](#自述)
-[ライセンス](#ライセンス)
2。[コード](#コード)
-[ファイル構造](#ファイル構造)
-[コード規則](#コード規則)
-[プラグインAPI](#プラグインAPI)
3。[NPMリリース](#NPM投稿)
4。[モジュールローダー] (#モジュールローダー)
5。[プラグインリストに追加] (#プラグインリストに追加)

 

## プレゼンテーション

##プレゼンテーション

###リポジトリ

###リポジトリ

Leafletプラグインを配置するのに最適な場所は、別の[GitHub](http://github.com)リポジトリです。

Leafletプラグインを配置するのに最適な場所は、別のGithubリポジトリです。

さまざまな用途のプラグインのコレクションを作成する場合、さまざまな用途のプラグインのコレクションを作成する場合、

それらを1つのリポジトリに配置しないでください-すべてを1つのGithubリポジトリに配置しないことをお勧めします。

通常、個々のリポジトリで小さな自己完結型のプラグインを使用する方が簡単です。

 

### 名前

 

ほとんどの既存のプラグインは、 `Leaflet.MyPluginName`のようなプラグイン(およびリポジトリ)の命名規則に従います。

他の形式(「leaflet-my-plugin-name」など)を使用できます。

それがLeafletプラグインであることを明確にするために、名前に「Leaflet」という単語を含めるようにしてください。

ほとんどの既存のプラグインは、次のようなプラグイン(およびリポジトリ)の命名規則に従います: `flyer.MyPluginName`。
他の形式(たとえば、「flyer my pluginname 」)を使用できます名前
に「flyer」を含めるようにしてください。チラシプラグインであることは明らかです。

### デモ

 

プラグインを公開するときに行う最も重要なことは、プラグインの機能を紹介するデモを含めることです。

それは通常、人々が最初に探すものです。

プラグインを公開するときに最も重要なことは、プラグインの機能を示すデモを含めることです。
これは通常、人々が最初に探すものです。

デモを作成する最も簡単な方法は、[GitHub Pages](http://pages.github.com/)を使用することです。

デモを公開する良い方法は、GithubPagesを使用することです。

良い[出発点](https://help.github.com/articles/creating-project-pages-manually)は、リポジトリに「gh-pages」ブランチを作成し、それに「index.html」ページを追加することです。 —

プッシュすると、 `http:// <user> .github.io / <repo>`として公開されます。

 

### Readme

 

次に必要なのは、リポジトリのルートにある[good `README.md`](https://github.com/noffle/art-of-readme)(または同様のWebサイトへのリンク)です。コンテンツ)。

少なくとも、次のアイテムが含まれている必要があります。

 

-プラグインの名前

-それが何をするかについての簡単で簡潔な説明

-要件

  -リーフレットバージョン

  -その他の外部依存関係(存在する場合)

  -ブラウザ/デバイスの互換性

-デモへのリンク

-プラグインを含めるための手順

-簡単な使用法のコード例

-APIリファレンス(メソッド、オプション、イベント)

 

###ライセンス

 

すべてのオープンソースリポジトリにはライセンスが含まれている必要があります。

コードに選択するオープンソースライセンスがわからない場合は、

[MIT License](http://opensource.org/licenses/MIT)と[BSD 2-Clause License](http://opensource.org/licenses/BSD-2-Clause)はどちらも良い選択です。

これを `LICENSE`ファイルとしてリポジトリに配置するか、Readmeからライセンスにリンクすることができます。

 

##コード

 

###ファイル構造

 

ファイル構造をクリーンでシンプルに保ち、

たくさんのファイルを1か所に積み上げないでください-

新しい人があなたのリポジトリで自分の道を見つけやすくします。

 

単純なプラグインの必要最低限​​のリポジトリは次のようになります。

 

`` `

my-plugin.js

README.md

`` `

 

より洗練されたプラグインファイル構造の例:

 

`` `

/ src-JSソースファイル

/ dist-縮小されたプラグインJS、CSS、画像

/ spec-テストファイル

/ lib-必要に応じて外部ライブラリ/プラグイン

/ examples-プラグインの使用法のHTML例

README.md

ライセンス

package.json

`` `

 

###コード規約

 

好みは人それぞれですが、プラグインに選択する規則に一貫性を持たせることが重要です。

 

出発点としては、[Airbnb JavaScriptガイド](https://github.com/airbnb/javascript)をご覧ください。

リーフレットはほぼ同じ規則に従います

スマートタブ(インデント用のハードタブ、位置合わせ用のスペース)の使用を除く

`function`キーワードの後に​​スペースを入れます。

 

###プラグインAPI

 

プラグインでグローバル変数を公開しないでください。<br>

新しいクラスがある場合は、それを直接 `L`名前空間(` L.MyPlugin`)に配置します。<br>

既存のクラスの1つを継承する場合は、それをサブプロパティ( `L.TileLayer.Banana`)にします。<br>

すべてのクラスは、キャメルケースにファクトリ関数を持っている必要があります(例: `L.tileLayer.banana`)。<br>

既存のLeafletクラスに新しいメソッドを追加する場合は、 `L.Marker.include({myPlugin:…})`のように行うことができます。

 

関数、メソッド、プロパティ、およびファクトリ名は `camelCase`に含める必要があります。<br>

クラス名は `CapitalizedCamelCase`である必要があります。

 

関数に多くの引数がある場合は、代わりにオプションオブジェクトを受け入れることを検討してください

(ユーザーがすべてを指定する必要がないように、可能な場合はデフォルト値を設定します):

 

`` `js

//悪い

marker.myPlugin( 'bla'、 'foo'、null、{}、5、0);

 

 // 良い

marker.myPlugin( 'bla'、{

  optionOne: 'foo'、

  optionThree:5

});

`` `

 

そして最も重要なことは、それをシンプルに保つことです。リーフレットは*シンプルさ*がすべてです。

 

## NPMでの公開

 

NPM(Node Packaged Modules)は、JavaScriptのパッケージマネージャーおよびコードリポジトリです。モジュールをNPMに公開すると、他の開発者がプラグインやそれに依存する他のプラグインをすばやく見つけてインストールできます。

 

NPMには、プロセス全体を支援する優れた[開発者ガイド](https://docs.npmjs.com/using-npm/developers.html)があります。

 

プラグインを公開するときは、 `leaflet`への依存関係を` package.json`ファイルに追加する必要があります。これにより、パッケージのインストール時にLeafletが自動的にインストールされます。

 

これは、Leafletプラグインの `package.json`ファイルの例です。

 

`` `json

{{

  "名前": "my-leaflet-plugin"、

  「バージョン」:「1.0.0」、

  「説明」:「シンプルなリーフレットプラグイン」、

  "main": "my-plugin.js"、

  「作者」:「あなた」、

  「ライセンス」:「IST」、

  "peerDependencies":{

    「リーフレット」:「^ 1.0.0」

  }

}

`` `

 

可能であれば、縮小したファイル( `dist`など)をリポジトリにコミットしないでください。これはできます

間違ったファイルをデバッグしようとすると混乱を招きます。代わりに、 `npm`を使用して

パッケージを公開する直前にビルド/ミニファイをトリガーします

[`prepublish`スクリプト](https://docs.npmjs.com/misc/scripts#common-uses)、例:

 

`` `json

{{

  "名前": "my-leaflet-plugin"、

  ..。

  「スクリプト」:{

    「prepublish」:「gruntbuild」

  }

}

`` `

 

その後、[`。gitignore`](https://help.github.com/articles/ignoring-files/)を使用できます。

縮小されたファイルがバージョン管理されていないことを確認するためのファイル、および

[空の `.npmignore`](https://docs.npmjs.com/misc/developers#keeping-files-out-of-your-package)

それらがNPMに公開されていることを確認します。

 

##モジュールローダー

 

[RequireJS](http://requirejs.org/)や[Browserify](http://browserify.org/)などのモジュールローダーは、AMD(非同期モジュール定義)やCommonJSなどのモジュールシステムを実装して、開発者がモジュール化してロードできるようにします彼らのコード。

 

[Universal Module Definition](https://github.com/umdjs/umd/blob/master/templates/returnExportsGlobal.js)に基づいてこのパターンに従うことで、AMD / CommonJSローダーのサポートをLeafletプラグインに追加できます。

 

`` `js

(関数(ファクトリ、ウィンドウ){

 

    //「リーフレット」に依存するAMDモジュールを定義します

    if(typeof define === 'function' && define.amd){

        define(['leaflet']、factory);

 

    // 'leaflet'に依存するCommonJSモジュールを定義します

    } else if(typeof exports === 'object'){

        module.exports = factory(require( 'leaflet'));

    }

 

    //プラグインをグローバルな「L」変数にアタッチします

    if(typeof window!== 'undefined' && window.L){

        window.L.YourPlugin = factory(L);

    }

}(関数(L){

    var MyLeafletPlugin = {};

    //プラグインを実装します

 

    //完了したらプラグインを返します

    MyLeafletPluginを返します。

}、 窓));

`` `

 

これで、プラグインはAMDおよびCommonJSモジュールとして使用可能になり、BrowserifyやRequireJSなどのモジュールローダーで使用できます。


 

##プラグインリストへの追加

 

プラグインが公開されたら、[Leafletプラグインリスト](http://leafletjs.com/plugins.html)に追加することをお勧めします。そうするには:

 

* [フォーク](https://help.github.com/articles/fork-a-repo/)リーフレットリポジトリ。

* `docs / plugins.md`ファイルで、プラグインを配置するセクションを見つけ、プラグインに関する情報とリンクを含むテーブル行を追加します。

*コードをフォークにコミットします。

* [プルリクエストを開く](https://help.github.com/articles/creating-a-pull-request/)フォークからLeafletの元のリポジトリへ。

 

プルリクエストが完了すると、リーフレットのメンテナがあなたの

プラグインと、すべてが正しく見える場合は、プラグインがその後すぐにリストに表示されます。

 

 

おすすめ

転載: blog.csdn.net/nmj2008/article/details/115295764