フロントパッケージングツールのフロントエンド---------心の中で心

ES6モジュラー：

ファイル名からの輸出のデフォルト{}インポートファイルのアドレスを導入し、

エクスポート関数fnは、（）{}アドレスからインポート{FN}を導入します。

 

開発環境----バベル（コンパイルES6文法）

中国の情報ネットワーク：https://www.babeljs.cn/

NPMの初期化を実行し1.node環境、;

--save -devバベルコアバベルプリセット-es2015バベル-preset -latestを2.npmインストール 

3.ファイルを作成します.babelrc

4.npmインストール--globalバベル-cli（コマンドラインで管理者モード）

5.babel --version

 

開発環境--webpack  

中国の情報ネットワーク：https://www.webpackjs.com/

1.npmインストールのWebPACKのバベルローダー--save -dev

2. [設定webpack.config.js

3.設定スクリプトpackage.json

4.実行NPM開始 

 

= module.exportsは{ 
    エントリ： './src/index.js'、   // 入口 
    出力：{                  // 出口
       経路：__ dirnameは、
       ファイル名： ' ./build/build.js'    // ファイルフォルダを作成
    }、
    Module1を：{ 
       ルール：[{ 
              テスト： /\.js?$/は、       // すべての端が.jsファイル 
              除外する：/（node_modules）/、    // このファイル削除 
               ローダー： 'バベルローダ' 
       }] 
    } 
}

 

開発環境--rollup 

1.npm熱   

2.npm私はロールアップ・プラグイン・ノード・解決のロールアップ・プラグイン・バベルのベール - プラグイン外部ヘルパーバベル・プリセット・最新--save-devの

3.設定.babelrc

4.設定rollup.config.js

 

差ロールアップとのWebPACK

ロールアップは、単一の、WebPACKの強力を備えています。

 

フロントエンドパッケージングツールは何？？