導入された大型のフロントエンドツール

今、様々なモバイルエンド端末装置上昇、PC側を超えた、異なるデバイスは必然的に非常に、このようなゲームを作って、あなたがなどのAndroidバージョン、IOSのバージョン、いくつかの異なるバージョンを開発する必要があり、より多くの困難な開発、統一されていない言語の開発につながります人的・物的資源の無駄。

時代の大きなフロントがされて入ってきた、これらの問題を解決するために、正確に表示されます。

ES6の建築プロジェクトについて

プロジェクトのビルドステップ
1. 新しいプロジェクトフォルダ（3つのブロック）
  1. アプリ：フロントエンドコード（JS、CSS、HTMLテンプレート）
    - JS
    - CSS
    - 景色
  2. サーバー：サーバーコード（サーバー） 一个完整的项目必须要服务器提供接口和真实数据
    - express-generator脚手架
    - express -e .
  3. タスク：補助コード（コンパイラフロントエンドのコードと自動化）
    - UTIL：共通ゴクゴク自動スクリプトを置きます
      - args.js （独自のスクリプトコマンドライン引数を書きます）
2. 必要な構成ファイルを作成します。
  1. package.json（NPM -yインストール）
  2. .babelrc （サポートES6文法）
  3. gulpfile.babel.js（構文は、プロジェクトES6で使用されるため、そのゴクゴクスタートアップファイル拡張子を追加する必要があります.babel）
3. 取り扱いコマンドラインパラメータ（args.jsカスタムパラメータスクリプト）

jQueryの

パッケージのエントリー機能
- jqueryの入力機能は、代わりDOMContentLoadedを使用する、使用しなくてもよいです

モジュラーロード

CommonJSの仕様

核となるアイデア

これは、モジュールができますrequire他のモジュールへの同期に依存する方法をロードし、次にによってすべきexportsか、module.exports言い訳を露出するように誘導されたニーズ

必要（「モジュール」）。
必要（"../file.js"）; 
exports.doStuff = 関数（） {}。
モジュールの.exports = someValueの。

実現
- Node.jsのサーバー
- Browserify

AMDのAsynchronous Module Definition仕様

核となるアイデア

1つのプライマリインターフェイスdefine(id?， dependencies?， factory)は、モジュールはすべての依存関係の依存関係、およびまた、工場に渡されるパラメータとして、依存するモジュールを事前に行うとき、声明の中で事前に依存を指定することです

（定義"モジュール"、[ "DEP1" 、"DEP2" ]、関数（D1、D2） { 戻り someExportedValueを; }）; 必要（[ "モジュール"、 "../file" ]、機能（モジュール、ファイル） {}）;

実現
- requireJS

CMDのCommon Module Definition仕様

そして、AMDは非常に似ている、それをシンプルに保つようにしてみてください、とモジュールCommonJSのNode.jsと仕様との互換性の多くを維持するために、

（定義関数（必要、輸出、モジュール） { VAR $を= 必要とする（'jQueryの'）; VARのスピニング= 必要とする（'./spinning'）;     exports.doSomething = ... モジュールの.exports = ... }）

実現
- Sea.js

背景のNode.js
- 依存性が必要と輸出
browserify
- モジュールローダーが、あなたは唯一のJSを読み込むことができます
WebPACKの
- モジュールローダ、すべてのものは、CSSを含むモジュール、写真、VUEファイル、jsファイルなどです
- モジュールは、個別に書かれ、最後に一緒にパッケージされています

WebPACKの

WebPACKの正しく設定 process.env.NODE_ENV

新しい webpack.DefinePlugin（{ 'process.env' { 'NODE_ENV' ：JSON .stringify（'生産'）    } }）

あなたは、次のコマンドを呼び出すとき： WebPACKのパッケージ（Linux環境）を使用する方法を本番環境を示し、

NODE_ENV=production webpack --progress --colors