はじめに
今回はWebpackを使ってCesium.jsの環境を構築する手順について説明します。基本的には公式ドキュメントの内容をまとめたものですが、最新のWebpackに対応するためにいくつか変更点があります。
以下の説明では、あらかじめNode.jsがインストールされているものとします。
プロジェクト作成
とりあえずNode.jsのプロジェクトを作成します。
$ mkdir cesium_wp
$ cd cesium_wp
$ npm init --yes
プロジェクトを作成したら、必要なパッケージをインストールします。
$ npm install --save-dev webpack webpack-cli style-loader css-loader url-loader html-webpack-plugin webpack-dev-server copy-webpack-plugin
$ npm install --save-dev cesium
必要なファイルの作成、編集
以下に、プロジェクトに必要なファイルの作成と編集について説明します。
package.json
scriptsエントリに以下のようにコマンドを追加します。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
/* 以下の2行を追加 */
"build": "webpack --config webpack.config.js",
"start": "webpack-dev-server --config webpack.config.js --open"
},
webpack.config.js
最もややこしいところです。詳細な説明は公式ドキュメントやWebpackのドキュメントを参照してください（ただし、公式ドキュメントは一部最新のWebpackに対応していません）。webpack.config.jsというファイルをプロジェクトのルートディレクトリに作成し、以下の内容を記述します。
const path = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
// Cesiumソースコードへのパスを変数に格納
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
const CopywebpackPlugin = require('copy-webpack-plugin');
module.exports = {
context: __dirname,
entry: {
// 本記事ではエントリポイントはsrc/main.jsとする
app: './src/main.js'
},
// dist以下にビルド結果を出力
output: {
filename: '[name].js',
path: path.resolve(__dirname, 'dist'),
},
amd: {
// Webpack用に、require.toUrl()を無効化する
toUrlUndefined: true
},
resolve: {
alias: {
cesium: path.resolve(__dirname, cesiumSource),
},
fallback: {
// 以下のモジュールを無効にする
fs: false,
path: false,
zlib: false
}
},
module: {
// cssと画像やjsonなどのファイルのローダーの処理を定義
rules: [
{
test: /\.css$/,
use: ['style-loader', 'css-loader']
},
{
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ['url-loader']
},
// ES6スタイルにする場合は以下のブロックを追加
{
test: /\.m?js$/,
exclude: /node_modules/,
type: 'javascript/auto',
resolve: {
fullySpecified: false
}
}
]
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
// 必要なCesiumのファイルを出力先にコピー
new CopywebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: 'Workers' },
{ from: path.join(cesiumSource, 'Assets'), to: 'Assets' },
{ from: path.join(cesiumSource, 'Widgets'), to: 'Widgets' }
]
}),
new webpack.DefinePlugin({
// 静的ファイルをロードするためのベースURLを環境変数で指定
CESIUM_BASE_URL: JSON.stringify('')
})
],
// とりあえず開発モード
mode: "development",
// webpack-dev-serverが静的ファイルを配信するディレクトリを指定
devServer: {
static: {
directory: path.join(__dirname, 'dist')
}
}
};
ソースファイルを作成
ここではsrcというディレクトリを作成して、その中にmain.js、index.html、style.cssという3つのファイルを作るものとします。
以下に、各ファイルの記述内容を示します。
index.html
とくに注意するところはありませんが、コンテナのIDはこのあとのmain.jsで使用するものに合わせてください。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>Cesium WP</title>
</head>
<body>
<div id="cesiumContainer"></div>
</body>
</html>
style.css
こちらもとくに注意するところはありません。
html,
body,
#cesiumContainer {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
overflow: hidden;
}
main.js
ES6スタイルの場合のコードの例を示します。
import * as Cesium from 'cesium/Cesium';
import './style.css';
import 'cesium/Widgets/widgets.css';
async function initializeCesium() {
// この関数内にSandcastleのコードを貼り付ける
const viewer = new Cesium.Viewer('cesiumContainer', {
terrain: Cesium.Terrain.fromWorldTerrain(),
});
viewer.scene.globe.depthTestAgainstTerrain = true;
}
initializeCesium();
実行、ビルド
以上で準備完了です。以下のコマンドで実行してみましょう。
$ npm start
問題がなければブラウザが起動し、以下のように表示されれば成功です。
また、ビルドを行うには以下のコマンドを実行します。
$ npm run build
上記のwebpack.config.jsで指定したとおり、distというディレクトリが作成され、ファイル一式が作成されます。