技術標籤：require無法使用變數

引題

常使用框架的孩子們，想要引入一個包時候，通常操作是：

• npm i xxx

• Vue/React元件裡通過import/require 引入

• 可以使用了

某天，當你正在歡樂地寫一個html頁面時，忽然想使用一個包。於是你嚮往常一樣

• npm init

• npm i xxx

• 在頁面裡import/require引入

這時卻發現報錯了。 WHY?首先要清楚JS有兩種執行環境：瀏覽器環境和Node.js環境像module/exports/require屬於CommonJS語法，CommonJS是Node.js採用的模組化規範，而瀏覽器環境下不支援該語法，所以沒有這些變數。所以，其報錯原因就是因為 瀏覽器下 沒有這些定義好的變數。

模組化

換句話說，只要瀏覽器環境下存在這些變數，我們就能正常使用require下面是一個簡單的例子，可以跑在瀏覽器環境下並正常輸出。

constmodule={   exports: {} };const require = (fileModule) => fileModule.exports;// 建立一個虛擬檔案function createInventFile(module, exports) {  exports.double = (num) => num * 2;  return module}const file = createInventFile(module, module.exports);
 
const { double } = require(file);console.log(double(4));

如何執行在不同環境

如何跑在瀏覽器環境？

• 建立一個html，在script標籤裡寫

• 直接開啟瀏覽器控制檯，輸入js程式碼

如何跑在Node環境？

• 終端輸入node，進入node環境，輸入js程式碼

• 建立一個x.js，終端node x.js 執行

以上程式碼跑在Node下會報錯，因為module等變數都是已定義

browserify

其實，工具browserify已經幫我們實現了以上操作，可以在瀏覽器下愉快的使用模組化。

• npm init

• npm i -D browserify

• browserify index.js -o compiled.index.js 編譯為瀏覽器可識別的檔案

新增npm包

有兩種方法可以在瀏覽器環境下使用npm包

• 把包下載到專案中，引入指令碼

• 引入cdn

使用Node模組，如fs

想在瀏覽器環境下使用這些模組？不存在的。前面的browserify僅僅是將CommonJS的模組載入機制轉化為瀏覽器可以理解的程式碼，所以我們能夠像在Node下一樣在瀏覽器環境下使用exports和require。但這不意味著，我們可以任意使用Node.js模組程式碼。比如fs，瀏覽器本身是有沙箱限制的，並不能允許我們任意操作本地檔案，這與其安全機制背道而馳。然而chrome 83版本開始，在使用者授權的情況下，允許瀏覽器讀寫使用者本地檔案了，有興趣的同學參考這篇文章。怎麼辦？

使用node寫一個服務，單獨執行。與可執行檔案一起打包。開啟頁面的時候，執行個批處理伺服器。

---

如果文章有什麼錯誤或者大家有什麼建議，快來聯絡我～～～

上次寫的文章在掘金平臺釋出後被推到了首頁，也不知道它是啥標準。但不得不說，這種正向反饋對於個人的持續輸出還是有推動作用的。