手动搭建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"。