iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 8
3
Modern Web

從比入門再往前一點開始,一直到深入React.js系列 第 8

【Day.08】React入門 - 環境設定 - npm、Webpack、Babel

環境設定 - 前言

前面說過,React是Facebook開發的一套Library。可是瀏覽器沒有那麼聰明,不會因為地球上每多一個人開發了框架就認得他,那怎麼辦呢?

這個時候我們就需要打包工具編譯器

打包工具可以幫我們把多個Javascript檔案合併成一個或多個檔案。這就解決了我們先前提過太多Javascript檔夾雜在HTML中的問題。

而編譯器的概念在其他非直譯語言很常見。以C語言舉例來說,本來一般電腦只認得0和1,所以開發者只好做出一個「轉換器」,先把C語言先轉換成組合語言,再把組合語言對應到電腦認得的0和1序列組合。這個轉換器就稱為「編譯器」。

Javascript是屬於一種比較特別的直譯語言。因為本系列不是在上編譯器原理,所以我們不探討直譯語言和非直譯語言的差別,總而言之就是「瀏覽器認得它」。而現在我們之所以會需要編譯器,就是為了把React對應到Libary的程式碼抓出來,轉換成原生的Javascript。

環境設定 - 安裝npm

以前專案小的時候我們會習慣透過script使用CDN引入外部函式庫,但現在專案長大了外部套件很多的時候就不適合這樣使用。

npm是「套件管理系統」。簡單來說,你可以用它下載、管理許多別人已經寫好的函式庫,所以現在就是要用npm來取得Facebook寫好的React。

請到這裡進行下載Node.js並安裝,npm會一起被安裝。
安裝完請務必重新開機

接下來的環境安裝會比較複雜一點,如果你希望先熟悉React.js,但看以下內容感到挫折、看不懂,可以先參考 【React.js入門 - 01】 前言 & 環境設置(上)的create-react-app作法,熟悉React後再來慢慢研究專案設定的意義。

環境設定 - 安裝、設定webpack

webpack是目前最通用的打包工具。現在我們要透過npm來取得它。npm安裝套件的方式為

npm install 套件名稱
npm i 套件名稱

1. 請打開終端機/CMD,依序輸入

npm install webpack -g
npm install webpack-cli -g

webpack就會被安裝完成。這裡使用 -g 代表安裝在整台電腦上,沒有使用的話則是只安裝在專案中。

2. 接著,請切換到你想要開發的專案目錄底下(切換目錄指令為 cd 資料夾名稱),輸入:

npm init

此時專案資料夾底下會出現package.json這個檔案,這個檔案可以用來處理、紀錄安裝套件的相關設定。當今天我們換電腦時,只要在有package.json的專案目錄底下輸入 npm i或是npm install,專案用到的套件就會一次裝好。

3. 現在,請輸入:

npm install webpack webpack-cli --save-dev

你會發現package,json裡面多了這幾行

  "devDependencies": {
    "webpack": "^4.44.2",
    "webpack-cli": "^3.3.12"
}

這個devDependencies就是用來記錄專案有什麼套件、版本是什麼。

此外還會在專案看到node_modules,這個資料夾就是用來放我們載下來的函式庫。如果有使用git的朋友請記得把他加到.gitignore中,不然你會後悔

接著,就是來設定要如何打包了。

4. 在專案根目錄新增webpack.config.js,並輸入以下內容:

  • webpack.config.js
const path = require('path');
module.exports = {
    entry: { 
        index: './src/index.js' // 從哪裡開始打包
    },
    output: { 
        filename: 'bundle.js', // 要打包成什麼
        path: path.resolve('./build'), // 要打包在哪裡
    }
};

這樣就完成了打包工具的設定,做的事情是把./src/index.js和其引入的所有js檔案打包成一個bundle.js並放在./build資料夾中。

現在我們來測試是否打包成功。

5. 新增src資料夾,在裡面創建index.js並輸入以下內容:

  • src/index.js
document.write("hello world!");

6. 新增build資料夾,在裡面新增index.html,並輸入以下內容:

  • build/index.html
<!DOCTYPE html>
<html lg="zh-tw">
    <head>
        <meta charset="utf-8"/>
        <title>12屆鐵人賽</title>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
        <link rel=stylesheet type="text/css" href="./css/index.css">
    </head>
    <body>
        <div id="root">
        </div>
    </body>
    <script src="./bundle.js" type="text/javascript"></script>
</html>

~到這裡我們就完成打包的工作了。在終端機輸入webpack -p後,開啟./build/index.html,你會看到~
(2021/04/07更新webpack v4的新打包指令)
到這裡我們就完成打包的工作了。在終端機輸入webpack --mode production後,開啟./build/index.html,你會看到

另外,你也可以在package.json中新增以下內容

  • package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production" //加入這一行
  },

之後輸入以下指令,就會做等同webpack -p的動作。

npm run build

環境設定 - 安裝React與對應的Babel

Babel就是我們要使用的編譯器名稱,請依序輸入以下指令

npm install react react-dom --save
npm install babel-loader --save-dev
npm install @babel/core --save-dev

React和Babel就會被裝好。但因為Babel不只可以編譯React,所以Babel把支援的編譯Libary個別拉出來變成獨立套件了。請繼續輸入:

npm install @babel/preset-react --save-dev
npm install @babel/preset-env --save-dev

@babel/preset-react是編譯React的套件,@babel/preset-env是編譯ES6+的套件。

最後,我們要告訴打包工具,把所有的js檔都用Babel編譯過:

  • webpack.config.js
const path = require('path');
module.exports = {
    entry: {
        index: './src/index.js'
    },
    output: {
        filename: 'bundle.js',
        path: path.resolve('./build'),
    },
    // --------- 新增以下內容 -----------
    module: {
        rules: [
            { 
                test: /.js$/,
                exclude: /node_modules/, //不編譯的檔案
                use: { 
                    loader: 'babel-loader',
                    options: { 
                        presets: ['@babel/preset-react', '@babel/preset-env'] 
                    } 
                } 
            },
        ]
    }
};

到這裡,開發React必備的環境就都準備完成了。

小結 - 最難的永遠是環境設定

環境設定永遠是做起來最難,又最沒有成就感的事情。如果這裡有遇到無法解決的地方,可以改用去年我的文章中使用官方模板create-react-app的方式,等熟悉React之後再回過頭來研究這個。


上一篇
【Day.07】React入門 - 簡介React、從class到Hook的發展歷史
下一篇
【Day.09】React入門 - Hello world、React virtual DOM、webpack-dev-server
系列文
從比入門再往前一點開始,一直到深入React.js30

1 則留言

0
Sonic
iT邦新手 5 級 ‧ 2021-04-07 14:36:02

看來 Webpack 改了, 不打用輸入 -p
[webpack-cli] Error: Unknown option '-p'

Hi, 我剛剛查了一下,的確在webpack v4中,

webpack -p

被改為了

webpack --mode production

可以參考這篇webpack-cli issue的討論

Sonic iT邦新手 5 級 ‧ 2021-04-07 16:46:59 檢舉

謝謝解答

我要留言

立即登入留言