手动搭建React App项目框架

吴灿同学
1,899 阅读4分钟

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

Setup

  1. 新建一个目录，进入目录

  2. 执行npm init命令初始化package.json文件

    • 如果想直接使用默认值，可以使用npm init -y命令

  3. 执行git init命令初始化仓库

  4. 新建public和src文件夹

    • public用来存放项目中创建的静态资源assets和index.html文件

  5. 新建.gitignore文件，上传代码时忽略node_modules和dist文件夹下的文件

    • 可以在vscode中选中需要忽略的文件或文件夹，右键选择GIT:Ignore this file\folder

    • 也可以在.gitignore文件中手动添加如下代码，如果没有生效，可以重启vscode查看

      node_modules
dist

    • 更多：【廖雪峰的官方网站】忽略特殊文件

  6. 在public目录下添加index.html文件，react用这个文件渲染应用程序

    • 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

  1. 执行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

  2. 在项目根目录下创建.babelrc文件，添加presets配置

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

    更多：【简书】你真的会用babel吗？

Webpack

  1. 执行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

  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

  1. 执行npm install --save-dev react@16.5.2 react-dom@16.5.2命令

  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"));

  3. 在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;

  4. 创建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

  1. 在package.json文件中的script配置项中添加"start": "webpack-dev-server --mode development"语句
  2. 执行npm start即可启动webpack-dev-server

完成HMR部分

  1. 执行npm install --save-dev react-hot-loader@4.3.11命令

    • 可以将react-hot-loader安装为常规依赖项而不是dev依赖项，因为它会自动确保它不会在生产中执行且占用空间很小

  2. 在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"。
avatar
文章
阅读
粉丝