如何不使用 create-react-app 自己打造應用程式


這篇文主要是希望在手邊不能直接使用 create-react-app 的時候,還可以土法煉鋼的打造開發環境而不會手足無措。
React 環境建置主要是要認識 Webpack 跟 Babel。所以以下內文分成三部分:

  1. 使用 webpack
  2. 使用 babel 並跟 Webpack 掛勾
  3. 開始使用 React,並跟 webpack 和 babel 掛勾

需要 webpack 的主要原因是我們在 React App 內需要 import/export 內容,這時就需要 webpack 幫助我們打包成 Bundle;使用 Bable 原因是我們之後開發會有 ES6 語法,但不一定每個瀏覽器都支援,於是我們就需要使用 Babel 幫忙轉譯。

第一步:開始使用 webpack

首先呢,我們需要安裝 webpack,於是就在 git bash 下指令,並且安裝 webpack 以及 webpack-cli

npm init
npm install webpack webpack-cli

接著我們用 utils.js 以及 index.js 來測試 webpack 是否成功引入
util.js

//
export function log(str) {
  console.log(str);
}

index.js

import { log } from "./utils";
log("hello world");

這樣只要當我們在 console 內看到印出 'hello world' 就代表成功引入 webpack!

接著我們要設定最重要的 webpack 的部分,依慣例我們會把這個設定檔取名為 webpack.config.js,並且慣例上會把打包的來源放進src資料夾,所以目前的檔案架構會是這樣
├─src
│ └─index.js
│ └─utils.js
├─webpack.config.js
├─index.html
├─package.json
webpack.config.js

//需要靠 path的 api來搬移檔案
const path = require("path");
//開始設定
module.exports = {
  //給檔案來源
  entry: "./src/index.js",
  //輸出位置與名稱
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  }
};

而因為要執行這段指令,於是我們還得去更改 package.jsonscripts設定
package.json

.
.
  "main": "index.html",
  "scripts": {
     "start": "webpack --mode develpoment", 
     "build": "webpack --mode production"
 .
 .
 .

接著在終端機輸入

npm run start

我們的資料夾結構就會變成
├─src
│ └─index.js
│ └─utils.js
├─dist
│ └─bundle.js
├─webpack.config.js
├─index.html
├─package.json

再來去 index.html 引入我們的 bundle,就可以看看有沒有成功囉!
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Hello</title>
        <meta charset="UTF-8" />

  </head>
  <body>
      <div id="app"></div>
      <script src="./dist/bundle.js"></script>
  </body>
</html>

接著把 index.html 打開,就會看到 console 裡面成功印出'Hello world' 囉!
index.html

那第一步到此就算成功了!

第二步:開始使用 Babel

首先呢,也是先下載 Babel,在終端機輸入

npm install @babel/core babel-loader @babel/preset-env
//註:babel-loader 就是跟 webpack 要搭上線需要的內容

再來設定 Babel 的設定檔,我們取名為 .babelrc
.babelrc

{
  "presets": [
    ["@babel/preset-env"]
  ],
}

並且再去設定 webpack 檔案,讓 babel 可以在 webpack 打包的時候轉譯語法
webpack.config.js

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.join(__dirname, "/dist"),
    filename: "bundle.js"
  },
  module: {
    rules: [{
      test:/\.js$/, //2. 偵測所有 js 結尾的檔案
      exclude:/node_modules/, //3.排除 node_modules
      use: {
        loader:'babel-loader' //1. 使用 babel-loader
      }
    }]
  }
};

到這裡,我們第二步也成功使用 babel 了!來看看現在的資料夾結構
├─src
│ └─index.js
│ └─utils.js
├─.babelrc
├─webpack.config.js
├─index.html
├─package.json

第三步:把 React 加進來!

那這同時也是最後一步,我們需要使用 react 也是需要下載一些東西,在終端機輸入

npm install react react-dom @babel/preset-react

此時我們要去 .babelrc 加入解析 react 的內容
.babelrc

{
  "presets": [
    ["@babel/preset-env","@babel/preset-react"]
  ],
}

此時我們就可以開始寫簡單的 react,新增一個 App.js
App.js

import React from "react";

const App = () => {
  return <h1>Hello React</h1>;
};

export default App;

並且去修改 index.js
index.js

import React from "react";
import ReactDom from "react-dom";
import App from "../App";

ReactDom.render(<App />, document.getElementById("root"));

來執行看看結果,終端機輸入

npm run start

太好了,有輸出 Hello React,那這個時候就大功告成拉!
Create React App without create-react-app @ codepen

參考資料:
[FE301] React 基礎(Class component 版)
Webpack教學 (二) :檔案你要去哪裡?
[筆記][React]從零到一的webpack開發環境(1)-安裝執行篇

#React #create-react-app #babel #Webpack #自我學習






Related Posts

string 類型的內建函式

string 類型的內建函式

DOM 的事件傳遞機制:捕獲與冒泡

DOM 的事件傳遞機制:捕獲與冒泡

JavaScript  與瀏覽器的溝通 : DOM

JavaScript 與瀏覽器的溝通 : DOM




Sponsored



Comments