How to build mapbox-gl-js stand-alone on Windows

実質作業メモ。Windowsでの話です。

追記

ビルド作業が初めてではない（下記本編の内容を実施済み等）場合、ツール群のインストールは不要なため、下記手順のみ行う。

1. cmd開いて cd mapbox-gl-js （ディレクトリ移動）して
2. SET MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} して
3. yarn install して（必要なら）
4. ファイル生成
   yarn run build-prod-min　→　dist/mapbox-gl.js
yarn run build-css　→　dist/mapbox-gl.css

本編

下記のページに手順が書いてあるので実施していきます。

mapbox-gl-js/CONTRIBUTING.md at master · mapbox/mapbox-gl-js · GitHub

必要なツール群をインストール

Install git, node.js (version 4 or greater), yarn, npm and node-gyp.

と書いてあるので、それぞれインストールしていきましょう。

git

もう入ってた。

node.js

ダウンロード | Node.js からWindows用のインストーラーをDLして実行して終わり。

Yarn 

Installation | Yarn からWindows用のStable(安定版) ver.のインストーラーをDLして実行して終わり。

npm and node-gyp.

nodejs-guidelines/windows-environment.md at master · microsoft/nodejs-guidelines · GitHub に詳しい。

1. Windows PowerShell を管理者権限で起動
2. npm install -g windows-build-tools を実行し、
   windows-build-tools をインストール
   ※トラブルシューティング情報も上記ページに記載あり
3. Visual Studio Build Tools あるいは Visual Studio 2017 Community より、Visual C++ ビルド環境をインストール
4. https://www.python.org/downloads/ よりPython2.7をインストール
5. npm config set python python2.7 を実行
6. npm config set msvs_version 2017 を実行

リポジトリをクローンする

git clone git@github.com:mapbox/mapbox-gl-js.git とコマンドを打ってもいいし、適当なGitHubクライアントでCloneしてもいい。

※特定のバージョンや安定版がほしい場合は、下記ページからzip等でファイルを取得する。
https://github.com/mapbox/mapbox-gl-js/releases

node moduleの依存関係をインストールする

1. cd mapbox-gl-js （ディレクトリ移動）して
2. yarn install を実行してインストール

warning "@mapbox/dr-ui > @mapbox/mapbox-gl-supported@1.4.1" has unmet peer dependency "mapbox-gl@>=0.32.1 <2.0.0". とかみたいなエラーが出たら、cmdを閉じて開き直してインストールコマンドを再実行すると多分解決する。

headless-gl の依存関係をインストールする

依存関係は下記。　 https://github.com/stackgl/headless-gl#windows

• Python 2.7
  ※ 先ほどの手順でインストール済
• Microsoft Visual Studio
  ※ Visual C++ ビルド環境がほしいだけなので先程の手順でインストール済
• d3dcompiler_47.dll
  ※ c:\windows\system32に入っているのでOK
• ES6　（モダンnode.js向け。オプション）
  ※ オプションなので多分不要

最終的にやりたいことは下記コマンドの通り。
copy node_modules/headless-gl/deps/windows/dll/x64/*.dll c:\windows\system32

headless-glをクローンする

stackgl/headless-gl: 🎃 Windowless WebGL for node.js をクローンする。

※特定のバージョンや安定版がほしい場合は、下記ページからzip等でファイルを取得する。
https://github.com/stackgl/headless-gl/releases

dllファイルをコピー

headless-gl\deps\windows\dll\x64\以下のdllファイルをc:\windows\system32 にコピーする。

ビルドに使うデバッグサーバの用意

mapboxアクセストークンの取得

1. Mapbox のアカウントを作成
2. Account | Mapbox > Tokens > Create a token からアクセストークンを作成
3. Tokens にて、作成したトークンをコピー

デバッグサーバ起動確認

1. cmdを起動して cd mapbox-gl-js （ディレクトリ移動） して
2. SET MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN} を実行
   ※ここでSETした環境変数は、このセッションでのみ有効。cmdを終了すると消去される。
3. yarn run start-debug を実行

デバッグサーバ http://localhost:9966/debug にアクセスできることを確認する。

スタンドアロンビルドを作成

以下のコマンドを実行する。
yarn run build-prod-min
yarn run build-css

dist/mapbox-gl.js と dist/mapbox-gl.css が生成されるので確認する。
HTMLではこの2つのファイルを読み込んで利用する。

余談

yarn run build-prod-min 実行時の出力が下記である。
なにやら警告？エラー？がいっぱい出ている。

mapbox-gl-js>yarn run build-prod-min
yarn run v1.19.0
$ rollup -c --environment BUILD:production,MINIFY:true

src/index.js, src/source/worker.js → rollup/build/mapboxgl...
(!) Circular dependency: src\util\ajax.js -> src\util\mapbox.js -> src\util\ajax.js
(!) Circular dependency: src\style-spec\expression\parsing_context.js -> src\style-spec\expression\compound_expression.js -> src\style-spec\expression\parsing_context.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_function.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_function.js -> src\style-spec\validate\validate_object.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_function.js -> src\style-spec\validate\validate_array.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_layer.js -> src\style-spec\validate\validate_paint_property.js -> src\style-spec\validate\validate_property.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_layer.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style-spec\validate\validate.js -> src\style-spec\validate\validate_light.js -> src\style-spec\validate\validate.js
(!) Circular dependency: src\style\style_layer\symbol_style_layer.js -> src\data\bucket\symbol_bucket.js -> src\style\style_layer\symbol_style_layer.js
(!) Circular dependency: src\geo\lng_lat.js -> src\geo\lng_lat_bounds.js -> src\geo\lng_lat.js
(!) Circular dependency: src\source\tile.js -> src\data\feature_index.js -> src\source\source_state.js -> src\source\tile.js
(!) Circular dependency: src\index.js -> src\ui\map.js -> src\style\style.js -> src\util\global_worker_pool.js -> src\util\worker_pool.js -> src\util\browser\web_worker.js -> src\index.js
created rollup/build/mapboxgl in 11.7s

rollup/mapboxgl.js → dist/mapbox-gl.js...
created dist/mapbox-gl.js in 2s
Done in 14.43s.

「Circular dependency」って何？？
直訳すると「循環依存」 となるのでやんわりと察した。
AがBに依存し、BはAに依存しているのでウロボロスって話。

警告は出ているけど mapbox-gl.js は生成されているし、HTML側で読み込んでも（おそらく）正常に動いている（ように見える）。

とりあえず様子見。