這一次我們談?wù)勀K問題。
通常我們希望這個項目可以分為多個獨立的模塊,比如,上一次提高的 hello 函數(shù),如果我們定義為一個模塊,其它模塊引用之后,直接調(diào)用就好了。在前端怎么使用模塊呢?這可說來話長了。
如果我們把 hello 函數(shù)定義在文件 hello.js 中,內(nèi)容如下:
function hello(){ alert("Hello, Webpack!"); }
然后把主入口函數(shù) index.js 的內(nèi)容寫成下面的內(nèi)容,你應(yīng)該會得到一個錯誤信息。
require("./hello");
hello();
對話框是彈不出來的。錯誤信息如下:
Uncaught ReferenceError: hello is not defined, 明明定義了 hello 函數(shù),卻偏偏說找不到。
1. CommonJs 模塊
CommonJs 是目前比較流行,也是出現(xiàn)較早的模塊技術(shù),它誕生于 NodeJs,使用起來其實比較簡單。
首先,它把一個獨立的文件看成一個模塊,比如上面的 hello.js 文件,就可以當(dāng)成一個模塊。模塊的名稱就是文件名稱,但是可以不用提供擴(kuò)展名 .js,直接使用文件名就可以。
在導(dǎo)入一個模塊的時候,使用 require 函數(shù),注意是函數(shù),并不是關(guān)鍵字,JavaScript 并沒有提供這個關(guān)鍵字。函數(shù)的參數(shù)就是模塊名稱,不過,要注意模塊分為兩種,自定義的模塊和系統(tǒng)模塊。
自定義的模塊必須使用 . 或者 .. 開頭的相對路徑,如果都在同一個目錄下,也需要使用 . 來表示當(dāng)前路徑,比如上面用到的 require("./hello")。
不是使用 . 或者 .. 開始的相對路徑的,都稱為系統(tǒng)模塊,系統(tǒng)模塊的路徑其實在 node_modules 文件夾中,每個子文件夾就是一個系統(tǒng)模塊。