実質作業メモ。Windowsでの話です。
追記
ビルド作業が初めてではない(下記本編の内容を実施済み等)場合、ツール群のインストールは不要なため、下記手順のみ行う。
- cmd開いて
cd mapbox-gl-js
(ディレクトリ移動)して SET MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN}
してyarn install
して(必要なら)- ファイル生成
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 に詳しい。
- Windows PowerShell を管理者権限で起動
npm install -g windows-build-tools
を実行し、
windows-build-tools をインストール
※トラブルシューティング情報も上記ページに記載あり- Visual Studio Build Tools あるいは Visual Studio 2017 Community より、Visual C++ ビルド環境をインストール
- https://www.python.org/downloads/ よりPython2.7をインストール
npm config set python python2.7
を実行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の依存関係をインストールする
cd mapbox-gl-js
(ディレクトリ移動)して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アクセストークンの取得
- Mapbox のアカウントを作成
- Account | Mapbox > Tokens > Create a token からアクセストークンを作成
- Tokens にて、作成したトークンをコピー
デバッグサーバ起動確認
- cmdを起動して
cd mapbox-gl-js
(ディレクトリ移動) して SET MAPBOX_ACCESS_TOKEN={YOUR MAPBOX ACCESS TOKEN}
を実行
※ここでSETした環境変数は、このセッションでのみ有効。cmdを終了すると消去される。 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側で読み込んでも(おそらく)正常に動いている(ように見える)。
とりあえず様子見。