最會翻譯的webpack


Posted by paper.hsiao on 2020-08-02

啾啾丸是一位程式員。

在業餘之時,她也會不斷的發掘新知識,運動、美食、參加比賽樣樣都來…,就是人家說的斜槓青年,只是他的斜角度可能過大了一點。

小明有一天在使用...歐不對,文章的主角是啾啾丸。

有天啾啾丸又開啟了他她的筆電,打開了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的出現

webpack
因為網路的大神太多了,JS有ES6,CSS有SASS、SCSS,有各式各樣不同的工具讓開發者在開發網頁時更加的便利,而WebPack的誕生就是將所有的工具都轉成讓瀏覽器看得懂的語言。

啾啾丸迫不及待的去下載webpack來試試看這個強大的功能,在這邊啾啾丸知道如果要下載webpack的話,需要使用npm去安裝,而npm是 Node.js 的套件(package)管理工具,如果安裝了node.js的話,自然就有npm的功能了,因此啾啾丸就做了幾個步驟

啾啾丸的步驟

  1. 去Node.js網站下載,然後安裝Node.js
  2. 然後在命令提示字元上打上node -vnpm -v來確認都有安裝成功
  3. 啾啾丸因為有自己喜歡的格式,所以創造了一個屬於他的資料夾風格
  4. 接下來使用vscode打開專案資料夾,使用ctrl + ~打開Terminal介面,數入npm init來初始化資料夾,然後因為在初始化時需要填入一些資訊,懶惰的啾啾丸因為覺得很麻煩,全部都點Enter直接下一步,然後就在資料夾內產生了一個package.json檔案
  5. 接下來輸入npm install --save-dev webpack webpack-cli來安裝webpack,並在根目錄創建webpack.config.js檔案
  6. 接下來就是需要去設定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:產出後的檔案位置

  7. 接下來就可以在Terminal中輸入npx webpack --config webpack.config.js產出app.bundle.js

  8. 因為啾啾丸原本在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還有需要神奇且強大的功能還沒使用到,不過詳細的使用方式,等啾啾丸下次有更詳細的研究後,再寫一篇專業的操作文章來跟大家解釋吧。


#Front End Web Development #Webpack







Related Posts

MTR04_0620

MTR04_0620

MTR04_1109

MTR04_1109

Command Line 初學

Command Line 初學


Comments