バンドル HERE Maps API for Javascript

このセクションでは、 Webpack や Rollup などの一般的な複数のバンドルを使用して HERE Maps API for Javascript をバンドルする方法を示します。 以下のセクションでは、選択した Bundler の出力を生成する簡単なボイラープレートコードについて説明します。

はじめに

NPM で HERE Maps API for Javascript を使用できるようにする には、 HERE パブリックリポジトリを NPM 設定に追加する必要があります。

npm config set @here:registry https://repo.platform.here.com/artifactory/api/npm/maps-api-for-javascript/

1. node.js と npm がインストールされていると仮定して、プロジェクトを含むディレクトリを作成し、コンソールから次のコマンドを実行します。

    npm init
   

   次 package.json のようなファイルが作成されます。

    {
    "name": "bundling-test",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "author": "",
    "license": "ISC"
    }
   

2. HERE Maps API for Javascript ライブラリに依存関係を追加します。

    npm install @here/maps-api-for-javascript --save
   

ロールアップ

1. ロールアップおよびロールアップモジュール解決プラグインに開発の依存関係をプロジェクトに追加します。

    npm install rollup @rollup/plugin-node-resolve --save-dev
   

2. 次 rollup.config.js の構成で、プロジェクトのルートディレクトリにロールアップ構成ファイルを作成します。

        import resolve from '@rollup/plugin-node-resolve';
   
        export default {
        input: 'index.js',
        output: {
            dir: './out/',
            format: 'iife'
        },
        // Disable "Use of Eval" Warning
        // The HERE Maps API for JavaScript uses 'eval' to evaluate
        // filter functions in the YAML Configuration for the Vector Tiles
        onwarn: function (message) {
            if (/mapsjs.bundle.js/.test(message) && /Use of eval/.test(message)) return;
            console.error(message);
        },
        plugins: [resolve()]
        };
   

   上記の設定では、バンドルされているスクリプトの入力ソースおよび出力ディレクトリ、および出力形式を定義します。

3. ロールアップがローカルにインストールされました。 bundleターゲットを追加して、package.jsonのセクションscriptを更新してください。

    "bundle": "rollup --config rollup.config.js"
   

4. index.js ロールアップのエントリポイントとなるファイルを作成します。

   
        import H from '@here/maps-api-for-javascript';
   
        // Initialize the platform object:
        var platform = new H.service.Platform({
        'apikey': '{YOUR_API_KEY}'
        });
   
        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();
   
        // Instantiate (and display) a map object:
        var map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.vector.normal.map,
        {
            zoom: 10,
            center: { lng: 13.4, lat: 52.51 }
        });
   

   上記のコードは 、「クイックスタート 」の章の手順を繰り返しています。

Webpack

1. 開発の依存関係を WebPack に追加します

    npm install webpack webpack-cli  --save-dev
   

2. 次の設定で、プロジェクトのルートディレクトリに webpack 設定ファイルを作成します。

        const path = require('path');
        const TerserPlugin = require('terser-webpack-plugin');
   
        module.exports = {
            node: { global: false },
            mode: 'production',
            entry: {
                index: './index.js'
            },
            output: {
                publicPath: './out/',
                path: path.resolve(__dirname, 'out'),
                filename: '[name].js',
                chunkFilename: '[name].bundle.js'
            },
            optimization: {
                minimizer: [new TerserPlugin({
                chunkFilter: (chunk) => {
                    // Exclude mapsjs chunk from the minification as it is already minified
                    if (/mapsjs/.test(chunk.name)) return false;
                    return true;
                }
                })],
            }
        };
   

   上記の設定では、は mapsjs.bundle.js 縮小処理から明示的に除外されます。 二重化による悪影響を防ぐには、この点が重要です。 エントリモジュール自体が HERE Maps API for Javascript を遅延読み込み、ウェブパックのコード分割を利用します。

3. webpack のローカルインストールで、bundle ターゲットを追加してpackage.jsonのscriptセクションを更新します。

    "bundle": "webpack"
   

4. index.js Bundler のエントリポイントとなるファイルを作成します。

    import(/* webpackChunkName: "mapsjs" */ '@here/maps-api-for-javascript').then(
    ({ default: H }) => {
        var platform = new H.service.Platform({
        'apikey': '{YOUR_API_KEY}'
        });
   
        // Obtain the default map types from the platform object
        var maptypes = platform.createDefaultLayers();
   
        // Instantiate (and display) a map object:
        var map = new H.Map(
        document.getElementById('mapContainer'),
        maptypes.vector.normal.map,
        {
            zoom: 10,
            center: { lng: 13.4, lat: 52.51 }
        });
    }
    ).catch(error => console.log(error));
   

   上記のコードでは、ダイナミックを使用して importsいます。ダイナミックコード分割は、 WebPack で推奨される方法です。 ファンクションの本体は 変更されません。

Bundler を実行しています

1. プロジェクトのルートディレクトリに index.html 、アプリケーションのエントリポイントとなるファイルを作成します。

    <html>
    <head>
        <meta name="viewport" content="initial-scale=1.0, width=device-width" />
        <style>
        #map {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        </style>
    </head>
    <body>
        <div id="mapContainer"></div>
        <script src="./out/index.js"></script>
    </body>
    </html>
   

2. コンソールから次のコマンドを実行します。

    npm run bundle
   

   これ out により、バンドルされたビルドが作成され、ディレクトリに配置されます。 index.html ブラウザからページにアクセスすると、次の結果が表示されます。