2018年11月30日金曜日

ol5.3ex 0 - Examples のテストの準備
examples 用のディレクトリを作成し、そこに移動します。

user@deb9-vmw:~$ mkdir ol5-examples01 &&  cd ol5-examples01

このプロジェクトを初期化し、問い合わせに回答します。

user@deb9-vmw:~/ol5-examples01$  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 ` afterwards to install a package and
save it as a dependency in the package.json file.

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


Is this OK? (yes) yes

OpenLayers をインストールします。

user@deb9-vmw:~/ol5-examples01$ npm install ol
npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN ol5-examples01@1.0.0 No repository field.

+ ol@5.3.0
added 8 packages from 6 contributors and audited 8 packages in 4.063s
found 0 vulnerabilities

開発環境としてビルドツールの parcel をインストールします。

user@deb9-vmw:~/ol5-examples01$ npm install --save-dev parcel-bundler
npm WARN deprecated browserslist@1.7.7: Browserslist 2 could fail on reading Browserslist >3.0 config used in other tools.

> deasync@0.1.13 install /home/user/ol5-examples01/node_modules/deasync
> node ./build.js

`linux-x64-node-8` exists; testing
Binary is fine; exiting

> parcel-bundler@1.10.3 postinstall /home/user/ol5-examples01/node_modules/parcel-bundler
> node -e "console.log('\u001b[35m\u001b[1mLove Parcel? You can now donate to our open collective:\u001b[22m\u001b[39m\n > \u001b[34mhttps://opencollective.com/parcel/donate\u001b[0m')"

Love Parcel? You can now donate to our open collective:
 > https://opencollective.com/parcel/donate
npm WARN ol5-examples01@1.0.0 No repository field.
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: fsevents@1.2.4 (node_modules/fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for fsevents@1.2.4: wanted {"os":"darwin","arch":"any"} (current: {"os":"linux","arch":"x64"})

+ parcel-bundler@1.10.3
added 735 packages from 575 contributors and audited 7635 packages in 42.851s
found 0 vulnerabilities

テストのために、次の内容で index.js と index.html を作成します。

user@deb9-vmw:~/new-project$ vim index.js
import 'ol/ol.css';
import {Map, View} from 'ol';
import TileLayer from 'ol/layer/Tile';
import OSM from 'ol/source/OSM';

const map = new Map({
 target: 'map',
 layers: [
  new TileLayer({
   source: new OSM()
  })
 ],
 view: new View({
  center: [0, 0],
  zoom: 0
 })
});

user@deb9-vmw:~/new-project$ vim index.html 
<!doctype html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Using Parcel with OpenLayers</title>
  <style>
   #map {
    width: 400px;
    height: 250px;
   }
  </style>
 </head>
 <body>
  <div id="map"></div>
  <script src="./index.js"></script>
 <body>
</html>
package.json の script セクションに次のように追加します。

user@deb9-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": "parcel index.html",
    "build": "parcel build --public-url . index.html"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "ol": "^5.1.3"
  },
    "parcel-bundler": "^1.9.7"
  }
}
npm start を実行します。

user@deb9-vmw:~/new-project$ npm start
> new-project@1.0.0 start /home/user/ol5-examples01

> parcel index.html


Server running at http://localhost:1234

✨  Built in 16.23s.

Webブラウザのアドレス欄に

http://localhost/:1234

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


投稿者 時刻:

0 件のコメント:

コメントを投稿

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