手動搭建React App項目框架

時間 2019-11-09

標籤手動搭建 react app 項目框架欄目 React 简体版

原文原文鏈接

本文參考：Creating a React App… From Scratch.javascript

Setup

新建一個目錄，進入目錄css
執行npm init命令初始化package.json文件html
- 若是想直接使用默認值，可使用npm init -y命令
執行git init命令初始化倉庫java
新建public和src文件夾node
- public用來存放項目中建立的靜態資源assets和index.html文件
新建.gitignore文件，上傳代碼時忽略node_modules和dist文件夾下的文件react
- 能夠在vscode中選中須要忽略的文件或文件夾，右鍵選擇GIT:Ignore this file\folderwebpack
- 也能夠在.gitignore文件中手動添加以下代碼，若是沒有生效，能夠重啓vscode查看git
```
node_modules
dist
複製代碼
```
- 更多：【廖雪峯的官方網站】忽略特殊文件web

在public目錄下添加index.html文件，react用這個文件渲染應用程序npm

index.html文件中內容以下：

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>React Starter</title>
</head>

<body>
  <div id="root"></div>
  <noscript>
    You need to enable JavaScript to run this app.
  </noscript>
  <script src="../dist/bundle.js"></script>
</body>

</html>
複製代碼

<div id="root"></div>是React app將要掛載的節點
<script src="../dist/bundle.js"></script>，bundle.js文件引用了構建好的應用程序

Babel

執行npm install --save-dev @babel/core@7.1.0 @babel/cli@7.1.0 @babel/preset-env@7.1.0 @babel/preset-react@7.0.0命令
- --save和--save-dev能夠自動將模塊和版本號添加到package.json文件中的dependencies或devDependencies部分
- babel-core：babel的核心，如需任何轉碼都須要引入它
- babel-cli：命令行轉碼
- babel-preset-env：plugins的組合，將ES6轉換爲ES5等
- babel-react：將react轉換成JSX
在項目根目錄下建立.babelrc文件，添加presets配置
```
{
  "presets": ["@babel/env", "@babel/preset-react"]
}
複製代碼
```
更多：【簡書】你真的會用babel嗎？

Webpack

執行npm install --save-dev webpack@4.19.1 webpack-cli@3.1.1 webpack-dev-server@3.1.8 style-loader@0.23.0 css-loader@1.0.0 babel-loader@8.0.2
在項目根目錄下建立webpack.config.js文件，內容以下：
```
const path = require("path");
const webpack = require("webpack");

module.exports = {
  entry: "./src/index.js",
  mode: "development",
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /(node_modules|bower_components)/,
        loader: "babel-loader",
        options: { presets: ["@babel/env"] }
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      }
    ]
  },
  resolve: { extensions: ["*", ".js", ".jsx"] },
  output: {
    path: path.resolve(__dirname, "dist/"),
    publicPath: "/dist/",
    filename: "bundle.js"
  },
  devServer: {
    contentBase: path.join(__dirname, "public/"),
    port: 3000,
    publicPath: "http://localhost:3000/dist/",
    hotOnly: true
  },
  plugins: [new webpack.HotModuleReplacementPlugin()]
};
複製代碼
```
- entry指定打包的入口文件
- mode指定是development環境仍是production環境。腳手架沒有這一項，由於它區分了dev.conf.js和prod.conf.js
- module用於配置loader，loader用於對模塊的源代碼進行轉換，能夠將文件從不一樣的語言（如 TypeScript）轉換爲JavaScript，或將內聯圖像轉換爲data URL，以及加載CSS文件等
- resolve配置模塊如何解析
- output配置如何輸出、以及在哪裏輸出bundle、asset 和其餘打包或使用 webpack 載入的任何內容
  - path對應一個絕對路徑
  - publicPath指定在瀏覽器中所引用的此輸出目錄對應的公開URL
- devServer指定影響webpack-dev-server（簡寫爲devServer）行爲的選項
  - contentBase告訴服務器從哪一個目錄中提供內容，只有要提供靜態文件時才須要
  - publicPath配置的路徑下的打包文件能夠在瀏覽器中訪問，上述配置中可經過http://localhost:3000/dist/bundle.js訪問bundle。bundle.js對應的是output.filename
  - hotOnly設置爲true時表示容許使用模塊熱替換（Hot Module Replacement）

React

執行npm install --save-dev react@16.5.2 react-dom@16.5.2命令

在src目錄下新建index.js文件，並添加以下代碼將React app掛載到index.html文件的root節點上

import React from "react";
import ReactDOM from "react-dom";
import App from "./App.js";
ReactDOM.render(<App />, document.getElementById("root")); 複製代碼

在src目錄下繼續建立另一個文件App.js

import React, { Component} from "react";
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App"> <h1> Hello, World! </h1> </div>
    );
  }
}

export default App;
複製代碼

建立App.css文件

.App {
  margin: 1rem;
  font-family: Arial, Helvetica, sans-serif;
}
複製代碼

完整的目錄結構

.
+-- public
| +-- index.html
+-- src
| +-- App.css
| +-- App.js
| +-- index.js
+-- .babelrc
+-- .gitignore
+-- package-lock.json
+-- package.json
+-- webpack.config.js
複製代碼

啓動React App

在package.json文件中的script配置項中添加"start": "webpack-dev-server --mode development"語句
執行npm start便可啓動webpack-dev-server

完成HMR部分

執行npm install --save-dev react-hot-loader@4.3.11命令
- 能夠將react-hot-loader安裝爲常規依賴項而不是dev依賴項，由於它會自動確保它不會在生產中執行且佔用空間很小

在App.js文件中導入react-hot-loader並經過修改代碼將導出的對象標記爲熱加載，代碼以下：

import React, { Component} from "react";
import {hot} from "react-hot-loader";
import "./App.css";

class App extends Component{
  render(){
    return(
      <div className="App"> <h1> Hello, World! </h1> </div>
    );
  }
}

export default hot(module)(App);
複製代碼

最後一個細節

構建的文件沒有顯示在dist目錄中，緣由是webpack-dev-server其實是從內存中提供打包文件 —— 一旦服務器中止，打包文件就會消失。若是要實際構建文件，須要正確使用webpack——在package.json的"script"配置項中添加："build"："webpack --mode development"。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。