update plugin guide with module loader info

This commit is contained in:
Patrick Arlt 2014-10-13 10:47:18 -07:00
parent 3ded683817
commit cb551891bd

View File

@ -15,6 +15,13 @@ This guide lists a number of best practices for publishing a Leaflet plugin that
- [File Structure](#file-structure) - [File Structure](#file-structure)
- [Code Conventions](#code-conventions) - [Code Conventions](#code-conventions)
- [Plugin API](#plugin-api) - [Plugin API](#plugin-api)
3. [Module Loaders](#module-loaders)
- [Wrapping with UMD](#wrapping-with-umd)
- [Using with RequireJS](#using-with-requirejs)
- [Using with Browserify](#using-with-browserify)
- [Best practices for RequireJS](#best-practices-for-requirejs)
- [Best practices for Browserify](#best-practices-for-browserify)
- [Module Loader Resources](#module-loader-resources)
## Presentation ## Presentation
@ -125,3 +132,115 @@ marker.myPlugin('bla', {
``` ```
And most importantly, keep it simple. Leaflet is all about *simplicity*. And most importantly, keep it simple. Leaflet is all about *simplicity*.
## Module Loaders
Module loaders such as [RequireJS](http://requirejs.org/) and [Browserify](http://browserify.org/) impliment module systems like AMD (Asyncronous Module Definition) and CommonJS to allow developers to modularize and load their code.
Leaflet supports being loaded as either an AMD module or a CommonJS module. It does this by implimenting UMD (Universal Module Definition) which checks for the existance of an AMD/CommonJS and impliments the appropriate wrappers.
### Wrapping with UMD
You can add support for AMD/CommonJS loaders to your Leaflet plugin by follwoing this pattern.
```js
(function (factory, window) {
// define an AMD module that relies on 'leaflet'
if (typeof define === 'function' && define.amd) {
define(['leaflet'], function (L) {
return (exports = factory(L));
});
// define a Common JS module that relies on 'leaflet'
} else if (typeof exports === 'object') {
module.exports = factory(require('leaflet'));
}
// attach your plugin to the global 'L' variable
window.L.YourPlugin = factory(L);
}(function (L) {
// impliment your plguin
var MyLeafletPlugin = {};
MyLeafeltPlugin.CustomLayer = L.Layer.extend({
onAdd: function(map){
},
onRemove: function(){
}
});
// return your plugin when you are done
return MyLeafletPlugin;
}, window));
```
### Using with RequireJS
Now users using RequireJS (which impliments the AMD module system) can use your plugin like this.
```js
// define where the 'leaflet' and 'your-plugin' modules are located
require.config({
paths: {
'leaflet': 'the/path/to/leaflet', //path to leaflet.js without the .js
'your-plugin': 'the/path/to/your-plugin', //path to your-plguin.js without the .js
}
});
require([
'leaflet',
'your-plugin'
], function(L, YourPlugin) {
var map = new L.map('map').setView([45.5, -122.75], 9);
var layer = new YourPlugin.CustomLayer().addTo(map);
});
```
### Using with Browserify
Users who are using Browserify (which impliments the CommonJS module system) can use your plugins following this example.
```js
var L = require('leaflet');
var YourPlugin = require('your-plugin');
var map = new L.map('map').setView([45.5, -122.75], 9);
var layer = new YourPlugin.CustomLayer().addTo(map);
```
### Best practices for RequireJS
Most AMD based module systesm (RequireJS, Dojo, ect...) have a mechanisum to name modules so they can be easily included with short strings rather then paths. In order to avoid confusion with many short names like `Leaflet` vs `leaflet` always use a lowercase `leaflet` for your module identifier.
### Best practices for Browserify
CommonJS module systems like Browserify rely on the [NPM (Node Package Modules)](https://www.npmjs.org/) registry to manage their dependencies. The means that when you `require('leaflet')` the proper module from the registry is returned to you.
This means that you must publish your plugin to the NPM repository. NPM has an excellent [developers guide](https://www.npmjs.org/doc/misc/npm-developers.html) to help you through the process.
When you publish your plugin you should add a depenency on `leaflet` to your `package.json` file. This will automatically install Leaflet when your package is installed.
```json
{
"name": "my-leaflet-plugin",
"version": "1.0.0",
"description": "A simple leaflet plugin.",
"main": "my-plugin.js",
"author": "You",
"license": "IST",
"dependencies": {
"leaflet": "^1.0.0"
}
}
```
### Resources
* [Get started with RequireJS](http://requirejs.org/docs/start.html#add)
* [Get started Browserify](https://github.com/substack/browserify-handbook)
* [Publishing on NPM](https://www.npmjs.org/doc/misc/npm-developers.html)