Frontend Intermediate Course - 作業八直播筆記

這次作業都沒有問題，太好了 ヽ(●´∀`●)ﾉ

胡立老師的直播：
8. 當我們包在一起：Webpack（上）
8. 當我們包在一起：Webpack（下）

以下是看直播的筆記。

1. 什麼是 Node.js？
雖然我已經完成 Webpack 的作業，但 Node.js 到底是什麼我其實還是不清楚，只知道大概可以在後端跑 JavaScript 的東西這樣子 XD。

Node.js 的官網解釋是「Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. Node.js uses an event-driven, non-blocking I/O model that makes it lightweight and efficient. Node.js' package ecosystem, npm, is the largest ecosystem of open source libraries in the world.」，胡立老師解釋是「Node.js 可以在電腦上直接執行 JaveScript 而不用透過瀏覽器」。

Node.js 有許多內建的模組，胡立老師在直播裡示範利用 http module 建立一個簡單的伺服器，覺得厲害！

var http = require('http');

var server = http.createServer(function(req, res) {
    res.end('hello, world');
});

server.listen(3333);

2. require 跟 module.exports 的用法。
Node.js 內建許多模組，require 是叫出模組的方法；而 module.exports 是建立模組之後，輸出模組的方法。

胡立老師在直播中示範如何寫模組，以及如何在同一檔案中輸出多個東西。

var add = function (a, b) {
    return a + b;
}

function square(a) {
    return a * a;
}

module.exports = {
    add: add,
    square: square
};

然後在另一個檔案中，利用 require 叫出剛才的模組。

var obj = require('./module.js');

console.log(obj.add(10, 20), obj.square(3));

3. 叫出別人寫好的模組。
除了可以使用 Node.js 內建模組，或是使用自己寫的模組之外，還可以使用別人寫好的模組。

直播中胡立老師示範使用 Moment.js 這個別人寫好的模組，是一個跟時間有關的模組。透過 npm 就可以安裝，那 npm 又是什麼呢？

4. npm (Node Package Manager) 的解釋。
目前網路上有許多資源，別人可以把他寫好的一個功能變成模組傳上去，那要怎麼樣讓其他人可以下載使用這個模組呢？npm 就是可以讓人下載模組的一個工具。其他語言也有像 npm 這樣的工具，Python 有 pip，Ruby 有 gem。

所以當發現有好用的模組時，透過 npm 下指令就可以安裝別人寫好的模組。所有安裝好的模組都會被放到 node_modules 的資料夾內。

5. 建立專案介紹檔案 package.json。
在 cmd.exe 輸入以下的程式碼到專案根目錄後面

npm init

然後填寫專案的資料，可以為每一個專案建立專案介紹的檔案。

如果在 init 後面加入 -y 則可以省去每次填寫資料的步驟。

npm init -y

6. --save: dependencies
每次安裝套件的時候，加入 --save 的目的是要把套件的版本資料新增到 package.json 裡面，為什麼要這樣做呢？一般傳專案給別人或上傳到 Git 上面時，不會傳 node_modules 這個資料夾給別人，那別人如何知道要安裝哪些套件才可以執行你的專案呢？就要透過 package.json 這個檔案，檔案裡面的 dependencies 記錄專案裡面安裝哪些套件，而別人只需要輸入

npm install

這樣 npm 就會把所有 package.json 裡的套件都安裝好。

7. --save-dev: devDependencies
package.json 裡面除了 dependencies 之外，還有 devDependencies，如果安裝套件時是輸入 --save-dev，那個套件就會被放到 devDependencies 底下，通常 devDependencies 是開發時會用到的套件，但在前端開發沒有分那麼細，我找到一篇 Stackoverflow 的文章有說明：Difference Between Dependencies, Devdependencies and Peerdependencies，不過也是看得霧煞煞，之後有需要才研究。

8. 利用 .gitignore 避免傳送 mode_modules 資料夾上 Git。
在專案資料夾裡面創建 .gitignore 這個檔案，然後在檔案內加入 mode_modules，這樣就可以在傳送專案時避免把 mode_modules 資料夾傳上 Git （參考：gitignore）。

9. 安裝 Webpack。
安裝 Webpack 的步驟跟我上一篇的作業筆記沒有太多差別，這裡簡單帶過：
1) 安裝 Webpack 到專案根目錄下。

npm install --save-dev webpack

2) 創建及編輯 webpack.config.js。
    i) entry: 最主要的 JavaScript 檔存放位置。
    ii) output: 輸出 bundle.js 的位置。

10. 安裝 jQuery。
在作業裡我安裝完 jQuery 之後是用 Webpack 內的 plugins 定義 jQuery（在 webpack.config.js 檔案裡面加入），所以在主要的 JavaScript 檔案沒有用 require 叫出 jQuery。胡立老師示範完之後才發現其實超簡單的，當初看這篇 npm jquery 的時候好像看錯輸入的指令，所以無法成功叫出 jQuery，才改成用 Webpack 內的 plugins 定義 jQuery。

1) 安裝 jQuery 並新增版本資料到 package.json 裡。

npm jquery --save

2) 在主要 JavaScript 檔案內利用 require 叫出 jQuery。

var $ = require('jquery');

11. Babel 介紹。
Babel 是 JavaScript 的編譯器 (compiler)，因為胡立老師有用到 ES6 語法，所以需要使用 Babel 編譯。我其實對 Babel 還很陌生，因為 ES6 語法還沒有仔細學，這裡大概寫一下在安裝 Babel 跟在 Webpack 上設定 Babel loader 的步驟。

1) CLI (Command Line Interface) 安裝 Babel （參考：Babel 官網）

npm install --save-dev babel-cli babel-preset-env

2) Webpack 除了打包功能之外，還可以在打包之前做一些轉換，Webpack loaders 就是做轉換的功能，而 Babel loader 是其中之一。
    i) 安裝 Babel loader（參考：Babel-loader）。

npm install --save-dev babel-loader babel-core babel-preset-env

    ii) 在 webpack.config.js 檔裡面設定 loaders。

module: {
  rules: [
    {
      test: /\.js$/,
      exclude: /(node_modules|bower_components)/,
      use: {
        loader: 'babel-loader',
        options: {
          presets: ['env']
        }
      }
    }
  ]
}

以下簡單講解設定檔內程式碼代表的意思。
rules 表示當 Webpack 在讀取檔案時，他會先檢查是否符合 rules 底下的定義，再去套用相對應的 loader。

test: /\.js$/ 表示如果檔案是 .js 結尾，Webpack 就會套用 loader: 'babel-loader'。

exclude: /(node_modules|bower_components)/ 則表示如果 .js 檔案是在 node_modules 資料夾內就不套用 babel-loader，因為 node_modules 資料夾內通常都是 ES5 語法，所以沒有必要套用 babel-loader。

options 底下則可以傳一些額外的參數。presets: ['env'] 可以指定要 Babel 轉換哪些東西，不用全部都轉換，這樣轉換時間可以比較快，其實我也不太懂 XD 可以參考這篇：babel-preset-env：一个帮你配置 Babel 的 preset。

12. UglifyJS Webpack Plugin 介紹。
Uglify 顧名思義是把程式碼變 ugly（參考：UglifyJS Webpack Plugin），而 ugly 是怎麼個 ugly 法呢？就是把程式碼變醜，變得不容易看懂，這樣的好處是可以減少檔案大小跟增進程式安全性（因為別人不易讀懂）。

直接在 webpack.config.js 檔案內定義 UglifyJS 變數：

var uglifyJsPlugin = webpack.optimize.UglifyJsPlugin;

然後在 webpack.config.js 檔案下方加入 plugin：

 plugins: [
    new uglifyJsPlugin()
  ]

13. 快速執行 Webpack 的方法。
每次修改過 .js 檔案之後，都要輸入下面一長串才能重新打包：

.\node_modules\.bin\webpack // for windows users and not installed globally

除了上面的方法之外，還可以在 package.json 檔裡面， scripts 底下的新增執行指定：

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },

然後在 cmd.exe 裡面輸入：

npm run build

這樣就會執行 Webpack 了，不用打一長串指定。

也有其他同學提到可以用 webpack-dev-server 使用 hot reload，存檔完之後不用手動 refresh 畫面也會自動更新。不過胡立老師只有稍微帶過，我目前也不想仔細研究 XD

這次作業學到很多東西，資訊量很大，下個作業要用 Gulp，也是跟這次作業類似的做法（程式碼變動不多，但環境設定比較多），加油 QAQ