手动搭建React项目脚手架(一)

头像为自己开发微信小程序

已于 2023-12-12 16:58:27 修改

阅读量2k

点赞数

分类专栏：脚手架文章标签： reactjs

于 2022-03-05 12:41:38 首次发布

本文链接：https://blog.csdn.net/qq_33715850/article/details/123290090

版权

脚手架专栏收录该内容

17 篇文章 1 订阅

订阅专栏

代码仓库地址

1 创建目录执行npm init,

2 执行npm install react react-dom --save

在React 0.14之前的版本，我们使用React Web相关的能力的时候，只需要引入一个JS文件， react.js, 但React 0.14之后(包括0.14), react的设计团队为了将React的应用场景更加细化，同react-native, react-art, react-canvas, react-three 等形成并行，将React Web的能力拆分成了 react.js, react-dom.js 并将DOM操作相关的接口，放在了react-dom.js的ReactDOM对象上，所以涉及一些API的变更：

React.render 变成了 ReactDOM.render

React.findDOMNode 变成了 ReactDOM.findDOMNode等

至于React.render 这些在0.14.X的版本还能用，但是会有warning提示消息

3 执行npm i webpack webpack-cli webpack-dev-server -D

webpack：是一个用于现代 JavaScript 应用程序的 静态模块打包工具。

webpack-cli：提供了许多命令来使 webpack 的工作变得更简单。

4 根目录创建 webpack.config.js

const path = require("path");
module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index.bundle.js",
  },
};

5 创建入口文件src-index.js

6 在根目录创建src-pages-document.ejs（打包生成html模版文件，umi生成html模版文件也是这个目录）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="keywords"
      content="antd,umi,umijs,ant design,脚手架,布局, Ant Design,项目,Pro,admin,控制台,主页,开箱即用,中后台,解决方案,组件库"
    />
    <meta
      name="description"
      content="
    An out-of-box UI solution for enterprise applications as a React boilerplate."
    />
    <meta
      name="description"
      content="
      开箱即用的中台前端/设计解决方案。"
    />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title><%= htmlWebpackPlugin.options.title %></title>
    <link
      rel="icon"
      href="<%= context.config.publicPath +'favicon.ico'%>"
      type="image/x-icon"
    />
  </head>
  <body>
    <noscript>Out-of-the-box mid-stage front/design solution!</noscript>
    <div id="root">
    </div>
    <div id="selfDefined"></div>
  </body>
</html>

7 执行 npm i html-webpack-plugin -D （动态生成编译后的html）

配置webpack.config.js

执行npm run build打包成功。

接下来开始写代码，请看手动搭建React项目脚手架(二)

推广一下自己开发的微信小程序，有兴趣的朋友可以玩一玩