ionic3のindex.htmlを解体してみた|Analyzing index.html of ionic3

NewProject/src/index.htmlの中身です。
(ビルドしたらNewProject/www/index.htmlにいくはず)
There is content of NewProject/src/index.html.
(Built, index.html will be taken to NewProject/www/index.html.)

ユーザーが最初にアクセスするであろうindex.htmlに何が記載されているのかを調べました。
I research the index.html which an user will access at first.

気になったのは5つ
There were 5 concerned files.
・cordova.js
・service-worker.js
・build/polyfills.js
・build/vendor.js
・build/main.js

これらについて、調査結果を記します。
This time, I note the result of research of them.



index.htmlの全文|full text

↓これがindex.htmlの全文です。
↓This is the full text of index.html

各jsファイルについて|About each js file.

cordova.js

クロスプラットフォームの真髄、cordova.js。
Essence of Cross Platform, cordova.js.

このモジュールによって、jsソースから、各種スマホのカメラ機能を呼び出したり、プラグイン機能を操作したりすることができます。
This module enables js source to envoke camera of each smart phone and to control plug-in.

service-worker.js

現時点で理解したことは、
・バックグラウンドで動くjavascript
・ionicの修正を即時反映してくれる
です。
Currently, I understood
・this works bbackground
・this immediately reflect changes to display
.

もっと多様なメリットがありますが、ここではこれを抑えておきます。
However this has more merits, today I note so far.

home.htmlを編集すると、通常、保存&更新で変化を確認するところ、service-worker.jsがあることで、勝手にブラウザへ反映しておいてくれるのです。
Normally, after changing a file, I must save and update and confirm. But service-worker.js enables to automatical flow.

便利ですね。
It’s convinient, isn’t it?

build/polyfills.js

そもそも、「polyfill」という概念から説明します。
At first I explain concept of “polyfill”.

ブラウザのバージョンが古いと、思い通りに表示されないことがありますよね。
There is wrong display when browser is old.

polyfillは、それに対応する概念です。
“polyfill” is concept to correspond that.

つまり、古いブラウザでも、同じ見え方になるように、CSSやjavascriptのコードの追加などによって再現させていくのです。
That is, we can see same display in spite of old browser by adding some codes of CSS and javascript.

polyfills.jsがあることによって、同じような動作を異なるブラウザ、デバイスで実現することができるのです。
polyfills.js enables different browser and device to show same work on display.

まさにクロスプラットフォーム。
That is the CROSS-PLATFORM.

build/vendor.js

vendorというフォルダには外部ファイルがしまわれることが多いようです。
index.htmlには、このように説明がコメントにあります。
The vendor folder is used to put away outside files.
There is explanation in index.html.

It contains all of the dependencies in node_modules

つまり、Node.js(=外部ファイル)に依存関係のあるスクリプトがここに記載されているようですね。
So, scripts which has dependencies of Node.js(=outside file) are written in this vendor.js.

これも、基本、いじるところではないでしょう。
Normally, you don’t have to touch.

build/main.js

こちらは、TypeScriptやHTMLを呼び出すために、小さくまとめられた場所、という感じでした。
This seems a file that has short code to call Typescript and HTML.

https://www.javascripttuts.com/the-ionic-build-process-tutorial/

mainだけあって、必ず処理されるファイルでしょう。
いじることはなさそう。
Sure is main, it must be proceeded.
Normally, you don’t have to touch.

まとめ

ionicプロジェクトに生成されている、5つのファイルについて調べました。
I researched 5 files created in ionic project.
・cordova.js
・service-worker.js
・build/polyfills.js
・build/vendor.js
・build/main.js

現時点では、浅くふんわり概念的な理解でいいと思ってます。
Currently, it’s ok to understand concept abstractly.

これらを直接いじることはないようですね。
ただ、役割がそれぞれどんなものを有しているのかだけ把握しておけばひとまずよさそう。
They don’t seem to be needed to touch.
But you should know roles of them.

関連記事

  1. [Vol.1] ionic開発環境のセットアップ | Setti…
  2. Make sure to include cordova.js
  3. [Vol.2] ionic開発環境のセットアップ | Setti…
  4. git pushのPermission deniedが過去アカウ…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

CAPTCHA


PAGE TOP