2017年5月16日火曜日

OpenLayers4 Tutorials - 4 Bundle Application and OpenLayers using Browserify

● Bundle Application and OpenLayers using Browserify
（http://openlayers.org/en/latest/doc/tutorials/browserify.html）
Browserify を使用するアプリケーションとOpenLayers のバンドル

はじめに

既存の例を変更するよりも、OpenLayers　のような外部依存関係と一緒に依存関係管理を使って独自のコードを設定する方法を探しているかもしれません。

このチュートリアルは、最も基本的なニーズの NPM と Browserify を使用して提案されたプロジェクトの設定として役立ちます。他にもいくつかのオプションがあり、特に OpenLayers と一緒に独自のコードをコンパイルすることに興味があるかもしれません。


最初の手順

プロジェクト用に新しい空のディレクトリを作成し、mkdir new-project && cd new-project を実行して、そのディレクトリに移動します。npm init を使用してプロジェクトを初期化し、質問に回答します。

この時点で、npm install -save-dev openlayers browserify watchify uglify-js　を実行することによって、必要な依存関係を追加するよう NPM に依頼できます。Watchify と Uglify は、変更を監視し、縮小版バンドルにビルドするために使用されます。

■□ Debian8 で試します■□
/home/user/public_html に new-project ディレクトリを作成し移動します。

user@deb8-vmw:~$ cd public_html/
user@deb8-vmw:~/public_html$ mkdir new-project && cd new-project

プロジェクトディレクトリ new-project の依存関係を管理するために、npm init で package.json を作成します。

user@deb8-vmw:~/public_html/new-project$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install --save` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
name: (new-project) browserify_demo
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author: user
license: (ISC)
About to write to /home/nob61/public_html/new-project/package.json:
{
  "name": "browserify_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "user",
  "license": "ISC"
}

Is this ok? (yes)

npm install -save-dev openlayers browserify watchify uglify-js を実行します。

user@deb8-vmw:~/public_html/new-project$ npm install -save-dev openlayers browserify watchify uglify-js

■□ここまで■□


アプリケーション コードと index.html

index.js にアプリケーション コードを配置します。ここに単純な出発点があります。

var ol = require('openlayers');

var map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 0
 })
});
バンドルを使用する ìndex.html ファイルが必要です。ここには簡単な例があります。
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Browserify with OpenLayers</title>
  <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css" type="text/css">
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="bundle.js"></script>
 <body>
</html>
■□ Debian8 で試します■□
次の内容で index.js を作成します。

user@deb8-vmw:~/public_html/new-project$ vim index.js
var ol = require('openlayers');

var map = new ol.Map({
 target: 'map',
 layers: [
  new ol.layer.Tile({
   source: new ol.source.OSM()
  })
 ],
 view: new ol.View({
  center: [0, 0],
  zoom: 0
 })
});
次の内容で index.html を作成します。

user@deb8-vmw:~/public_html/new-project$ vim index.html
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Browserify with OpenLayers</title>
  <link rel="stylesheet" href="node_modules/openlayers/dist/ol.css" type="text/css">
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="bundle.js"></script>
 <body>
</html>
■□ここまで■□


バンドルの作成

単純なスクリプトで、npm run build と npm start コマンドを導入して、手動でバンドルのビルドと変更の監視を、それぞれ、開始することができます。package.json の script[スクリプト]セクションに次のものを追加します。

"scripts": {
 "start": "watchify index.js --outfile bundle.js",
 "build": "browserify index.js | uglifyjs --compress --output bundle.js"
}

bundle.js は、アプリケーションコードとアプリケーションで使用されるすべての依存関係、この場合は OpenLayers の公式のフルビルド、を含むことに注意してください。OpenLayers のパーツが必要なだけなら、カスタムビルドを作成することができます。

■□ Debian8 で試します■□
package.json に script セクションを次のように追加します。

user@deb8-vmw:~/public_html/new-project$ vim package.json 
{
  "name": "browserify_demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "watchify index.js --outfile bundle.js",
    "build": "browserify index.js | uglifyjs --compress --output bundle.js"
  },
  "author": "user",
  "license": "ISC",
  "devDependencies": {
    "browserify": "^14.3.0",
    "openlayers": "^4.1.1",
    "uglify-js": "^3.0.1",
    "watchify": "^3.9.0"
  }
}
npm run build と npm start を実行します。

user@deb8-vmw:~/public_html/new-project$ npm run build

> browserify_demo@1.0.0 build /home/nob61/public_html/new-project
> browserify index.js | uglifyjs --compress --output bundle.js

user@deb8-vmw:~/public_html/new-project$ npm start

> browserify_demo@1.0.0 start /home/nob61/public_html/new-project
> watchify index.js --outfile bundle.js
Webブラウザのアドレス欄に

http://localhost/~user/new-project/

と入力して Enter キーを押します。


boundl.js に OpenLayers の公式のフルビルドと index.js がバンドルされました。
index.js を編集（例えば、"zoom: 1" に修正）して index.html を再読込するとマップが拡大されます。


■□ここまで■□
投稿者 時刻:
ラベル: , ,

0 件のコメント:

コメントを投稿

登録: コメントの投稿 (Atom)