[FE301] React 基礎(Class component 版):React 環境建置


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







Related Posts

C# Call API in the browser of Chrome, doesn't enter controller [Solved]

C# Call API in the browser of Chrome, doesn't enter controller [Solved]

SSTI lab

SSTI lab

Explore-Array and String

Explore-Array and String


Comments