Skip to content

Developer Information 1

Jump to bottom
OHTSUKA Ko-hei edited this page Feb 3, 2018 · 2 revisions

開発者関連の情報をまとめていきます。

maplat.jsにMinifyされる前の、JavaScriptファイルはどこにあるの？

リポジトリの中にrelease.htmlというHTMLファイルと、debug.htmlというHTMLファイルの2つがあります。
前者はmaplat.jsを呼んでいますが、後者はコンパイルしてminifyする前のJavaScriptの呼び出し方で書かれています。
つまり、release.htmlで書かれている

<script src="js/maplat.js"></script>

を、debug.htmlの

<script src="js/aigle-es5.min.js"></script>
<script src="js/require.min.js"></script>
<script src="js/config.js"></script>

に変更するとコンパイル前のJavaScriptが呼べます。
モバイルアプリサンプルの方はmaplat.jsを読んでいるものしかないですが、これも同様に書き換えればコンパイル前のJSファイルが読み込めます。

debug.htmlでは3ファイルしか読み込んでいないように見えますが、require.jsを用いておりますので、実際にはもっと多数のjsファイルが読み込まれます。
どんなファイルが読み込まれるかの情報は、config.jsの後半に大半が(全てではないです）書かれています。 (ちなみに、config.jsの前半はInternet Explorer 11に対応するためのPolyfilが書かれています。）

require.jsを使うと、関連するJavaScriptを、

require(['xxx'], function(xxx) {
    ...
});

あるいは

define(['xxx'], function(xxx) {
    ...
});

という記述をすればjs/xxx.jsを自動読み込みするような仕組みで書くことができます。
が、よくあるxxx-version.min.jsみたいなファイル名をいちいち全部書くのは大変なので、別名をつける仕組みがあるのですが、その別名定義がconfig.jsに書かれているので、ここを見ると多くの読み込まれるJavaScriptファイルを一覧できます。
この部分です。

    paths: {
        'i18nxhr': 'i18nextXHRBackend.min',
        'ol3': 'ol-debug',
        'ol-custom': 'ol-custom',
        'i18n': 'i18next.min', //8.4.2
        'turf': 'turf_maplat.min', //4.7.3
        'swiper': 'swiper.min', //3.4.2
        ...

また、この部分のだいぶん後に、

require(['app'], function(app) {
    Maplat.__app = app;
    if (Maplat.__func) Maplat.__func(app);
});

という記述がありますが、この部分で、js/app.jsというJavaScriptファイルを一番最初に呼んでいます。
このjs/app.jsが、Maplatのメインのロジックが記載されているJavaScriptファイルであり、このjs/app.jsの中でさらに

define(['histmap', 'sprintf', 'i18n', 'i18nxhr', 'swiper', 'bootstrap'],
    function(ol, sprintf, i18n, i18nxhr, Swiper, bsn) {
    ...

と書かれているので、さらにhistmap、sprintf、i18n...といったJavaScriptファイルが芋づる式に読み込まれます。

JavaScriptファイルを改変後、maplat.jsにMinifyするには？

Maplatのリポジトリをcloneした後、そのディレクトリの下で

npm install

を実行すると、gulpなどnodeの開発環境がインストールされます。
その後、

npm run build

を実行するとタスクが走り、修正されたapp.js等を組み込む形で、maplat.jsが生成されます。

どのような処理が走っているかというと、まずpackage.jsonの中には

  "scripts": {
    "build": "gulp build",
    "server": "gulp server"
  },

と書かれていますので、実際にはgulpが動いているのがわかります。
そこで、gulpfile.jsを見ていただくと、

gulp.task('build', ['create_example'], function() {
    ...

gulp.task('create_example', ['concat_promise'], function() {
    ...

gulp.task('concat_promise', ['build_withoutpromise'], function() {
    ...

gulp.task('build_withoutpromise', function() {
    ...

gulp buildを実行すると、build_withoutpromise、concat_promise、create_example、buildの順で実行されることがわかります。
build_withoutpromiseでは、

r.js -o rjs_config.js

というコマンドを実行しています。
これは、rjs_config.jsファイルでの設定に従って、require.jsで読み込まれているJavaScript群をまとめて最適化、Minifyまでやってくれるrequire.jsのツールの実行です。
続いて、concat_promiseでは、aigle-es5.min.jsという、Internet Explorer向けのPromise機能のPolyfilをマージしています。
このJavaScriptファイルはr.jsコマンドではうまく一体化できないため、別途個別マージしています。
その後、create_example、buildではサンプルプログラムの作成機能、中間ファイルの削除などが実行され、buildが完了します。

Clone this wiki locally