1

知りたいこと

rollup.jsで、bundle(?)したJSが、HTML側の<script>タグから読み込めるものと読み込めないものがある理由と、その解決方法。

環境

  • rollup.js v1.25.2
  • yarn 1.10.0
  • windows10

やっていること

leafletを使いたいと思っております。
leaflet本体はbundleされたJSファイルを<script>タグで呼び出せば使えますが、
leafletのプラグインは呼び出すことができません。

設定ファイルを以下に記載します。


rollup.config.js

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';
import postcss from 'rollup-plugin-postcss';
import cssnext from 'postcss-cssnext';                      // CSSを最新の記法に変換をかけるプラグイン

export default {
    // コンパイル対象JSファイル
    input: './resources/js/app.js',

    // コンパイル済みJSファイルの書き出し先
    output: {
        format: 'iife',
        file: './public/js/bundle.js',
    },

    // コンパイルに利用するオプションと外部プラグイン
    plugins: [
        nodeResolve({jsnext: true}), // npmモジュールを`node_modules`から読み込む
        commonjs(), // CommonJSモジュールをES6に変換
        babel(), // ES5に変換

        // CSSのコンパイルと書き出し先を指定
        postcss({
            extensions: ['.css', '.sss'],
            extract: './public/css/main.css',
            plugins: [
                cssnext({
                    calc: false,
                    rem: false,
                }),
            ],
        }),
    ]
}

app.js

import 'leaflet'
import 'leaflet-geosearch'
import 'leaflet/dist/leaflet.css';

HTML

<!-- JSとCSSの読み込み -->
<link rel="stylesheet" href="/css/main.css">
<script src="/js/bundle.js"></script>

<!-- MAP表示エリア -->
<div id="map" style="height: 450px;"></div>

<!-- leafletjsの実行 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        let mymap = L.map('map').setView([35.68, 139.76], 13);

        L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
            maxZoom: 18
        }).addTo(mymap);

        // 住所をgeometryに変換するプラグイン
        const provider = new OpenStreetMapProvider();

        provider
            .search({ query: '京都市' })
            .then(function(result) {
                console.log(result);
            });
    });
</script>

上記HTMLをブラウザで呼ぶと、

ReferenceError: OpenStreetMapProvider is not defined

と表示されます。

OpenStreetMapProviderleaflet-geosearchの公式の通り書いています。
なので、おそらくrollup側でうまくコンパイルできていないのかと思いますが……

bundle.jsの中身を検索かけてみると、確かに存在します。

画像の説明をここに入力

これはなぜなのでしょうか?

試しにapp.jsでimportではなくrequireを使ってみましたがエラーが増えた(requireは使えないというエラーが)だけでした。


また、むしろ定義のされていない let mymap = L.map('map').setView([35.68, 139.76], 13);Lが使えるのも意味がわかりません。

このあたり詳しい方がいらっしゃいましたらご教示いただけますと幸いです。

1 件の回答 1

1

ESモジュールを使う形で使う場合は、モジュールを使うコードもrollupで処理しますが、rollupでバンドルする場合、leafletやleaflet-geosearchのESモジュール対応がまちまちのため本質的なところ以外で若干複雑になります。

app.js

import { map, tileLayer } from 'leaflet'
import { OpenStreetMapProvider } from 'leaflet-geosearch'

export function init() {
    let mymap = map('map').setView([35.68, 139.76], 13);

    tileLayer('https://cyberjapandata.gsi.go.jp/xyz/std/{z}/{x}/{y}.png', {
        maxZoom: 18
    }).addTo(mymap);

    // 住所をgeometryに変換するプラグイン
    const provider = new geosearch.OpenStreetMapProvider();

    provider
        .search({ query: '京都市' })
        .then(function(result) {
            console.log(result);
        });
}

ところが [email protected] ではesm形式のファイルで提供されているのにも関わらず、 package.jsonmodulejsnext:main で指定していないので rollup が dist/leaflet-src.esm.js を見つけられません。そこで解決用のプラグインを追加します。
またrollup-plugin-commonjsOpenStreetMapProviderを見つけられないのnamedExportsオプションで対応します。

rollup.config.js

import nodeResolve from 'rollup-plugin-node-resolve';
import commonjs from 'rollup-plugin-commonjs';
import babel from 'rollup-plugin-babel';

function resolveLeaflet() {
    return {
      name: 'resolve-leaflet',
      resolveId ( source ) {
        if (source === 'leaflet') {
            return {id: 'node_modules/leaflet/dist/leaflet-src.esm.js'};
        }
        return null;
      }
    };
}

export default {
    // コンパイル対象JSファイル
    input: './resources/js/app.js',

    // コンパイル済みJSファイルの書き出し先
    output: {
        format: 'iife',
        name: 'myapp',
        file: './public/js/bundle.js',
    },

    // コンパイルに利用するオプションと外部プラグイン
    plugins: [
        resolveLeaflet(),
        nodeResolve({jsnext: true}), // npmモジュールを`node_modules`から読み込む
        commonjs({ // CommonJSモジュールをES6に変換
            namedExports: {
                'leaflet-geosearch': ['OpenStreetMapProvider']
            }
        }),
        babel(), // ES5に変換
    ]
}

最後にHTML側からはexportした関数を使います。

index.html

<!-- JSとCSSの読み込み -->
<link rel="stylesheet" href="css/main.css">
<script src="js/bundle.js"></script>

<!-- MAP表示エリア -->
<div id="map" style="height: 450px;"></div>

<!-- leafletjsの実行 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script>
    $(function () {
        myapp.init();
    });
</script>
3
  • さん ご回答ありがとうございます!ご返信遅れてしまい申し訳ありません。。。 いただきましたコードを実行すると、無事動作いたしました。 本当にありがとうございます。 私、JavaScriptがあまり得意ではなく、とても助かりました。 こういった、bundle?Webpack?系の勉強は、node.jsで学ぶことができるのでしょうか…? Commented 2019年10月30日 16:12
  • この質問はrollup.jsだったので、rollup.jsの公式ドキュメントやgithubのイシューが参考になると思います。ESモジュールまでJavaScript自体に標準のモジュール機能がなく、ライブラリごとにCommonJS/AMD/ES Module/モジュールなしがばらばらで混沌としていているのを、場当たり的に対応していて、ここだけ学べば大丈夫というのはちょっと思い当たりません。長期的にはESMとブラウザ(+rollup.js的なもの)だけで大丈夫になると思いますが…
    – zakki
    Commented 2019年10月31日 2:44
  • > ESモジュールまでJavaScript自体に標準のモジュール機能がなく、ライブラリごとにCommonJS/AMD/ES Module/モジュールなしがばらばらで混沌としていているのを、場当たり的に対応していて、ここだけ学べば大丈夫というのはちょっと思い当たりません なるほど……ありがとうございます! 地道に勉強していきます>< Commented 2019年11月8日 2:21

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。