【webpack核心】- 1、瀏覽器端實現模塊化問題

關於筆記

學習webpack的前置知識：ES6、模塊化、包管理器、git

筆記特點：

1. 合適的深度：webpack使用層面很簡單，但原理層面非常複雜
2. 合適的廣度：webpack生態圈極其繁榮，有海量的第三方庫可以融入到webpack

1、瀏覽器端實現模塊化的問題

問題：

• 效率問題：精細的模塊劃分帶來了更多的JS文件，更多的JS文件帶來了更多的請求，降低了頁面訪問效率
• 兼容性問題：瀏覽器目前僅支持ES6的模塊化標準，存在兼容性問題，比如做網絡通信的axios,axios可以用於瀏覽器端 和 服務器端，axios是使用commonjs 規範端，也有兼容性問題，就算是es6標準的包，也會有效率問題；
• 工具問題：瀏覽器不支持npm下載的第三方包
  這些僅僅是前端工程化的一個縮影

當開發一個具有規模的程序，你將遇到非常多的非業務問題，這些問題包括：執行效率、兼容性、代碼的可維護性可擴展性、團隊協作、測試等等等等，我們將這些問題稱之爲工程問題。工程問題與業務無關，但它深刻的影響到開發進度，如果沒有一個好的工具解決這些問題，將使得開發進度變得極其緩慢，同時也讓開發者陷入技術的泥潭。

思考：
上面提到的問題，爲什麼在node端沒有那麼明顯，反而到了瀏覽器端變得如此嚴重呢？

答：在node端，運行的JS文件在本地，因此可以本地讀取文件，它的效率比瀏覽器遠程傳輸文件高的多

var fs = require("fs"); //內置模塊fs，文件處理
var path = require("path");
var abPath = path.resolve(__dirname, "./test.txt");  //構建絕對路徑
//__dirname 表示當前js文件所在的文件夾

var content = fs.readFileSync(abPath, {  //配置文件
    encoding: "utf-8"  //編碼方式
})

console.log(content);   ///test.txt 裏的內容

path.resolve(__dirname, "./test.txt") 用於拼接絕對路徑
__dirname 表示當前js文件所在的文件夾

2、根本原因

根本原因：在瀏覽器端，開發時態（devtime）和運行時態（runtime）的側重點不一樣

開發時態，devtime：

1. 模塊劃分越細越好
2. 支持多種模塊化標準
3. 支持npm或其他包管理器下載的模塊
4. 能夠解決其他工程化的問題

運行時態，runtime：

1. 文件越少越好
2. 文件體積越小越好
3. 代碼內容越亂越好
4. 所有瀏覽器都要兼容
5. 能夠解決其他運行時的問題，主要是執行效率問題

這種差異在小項目中表現的並不明顯，可是一旦項目形成規模，就越來越明顯，如果不解決這些問題，前端項目形成規模只能是空談

3、解決辦法

既然開發時態和運行時態面臨的局面有巨大的差異，因此，我們`需要有一個工具能夠讓開發者專心的在開發時態寫代碼，然後利用這個工具將開發時態編寫的代碼轉換爲運行時態需要的東西。

這樣的工具，叫做構建工具

這樣一來，開發者就可以專注於開發時態的代碼結構，而不用擔心運行時態遇到的問題了。

---

另：關於瀏覽器不支持npm下載的第三方包

初始化package.json文件

npm init -y   
# 初始化一個 package.json 文件，記錄npm 安裝記錄
npm init  
# 如果所在文件夾是中文名，就不能-y ，要name 是英文名

看瀏覽器端是否支持npm 安裝的jquery，會報錯！

npm i jquery   
# 安裝jquery,看瀏覽器端是否支持npm 安裝的jquery

在b.js 中 引入npm安裝的jquery 會報錯

import $ from 'jquery';

在服務器端，用nodejs的時候，如果沒有./ 或者 ../ 就會默認取node_modules中去找
但是在瀏覽器端，上面寫法會報錯，

相關錯誤

1.es6的模塊化要求路徑必須是./ 或../開頭，不然沒法識別，

如果非要導入node_modules中的模塊，必須用./ 或…/開頭,
這個路徑查看方法：在node_modules中jquery文件夾下，具體看jquery文件夾下的package.json 裏的main對應的文件

import $ from '../node_modules/jquery/dist/jquery.js'

如上寫法就可以找到jquery.js了，但是==還會報錯，因爲jquery是commonjs ==導出的

2.node_modules中的模塊可能是commonjs標準導出的，es6的import引入沒法識別

3. node_modules中的模塊可能有大量依賴關係，這樣加載的js文件會太多
就算模塊是es6導出的，也會有效率問題

綜上所述，所以瀏覽器端很難和npm結合