WebPACKの3.0のフロントエンドエンジニアリング（背景、モジュラー、環境の準備）

（1）背景

　　

 

 

　　Googleのツールモジュールに影響を割ることに触発されていました

　　

　　

　　SPAのプロモーションでは、急速にアプリケーションのフロントエンドの複雑さ。

　　

 

　　

 

 

 　　

 

 

 　　MVCの時代には、モジュール式の最初のアイデアがありました

　　

 

　　三つのフレームワークが人気を促進するためのモジュラーコンセプトを置きます。

モジュラーおよびパッケージの問題と関連した新しい構文変換に直面しなければなりません

　　

 

 

 　　

HTML、開発のCSSの歴史の上に見られるように、より少ない、サス、彼らは、ビルド・ツールを使用した場合ように、（新旧文法）のコードを書く方法を、別のブラウザで適切に実行することができ、言語を事前

　　

CoffeeScriptのは、RubyコミュニティJSシンタックスシュガーで打ち上げ

　　

 

 

 　　

 

 

 　　

 

 

 　　

 

　　

センターにこの問題を解決するために、依存関係は、より多くの断片化、集中しています

　　

現在の三の大主流のフレームワークは、デフォルトのビルドツールのWebPACKとして使用するので

　　

 

（2）指導

　　

 

 

 　　

 

 

 　　

 

 

 　　

　　、

 

 

　　

 

 

 　　

 

 

 

 

（3）モジュラー

　　

 

 

 　　JSモジュラー開発

1は、名前空間（もっと人気が数年前）、参照トーキングJavaScriptの名前空間
 2を、クライアントが使用することはできません、サーバーに適用され、ノードのコミュニティで生まれcommon.js
 3をAMDがCMD、、、UMDは、後に使用されていますモジュラー仕様ブラウザ
 4モジュラー仕様の普及と、ES6 ES6モジュールはES6の使用を開始します

　　

短所：それから、フルパス名を覚えておく必要がNameSpace.type.method

　　

 

 

 　　

 

 

 　　

 

　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

 

 

 　　

1、ES6模块导入使用import...from...，{}里存放导入的方法
2、可以一起导入，也可以分开导入
3、named as myName中的as为重命名
4、import * as mylib from 'src/lib'
    把模块里定义导出的所有方法，绑定到mylib对象上
5、import 'src/mylib'代表只是把文件模块加载进来，没有调用相关方法

　　《1》暴露变量定义

 

 

　　　　

 

 

 　　《2》暴露方法定义

　　　　

 

 

 　　《3》暴露默认模块，可以是变量、函数、字符串、数字、匿名函数、类class等

　　　　

　　《4》选择性暴露方法、导出时重命名

　　　　

　　《5》导入后导出export...from...

　　　　

 

　　详见ES6模块化规范之ESM

 

 　　

注意：webpack新版本3+开始，便已经支持了ES6规范，不再需要babel

　　

　　

　　

 

 

 　　

　　

　　

　　

　　BEM风格代码案例：

　　

 

 　　

 

 

　　

 

（3）环境准备

　　

 

 　　命令行工具

　　

　　安装Webpack全局工具