啾啾丸是一位程式員。
在業餘之時,她也會不斷的發掘新知識,運動、美食、參加比賽樣樣都來…,就是人家說的斜槓青年,只是他的斜角度可能過大了一點。
小明有一天在使用...歐不對,文章的主角是啾啾丸。
有天啾啾丸又開啟了他她的筆電,打開了VScode準備來練練網頁的技能,這次想要寫的主題是有關javascript的模塊內容啦!!!
原來啾啾丸因為上次去日本,發現她不會說日語的早安,想不到連最簡單英文她也不會,所以為了方便,她想設計一個機器,以後到不同的城市,只要拿出這個機器,就能說出對應的「早安」,而這個機器對應成javascript語言就變成下方的程式碼
// lib.js
var sayMorning = function (language, name) {
if (language === 'en') {
console.log(`Good morning, my name is ${name}`);
} else if (language === 'jp') {
console.log(`おはようございます、こんにちは私は ${name} です`);
}
};
module.exports = {
englishMorning: sayMorning.bind(this, 'en'),
japanMorning: sayMorning.bind(this, 'jp'),
};
往後在程式需要Print出各式各樣的早安時,只需要拿出這個機器,輸入對應的「語系」,機器自動會吐出正確的「早安」,這樣不就變得很方便嗎?啾啾丸邊流口水邊想著。
於是啾啾丸在網路上認真地爬了文之後,找到了方法可以引進的方法
//app.js
console.log(' -- 啾啾丸的語言App.js');
var langLib = require('./lib.js');
langLib.englishMorning('english');
langLib.japanMorning('japan');
啾啾丸開心的開啟了index.html,期待著機器會印出相對應的早安
但身為工程師的你也知道,事情往往不會這麼順利,瀏覽器報出紅色的錯誤
啾啾丸回去看了看她爬過的文章,也一而再再而三的檢查自己的程式碼是否與網路的文章有出入,甚至是複製貼上都用上了,但是瀏覽器還是報錯誤,到底發生了什麼事?
歷史典故
後來發現是因為使用了 require,原來require並不是內建在瀏覽器可以看得懂的字眼!那require哪來的呢?
在javascript最初設計時因為安全的考量,是沒有從某個文件導入到另個文件
的機制的,也就很難實現模板的概念。
後來node.js納入了CommonJS規範之後,才讓js可以使用require詞彙,但是瀏覽器並不包含在內,所以就需要有類似CommonJS類似的工具,來讓瀏覽器也看得懂require的工具。
因此2011年時,Browserify出現了,讓browser也能使用Node.js風格的模組,當然也包含require,編譯成browser認識的javascript。
啾啾丸在弄懂這些歷史歷程之後,又有其他的疑問了,require似乎是大神們為了補足原本的javascript不夠便利,而開發出來的一個新的方式。
是否有其他的檔案也因需更便利,進而包裝了一層,但是瀏覽器也看不懂呢?
webpack的出現
因為網路的大神太多了,JS有ES6,CSS有SASS、SCSS,有各式各樣不同的工具讓開發者在開發網頁時更加的便利,而WebPack的誕生就是將所有的工具都轉成讓瀏覽器看得懂的語言。
啾啾丸迫不及待的去下載webpack來試試看這個強大的功能,在這邊啾啾丸知道如果要下載webpack的話,需要使用npm
去安裝,而npm是 Node.js 的套件(package)管理工具,如果安裝了node.js的話,自然就有npm的功能了,因此啾啾丸就做了幾個步驟
啾啾丸的步驟
- 去Node.js網站下載,然後安裝Node.js
- 然後在命令提示字元上打上
node -v
與npm -v
來確認都有安裝成功
- 啾啾丸因為有自己喜歡的格式,所以創造了一個屬於他的資料夾風格
- 接下來使用vscode打開專案資料夾,使用
ctrl + ~
打開Terminal介面,數入npm init
來初始化資料夾,然後因為在初始化時需要填入一些資訊,懶惰的啾啾丸因為覺得很麻煩,全部都點Enter直接下一步,然後就在資料夾內產生了一個package.json檔案 - 接下來輸入
npm install --save-dev webpack webpack-cli
來安裝webpack,並在根目錄創建webpack.config.js
檔案
接下來就是需要去設定webpack.config.js的內部檔案了
const path = require('path'); module.exports = { entry: { App: './src/app.js', }, output: { filename: 'app.bundle.js', path: path.resolve(__dirname, 'dist'), }, };
-- App:代表程式的進入點
-- filename:產出後的檔案名稱,加上bundle的字眼容易辨識已打包過
-- path:產出後的檔案位置接下來就可以在Terminal中輸入
npx webpack --config webpack.config.js
產出app.bundle.js
因為啾啾丸原本在index.html引用的是原本的app.js這支檔案,但是因為現在要改為使用app.bundle.js,所以必須修改指向的檔案
這次,啾啾丸再次打開網頁的時候,終於成功了打印出她想要的效果了
補充
如果需要重新打包app.bundle.js這支檔案,那就需要再次重新輸入npx webpack -- config webpack.config.js
,這不僅僅太長,也難以記憶,好加在npm都幫你想好了,在package.js
檔案中,有個"script"
名稱的物件,裡面可以放置各式各樣的Json格式指令,讓你不需要每次都打那麼一長串。
{
...
"script": {
"build": "webpack --config webpack.config.js"
}
...
}
在這邊我設定只要以後我輸入"build",就會自動幫我執行後面的命令,因此下回我只需要打開Terminal,輸入npm run build
的指令,就會自動執行相對應的命令。
後記
這部分的文章僅是解決了一小部分的問題,還有ES6、CSS....眾多的語法糖,也須再增添指令到webpack.config.js的檔案內成功轉譯,webpack還有需要神奇且強大的功能還沒使用到,不過詳細的使用方式,等啾啾丸下次有更詳細的研究後,再寫一篇專業的操作文章來跟大家解釋吧。