Vue - 4 - 模塊化 - commonJS、ES6-Modules、webpack、工程目錄

# 爲什麼需要模塊化

回顧下 JavaScript 原始功能

在網頁開發的早期， js 製作作爲一種腳本語言，做一些簡單的表單驗證或動畫實現等，那個時候代碼還是很少的。

那個時候的代碼是怎麼寫的呢？直接將代碼寫在 <script> 標籤中即可

隨着 ajax 異步請求的出現，慢慢形成了前後端的分離
客戶端需要完成的事情越來越多，代碼量也是與日俱增。
爲了應對代碼量的劇增，我們通常會將代碼組織在多個 js 文件中，進行維護。
但是這種維護方式，依然不能避免一些災難性的問題。

比如全局變量同名問題：（下圖）

另外，這種代碼的編寫方式對 js 文件的依賴順序幾乎是強制性的
但是當 js 文件過多，比如有幾十個的時候，弄清楚它們的順序是一件比較同時的事情。
而且即使你弄清楚順序了，也不能避免上面出現的這種尷尬問題的發生。

# 模塊化？組件化？

• 《淺談前端工程化、模塊化、組件化》 - https://www.cnblogs.com/angel648/p/11370327.html

個人理解：$APP\subset組件\subset模塊$

• 一個 APP 有多個組件（如：頭部搜索欄、中間數據展示框、底層的選項框）

• 一個組件有多個模塊（如：搜索欄有輸入模塊、搜索模塊、緩存模塊等。。。）
  【兩個組件之間的模塊沒關係，可以重複，可以不重複】

# 匿名函數的解決方案

以前，我們可以使用匿名函數來解決方面的重名問題
在aaa.js文件中，我們使用匿名函數

但，這會導致代碼不可複用。

# 使用模塊作爲出口

作爲成年人，變量重名的解決、代碼複用 我全都要！！

name，就把閉包 return 出一個 變量導出

接下來，我們在main.js中怎麼使用呢？
我們只需要使用屬於自己模塊的屬性和方法即可

這就是模塊最基礎的封裝，事實上模塊的封裝還有很多高級的話題：
但是我們這裏就是要認識一下爲什麼需要模塊，以及模塊的原始雛形。
幸運的是，前端模塊化開發已經有了很多既有的規範，以及對應的實現方案。

常見的模塊化規範：
CommonJS、AMD、CMD，也有ES6的Modules

# CommonJS（瞭解）

模塊化有兩個核心：導出和導入
CommonJS 的導出：

CommonJS 的導入

# ES6的export和import

+《JS - 13 - 模塊化》 - https://blog.csdn.net/LawssssCat/article/details/104463632

## export基本使用

export指令用於導出變量，比如下面的代碼：

上面的代碼還有另外一種寫法：

## 導出函數或類

上面我們主要是輸出變量，也可以輸出函數或者輸出類

上面的代碼也可以寫成這種形式：

## export default

某些情況下，一個模塊中包含某個的功能，我們並不希望給這個功能命名，而且讓導入者可以自己來命名
這個時候就可以使用export default

我們來到main.js中，這樣使用就可以了
這裏的myFunc是我自己命名的，你可以根據需要命名它對應的名字

另外，需要注意：
export default在同一個模塊中，不允許同時存在多個。

## import使用

我們使用export指令導出了模塊對外提供的接口，下面我們就可以通過import命令來加載對應的這個模塊了
首先，我們需要在HTML代碼中引入兩個js文件，並且類型需要設置爲module

import指令用於導入模塊中的內容，比如main.js的代碼

如果我們希望某個模塊中所有的信息都導入，一個個導入顯然有些麻煩：
通過可以導入模塊中所有的export變量
但是通常情況下我們需要給起一個別名，方便後續的使用

# 什麼是Webpack？

前端、模塊化、打包、工具

我們先看看官方的解釋：

At its core, webpack is a static module bundler for modern JavaScript applications.

從本質上來講，webpack是一個現代的JavaScript應用的靜態模塊打包工具。

我們從兩個點來解釋上面這句話：模塊 和 打包

## 模塊

模塊概念前面說了。
就是 過程閉包、結果導出、使用導入

但是這樣，又有一個問題，模塊和模塊之間相互依賴，需要管理工具。管理的手段就是“打包”

## 打包

就是將 webpack中各種模塊進行合成一個包（Bundle）

在打包過程中，會對資源進行加工。
如：壓縮圖片、將scss轉成css、將es6語法轉成es5語法、將typeScript轉成javaScript等

# 和 grunt/gulp 的對比

grunt/gulp 也是一個類似的工具。但是沒有webpack強大。

下面左下對比

• 模塊依賴簡單、只需要進行簡單的合併、壓縮 ，那麼，你可以使用 grunt/gulp
• 但是要對模塊進行管理（模塊之間依賴非常複雜了），那麼需要用 webpack

---

• grunt/gulp 強調的是 前端流程的自動化，模塊化不是核心
• webpack 強調模塊化開發管理，前端自動（如文件壓縮合並、預處理等）只是他的附帶功能

# webpack 全局安裝

官方教程：https://www.webpackjs.com/guides/installation/

安裝webpack首先需要安裝Node.js，Node.js自帶了軟件包管理工具npm
查看自己的node版本： （要大於9）

node -v 

全局安裝webpack(這裏我先指定版本號3.6.0，因爲vue cli2依賴該版本)
官方不推薦全局安裝，我們學習，怎麼方便怎麼來

npm install [email protected] -g

這裏，版本太高會依賴其他東西，你不會調的話，會報錯哦

# 創建工程目錄

準備工作

我們創建如下文件和文件夾：

文件和文件夾解析：

• dist 文件夾（distribution）：用於存放之後打包的文件
• src 文件夾：用於存放我們寫的源文件
  • main.js ：項目的入口文件。具體內容查看下面詳情。
  • mathUtils.js：定義了一些數學工具函數，可以在其他地方引用，並且使用。具體內容查看下面的詳情。
• index.html：瀏覽器打開展示的首頁html
• package.json：通過npm init生成的，npm包管理的文件（暫時沒有用上，後面纔會用上）

mathUtils.js 文件中的代碼：

function add(num1, num2) {
  return num1 + num2;
}

function mul(num1, num2) {
  return num1 * num2;
}

module.exports = {
  add,
  mul
}

main.js 文件中的代碼：

const {
  add,
  mul
} = require('./mathUtils.js');

console.log(add(20, 30))
console.log(mul(20, 30))

# js文件的打包

不可以直接使用我們前面寫好的js
因爲如果直接在index.html引入這兩個js文件，瀏覽器並不識別其中的模塊化代碼。
且後期非常不方便對它們進行管理。

所以，我們需要用到webpack工具，對多個js文件進行打包。

---

來到 工程根目錄，控制檯輸入命令

 webpack .\src\main.js .\dist\bundle.js

工程目錄 ./dist 下就 多了個打包好的文件

# 使用打包後的文件

打包後會在dist文件下，生成一個bundle.js文件

文件內容有些複雜，這裏暫時先不看，後續再進行分析。

bundle.js文件，是webpack處理了項目直接文件依賴後生成的一個js文件，
我們只需要將這個js文件在index.html中引入即可

# webpack配置

## 入口和出口

我們考慮一下，如果每次使用webpack的命令都需要寫上入口和出口作爲參數，就非常麻煩，有沒有一種方法可以將這兩個參數寫到配置中，在運行時，直接讀取呢？

當然可以，就是創建一個 webpack.config.js 文件