[FE301] React 基礎（Class component 版)：React 環境建置

#React #environment

Posted by s103071049 on 2021-09-02

  1. webpack
  2. babel

前置作業：webpack

寫 react 會用到 import，所以會需要 webpack 來做 bundle，將所有檔案都打包在一起。

  1. npm init -> 產生 json.package
  2. npm install --save-dev webpack
  3. npm install --save-dev webpack-cli
  4. 準備 index.js (主要檔案)、utils.js (測試 import 有無成功)，開 src 資料夾將這兩個檔案都放在這裡
  5. webpack.config.js (webpack 打包會先看這個檔案)，這個設定檔會輸出一個物件
  6. 調整 package.json：要在開發模式、production 模式下都可以打包
  7. npm run start
// utils.js 用 export 將 function 給 export 出去
export function log(str) {
  console.log(str)
}

// index.js
import {log} from './utils'
log('hello world')

重點在 webpack.config.js 的設定檔，他是 webpack 的核心

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js', // 入口點
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
    // 輸出的位置在我現在的資料夾底下，path.join 會將路徑合併
    // 希望在我現在的資歷夾底下再開一個資料夾叫 dist
  }
}

// index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./dist/bundle.js"></script>
</head>
<body>
  hello
</body>
</html>

前置作業：babel

現在寫的 code 通常是 es6，但很多的瀏覽器尚未支援 es6，所以要先將他打包成 es5。

  1. npm install -D babel-loader @babel/core @babel/preset-env webpack，babel-loader 是給 webpack 使用，將 babel 與 webpack 串起
  2. 建立 bable 設定檔，.babelrc -> 用那些設定檔去打包 "presets": ["@babel/preset-env"]
  3. webpack 設定 loader 讓 babel 融進 webpack -> .js 的檔案，用 babel loader 融近來，上述規則排除 node module
  4. npm run start
// .babelrc
{
  "presets": ["@babel/preset-env"]
}

// src 裡面的 index.js
import {log} from './utils'
const obj = {
  text : 'hello !!!'
}
const {text} = obj
log(text)

// webpack.config.js
const path = require('path')

module.exports = {
  entry: './src/index.js', // 入口點
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.js'
    // 輸出的位置在我現在的資料夾底下，path.join 會將路徑合併
    // 希望在我現在的資歷夾底下再開一個資料夾叫 dist
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use : {
          loader: 'babel-loader'
        }
      }
    ]
  }
}

把 React 加進來

  1. npm add react react-dom @babel/preset-react 因為也需要透過 babel 解析一些語法
    2..babelrc 加上 "@babel/preset-react"
// .babelrc
{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
  1. src 裡面開新檔，App.js
  2. 調整 index.js
  3. npm run start
// src 裡面開新檔，App.js
// 寫 component
import React, {Component} from 'react' // 將 default 引入，將 component 引入

class App extends Component {
  render() { // 每個 component 都會有 render 這個 function
    return ( // return 輸出的內容
     <h1>hello world</h1>
    )
  }
}

// export 出去
export default App

// index.js
import React from 'react'
import ReactDOM from 'react-dom'
import App from './App'

// render 哪個 component 到哪里
ReactDOM.render(<App />, document.getElementById("root"))

// index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  hello
  <div id="root"></div>
  <script src="./dist/bundle.js"></script>
</body>
</html>

每次改一個東西，都很麻煩，需要存檔重跑 npm run start，再重新整理頁面。有待優化。

webpack dev server

一、filename: 'bundle.js'，瀏覽器有時會將檔案給 cached 住，filename: 'bundle.[hash].js'，webpack 會將檔案變成 hash 檔名的一部分。

存檔後 run npm start 中間出來的檔案就會有 hash。ex：bundle.7caacaf517cfed259492.js

只要改 js 檔案，出來檔名就會不一樣。所以可以保證出來的檔案永遠都會不同。所以 dist 就會有 bundle.7caacaf517cfed259492.js

但每次產生出來的檔名不同，index.html 要怎麼寫？才能讓他每次都 load 最新的檔案

答：透過　npm i --save-dev html-webpack-plugin　這個 plugin。透過提供的檔案，生成相對應的 html 檔案。

// webpack.config.js
const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  entry: './src/index.js', // 入口點
  output: {
    path: path.join(__dirname, '/dist'),
    filename: 'bundle.[hash].js'
    // 輸出的位置在我現在的資料夾底下，path.join 會將路徑合併
    // 希望在我現在的資歷夾底下再開一個資料夾叫 dist
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use : {
          loader: 'babel-loader'
        }
      }
    ]
  },
  plugins: [
   new HtmlWebpackPlugin({
    template: './index.html' // 裡面給的參數就是 template 的位置
   })
  ]
}

<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  hello
  <div id="root"></div>
</body>
</html>

調整好變動後，再 npm run start。發現 dist 資料夾中多了 index.html，點開該檔案後的內容也完全正確，<script defer src="bundle.7cdcd959ee53d6112541.js"></script> 幫你加上這個。

二、每次打開都要 build、打開檔案，這樣有點麻煩。能否做到一存檔畫面就自己更新？

答：透過 npm install webpack-dev-server --save-dev，改 package.json 裡面的 script 的 "start": "webpack-dev-server --mode development --open --hot"。

當 run npm start 會幫我打開一個新的視窗，同時 app.js 的變動存檔，視窗的畫面就立刻改變。他會一直更新。

小結 react 環境建置

  1. webpack
  2. babel
  3. react
  4. html template
  5. webpack dev server

另一個選擇：create react app

官方提供另一個懶人包的建置環境方式：Create React App

  1. npm init
  2. npx create-react-app my-app，裝好後 cd my-app 然後 npm start 就會將東西跑起

#React #environment

s103071049




Related Posts

JavaScript 預編譯

JavaScript 預編譯

 hata0833
MTR04_1004

MTR04_1004

 cwc329
Day03：從迴圈看 bytecode

Day03：從迴圈看 bytecode

 huli

Comments