yarnでleafletを取得し、Webpackでbuildして、表示するまで。

少しバタバタしてしまったのもあるので、約2ヶ月ぶりのブログです… まぁ、定期的に書くというよりも、動作確認とかした内容とかをメモしていくブログだから定期的な必要はないんだけど、まとめてる余裕もなかったのです。

っで、本題です。内容的には前回とあまり変わらないです。今回は、yarnでleaflet.jsを取得し、buildして表示するまでの手順です。

動作環境

node -v 
v8.0.0

webpack -v
3.0.0

2ヶ月の間に、各ツールがそれぞれメジャーアップデートしてしまいましたｗ

動作手順

yarnの初期化と各ライブラリの取得 leaflet と webpack を取得してきます。

yarn init -y

yarn add leaflet
yarn add webpack

yarn

leafletの初期処理の実装 app/index.js

var L = require('leaflet');

var mymap = L.map('mapid').setView([35.68, 139.76], 13);

L.tileLayer('タイルサーバのURL', {
    maxZoom: 18
}).addTo(mymap);

leafletを使い慣れてる方ですと見慣れたコードだと思いますが、1行目だけ普段と違います。

var L = require('leaflet');

yarnで取得してきたleaflet.jsを、ここで読み込んでます。

package.jsonにbuildの設定を記述する。

 "scripts": {
    "build": "webpack app/index.js dist/bundle.js"
  }

buildの実行

npm run build

dist/bundle.js というleafletを含んだ1つのJSファイルが出力されている。

表示の確認

buildして作成されたjsで正しく、Mapが表示されるかの確認です

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
   integrity="sha512-07I2e+7D8p6he1SIM+1twR5TIrhUQn9+I6yjqD53JQjFiMf8EtC93ty0/5vJTZGF8aAocvHYNEDJajGdNx1IsQ=="
   crossorigin=""/>
  <style>
    #mapid { height: 500px; width: 100%; margin:0 }
  </style>
</head>
<body>
  <div id="mapid"></div>
  <script src="dist/bundle.js"></script>
</body>
</html>

f:id:hinosita:20170622105811p:plain

CDNやleaflet.jsのソースをHTML側で読み込む時と同様にMapがちゃんと表示できてるのが確認できます。

結論

yarnでJavaScriptのライブラリを管理することで、バージョン管理が楽になったり、表示の際にリクエスト数が減るというメリットはあるかと思います。ただ、変更するたびにbuildを行わないといけないのは手間なのですが、そのあたりもwebpack-serverとか、変更チェックのツールなどを導入すればたいして手間にならないかと。

今回のサンプルのソースは、githubに置いておきます。

github.com