前端工程化以及如何通過Node.js中babel來編譯es6模塊化代碼

傳統開發模式的主要問題有兩個一是命名衝突 ，二是文件依賴。解決這兩個問題的方法就是模塊化

什麼是模塊化？

模塊化就是把單獨的一個功能封裝到一個模塊（文件）中，模塊之間相互隔離，但是可以通過特定的接口公開內部成員，也可以依賴別的模塊

模塊化開發的好處：方便代碼的重用，從而提升開發效率，並且方便後期的維護

一開始模塊化規範有哪些？

在一開始模塊化是分為兩大模塊來進行規範的 ：

一 ，是瀏覽器端模塊化規範 ， 主要有兩種模塊化的方法 ：1.AMD（Require.js ），2.CMD（Sea.js ）

瀏覽器端模塊化方式

二，是伺服器端模塊化規範 ，主要運用CommonJS進行模塊化開發 ，CommonJS將模塊分為單文件模塊與 包 ，模塊成員導出通過module.exports 和 exports ，模塊成員導入通過require('模塊標識符')來進行模塊化開發

ES6模塊化

上面這些都是在 ES6 模塊化規範誕生之前，Javascript 社區提出的 AMD、CMD、CommonJS 等模塊化規範。但是，這些社區提出的模塊化標準，還是存在一定的差異性與局限性、並不是瀏覽器與伺服器通用的模塊化標準 例如：

AMD 和 CMD 適用於瀏覽器端的 Javascript 模塊化 ，CommonJS 適用於伺服器端的 Javascript 模塊化

並不統一 ，還是比較亂 ，後來ES6 語法規範中，在語言層面上定義了 ES6 模塊化規範，就形成了大一統的模塊化規範 - ES6模塊化

ES6模塊化規範中定義：

每個 js 文件都是一個獨立的模塊.導入模塊成員使用 import 關鍵字暴露模塊成員使用 export 關鍵字之後就形成了前端工程化下面在：

Node.js中通過babel體驗ES6模塊化

1.首先電腦要安裝Node.js 環境必須v10以上的版本自帶npm包管理工具不需要再單獨安裝npm

2.創建工程項目文件夾

名稱不要使用中文 不能使用 babel 因為會和第三方模塊babel名稱衝突 ，例如：

創建工程項目文件夾

3.在項目文件夾中打開cmd窗口

或者直接window+R打開在cd到目錄中

4.初始化項目

輸入命令 npm init -y 初始化文件自動生成package.json文件

輸入命令 npm init -y回車

文件夾下自動生成package.json文件

5. 安裝babel依賴模塊

由於es6的很多語法特性在舊的瀏覽器下支持不好，我們在使用的時候需要babel將其轉化為es5語法 ，不然瀏覽器會報錯導致我們做的頁面出錯

（1.先輸入命令 npm i -D @babel/core @babel/cli @babel/preset-env @babel/node

安裝babel依賴模塊

（2.在輸入命令 npm i -S @babel/polyfill

npm i -S @babel/polyfill

然後我們發現文件夾下又生成了文件

6. 然後在項目根目錄創建文件babel.config.js

手動創建一個文件babel.config.js

7.在babel.config.js文件中添加如下配置

添加配置

targets配置項指定運行環境，就是我們可以配置對應目標瀏覽器環境，那麼babel就會編譯出對應目標瀏覽器環境可以運行的代碼。

8. 創建一個index.js文件然後編寫代碼

在 index.js中來編寫 es6 語法的 js 代碼

msg

9.執行代碼

運行 npx babel-node index.js 命令 執行 index.js ，輸出msg

msg=123編譯成工

模塊化

10.再創建一個moudel.js

利用es6模塊化的方式將moudel.js 裡面的內容 導出export default

導出export default私有變量

利用es6模塊化的方式將moudel.js內容 import 導入 index.js ，index就能用moudel裡面的變量了

import 導入moudel.js

編譯成功

11.按需導出或者按需導入

按需導需要哪一部分導入哪一部分

12.直接導入

直接導入並執行模塊代碼 ，moudel裡面是一些可執行代碼 ，導入index會直接執行

index會直接輸出結果