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

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

使用 webpack
使用 babel 並跟 Webpack 掛勾
開始使用 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.json 的 scripts設定
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' 囉！

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

第二步：開始使用 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)-安裝執行篇

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

KevinCodePlace

你可能感興趣的文章

留言討論

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

KevinCodePlace

你可能感興趣的文章

匯入小工具 (0) - csv 該怎麼匯入資料庫？你有這困擾嗎？

[Bug Record] — binary classification accuracy converges to 0.5

F2E合作社｜卡片組件｜Bootstrap 5網頁框架開發入門

留言討論