フロントエンドの環境設定

概要

Babel : ES6 -> ES5への変換
Node.js : JSライブラリ管理
webpack: 1つにまとめる（読み込み速度UP)
polyfill: 下位互換
vue-cli: 必要ソフトをパッケージ化

■ Npmとは Node.jsはJavaScriptを実行する環境です。

本来、JavaScriptはWebブラウザに組み込まれていて、ブラウザ上でしか実行できませんでした。

しかし、Node.jsはその場でのスクリプトの実行を可能にしてくれます。さまざまなライブラリが存在しているのですが、それらのインストールを行うツールとして、Node.jsに組み込まれているのがNpmです。

■ package.jsonとは npmを使ってパッケージをインストールする際に、バージョンなどの情報をJSON形式で記録して依存関係をまとめたファイル

■ 参考リンク

■ webpackとは webpackとはモジュールバンドラーになります。

webpacklを利用することで、複数のモジュールを依存関係を解決して一つのアセットにまとめることが出来ます。

■ 参考リンク

webpack の loader であり、JS で構築されるアプリケーション内で CSS を扱うために利用されます。

■ 参考リンク

Babelとは、簡潔にいうと、JavaScriptのコードを新しい書き方から古い書き方へと変換するツール

ブラウザによってはES2015のJavaScriptの書き方では正常に動かないケースが存在する

具体的にはJavaScriptの言語仕様であるES2015以上の仕様のJavaScriptで記述すると、Internet Explorer11といった古いブラウザでは動作しない。

そこで、Babelを使ってES2015・ES2016といった仕様で記述したJavaScriptファイルを互換性のあるEXMAScript5に変換する。

polyfillはES5に存在しない関数やライブラリの代替コードのこと。

■ 参考リンク