免責事項：この投稿は、高度なJavaScript開発者にとって面白くないように思えるかもしれません。 ECMAScript 2015+を学びたい初心者を対象としています。
Chrome 45およびNodeJS 4でのECMAScript 2015の部分的なサポートの出現により、Web開発者は業界で新しい時代に入りました。 残念ながら、新しいJavaScriptはすべてのブラウザーでサポートされているわけではありません。 Babelは開発者の助けを借りて、開発者は新しいJavaScriptをすべてのブラウザー（古いブラウザーも含む）でサポートされている古い形式にコンパイルします。 実際、ECMAScript 5には複数のECMAScript.nextコンパイラがあります： Traceur 、 ES6 Transpilerなど。 しかし、Babel（以前の6to5）は、これまでで最も人気があり、最も急速に成長しているコンパイラです。
一方 、Matryoshkaは（それがなくてもMatreshka.jsプロジェクトのブログです）、適度に人気のあるフレームワークであり、初心者から「どこから始めるべきか」という質問を時々提起します。
ソリューションはMatreshka.js ECMAScript.nextボイラープレートです。 このリポジトリは、1石で2羽の鳥を殺します。カスタマイズされたGulp、SystemJS、およびMatryoshkaを使用した単純なモジュールの例が含まれています。
<habracut / |>
リポジトリは、マトリョーシカのユーザーだけでなく、すべての人向けに作成されています。 このfremvorkを使用したくない場合は、インポートせずに、 / src / lib /から対応するファイルを削除してください。
この例は最大限に単純化されているため、初心者はJavaScriptコードのみの実装に集中できます。 CSSプリプロセッサ、browserify、jspmなどは含まれていません。接続するライブラリは、 / src / lib /フォルダーに直接コピーできます。
何を使用しますか？
- Gulpは「タスクランチャー」です。
- SystemJSは、汎用モジュールローダー（AMD、CJS、ES6）です。
- Babelは、古い世代の新世代のJavaScriptコンパイラです。
- Matreshkaはデフォルトのフレームワークです。
始め方
（コマンドラインで作業する必要があります）
- Node.js 4+およびnpmをインストールします（通常、npmはNode.jsのインストールとともに自動的にインストールされます）。
-
npm install --global gulp
して、npm install --global gulp
グローバルにインストールします。 - リポジトリをダウンロードまたはクローンします。
- リポジトリフォルダー内で、
npm install
コマンドを実行し、 package.jsonで定義された依存関係をロードします。 -
gulp
コマンドを実行して、すべてがうまくいったことを確認します（ / dist /フォルダーが作成され、 / index.htmlと/dist/index.htmlのデモアプリケーションは同じように見えます）。
必要なツールのインストール方法はオペレーティングシステムによって異なる場合があるため、問題を報告する前に何らかの問題が発生した場合は、Google、Yandex、またはDuckDuckGoにお問い合わせください。
環境をセットアップするのに必要なことはそれだけです。 コードを書きましょう。
- リポジトリからアプリケーションを変更します。
-
gulp
再度実行して、スクリプトをコンパイルします。
gulp
コマンドを
gulp
た結果、すぐに使用できるアプリケーションが/ dist /フォルダーに作成され、サーバーにダウンロードできます。
開発プロセス
ECMAScript.nextを古いECMAScript 5にコンパイルするには2つの方法があります。
1つ目は、ブラウザーで直接コンパイルすることです。 ページがリロードされるたびに、Babel / browserはその場でES.nextをコンパイルします。 コードの量が少ない場合、これは便利ですが、モジュールの数が多い場合、ページのロードが遅くなることがあります。 このメソッドはデフォルトで使用されます。
2番目の方法は、ファイルをプリコンパイルすることです。 この場合、
gulp scripts:watch
実行してコマンドラインヘルプを使用する必要があります。/src /フォルダー内のファイルの変更を開始する前に
gulp scripts:watch
ます。 この場合、すべてのコンパイル済みファイルは/ js /フォルダーに移動します。 この開発方法を使用するには、 / src / config.jsファイルを変更し、 / src /で始まるすべてのパスを/ js /で始まるパスに置き換える必要があります（たとえば、
app: 'src/app'
を
app: 'js/app'
に置き換えます）
app: 'js/app'
）そして、Babelのすべての言及を構成から削除します（
babelOptions
と
transpiler
削除し
transpiler
）。 これらの名前の変更を気にすることはできません： / src /フォルダーには、 config.jsに加えて、 config.jsに名前を変更できるconfig.precompiled-example.jsファイルがあります（もちろん、その前に古い構成を削除します）。
プロジェクト構造
/ css /-CSSファイル。
/テンプレート/ -アプリケーションにインポートするテンプレート。
/ img /-HTMLおよびCSSで使用される画像。
/ js / -ECMAScript 5でコンパイルされた非圧縮JSファイル（フォルダーはリポジトリに含まれません）。
/ src / -アプリケーションのソースコードを含むフォルダー。
/ src / app / -開発中のアプリケーションを含むフォルダー。
/src/app/app.js-アプリケーションの開始点。
/ src / lib / -プロジェクトに含めるライブラリ。
/src/config.js-SystemJSの構成。
/ dist / -サーバーにアップロードしてクライアントに表示できるコンパイル済みのすぐに使用できるアプリケーション（フォルダーはリポジトリに含まれません）。
/gulp.js-Gulpファイル。
/package.json-npmのメタデータ。
/index.html-メインHTMLファイル。
/.gitignore-Gitで無視されるファイルとフォルダーのリスト。
Gulpタスク
gulp scripts
- / src /から/ js /にファイルをコンパイルします。 ブラウザのコンパイルを使用する場合、このタスクは必要ありません。
gulp scripts:watch
watch- / src /フォルダー内の変更をリッスンし、変更されたファイルごとに
scripts
を起動します。 ブラウザのコンパイルを使用する場合、このタスクは必要ありません。
gulp scripts:build
-プロジェクトに含まれるすべてのファイルを1つの縮小された.jsファイルにコンパイルし、 / dist / js /フォルダーに配置します。
gulp
gulp html
-gulp-htmlprocessorを使用して、開発プロセスに必要なスクリプトを接続するHTMLを、 / dist / js /フォルダーにある単一の縮小スクリプトに接続します。
gulp default
または
gulp
は
scripts:build
実行し
gulp default
scripts:build
、
html
、 / css /から/ dist / css /に CSSファイルをコピーし、フォルダー/ img /から/ dist / img /の内容をコピーします
念のため、リンクを複製します。
すべてに良い。