投稿は古く、SystemJSは万能薬ではなく、多くのアセンブリの問題があります（個人的に多くのバグを報告しました）。GulpはNPMスクリプトに置き換えることができます。 Webpackを使用します。免責事項：この投稿は、高度な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 /フォルダーに直接コピーできます。
何を使用しますか？
始め方
（コマンドラインで作業する必要があります）
- 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 /の内容をコピーします
念の
ため、リンクを複製します。
すべてに良い。