react工程

React工程搭建的脚手架很多，比较流行的，比如 Create React App，同构方案Next.js等。不过这里记录的是自己使用webpack的方式来搭建React项目的要点。
其实对于Reac项目来讲，最核心的点还是使webpack能认识.jsx和.tsx文件并能正确解析。
所以其核心还是借助babel-loader。针对react项目，babel有专门的预设集集 @babel/preset-react 。

.jsx文件正确解析

yarn add -D webpack webpack-cli babel-loader @babel/core @babel/preset-react
yarn add react react-dom

配置babel

module.exports = {
  mode: 'development',
  entry: "./src/index.jsx",
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.jsx$/,
        loader: "babel-loader",
        options: {
          presets: ["@babel/preset-react"],
        }
      },
    ],
  },
};

这样一个最基本的react项目就能run起来了。
编写react代码

import ReactDom from 'react-dom/client'
import React from 'react'
import App from './app'
// react v18
const root = ReactDom.createRoot(
  document.getElementById('root')
)
root.render(<App />)

import React, { useEffect } from 'react'
export default function Index() {
  useEffect(() => {
    console.log('App mounted')
  }, [])
  return (
    <div>React app</div>
  )
}

执行 yarn build （配置build script为 webpack就行），可以正确打包。

.tsx文件正确解析

使用ts-loader

yarn add -D typescript ts-loader

webpack.config.js中增加rules:

module.exports = {
  resolve: { // 不用 import 的时候写后缀了
    extensions: ['.js', '.jsx', '.ts', '.tsx'],
  },
  module: {
    rules: [
      // ....
      {
        test: /\.tsx$/,
        use: 'ts-loader',
      },
    ],
  }
};

增加tsconfig对jsx的支持

{
  "compilerOptions": {
    //...
    "jsx": "react-jsx"
  }
}

使用 @babel/preset-typescript

yarn add -D typescript @babel/preset-typescript

修改rules

module.exports = {
  module: {
    rules: [
      {
        test: /\.tsx$/,
        loader: 'babel-loader',
        options: {
          'presets': [["@babel/preset-react", {
            "runtime": "automatic"
          }],
          '@babel/preset-typescript']
        }
      },
    ],
  },
}

runtime:automatic设置之后就不需要引入react了（import React from “react”）。

其他

一个React 项目肯定不止是这些了，不过核心就基本上是这些。至于除此之外的可以参考其他范畴的配置，比如devServer，css等。

一般情况下，开发react项目也很少有人自己从0开始构建。
create-react-app 是官方脚手架，不过想要改配置麻烦一点，以前需要eject，现在可以借助craco帮助开发者在不eject的情况下修改。
umi.js、next.js等方案也都是社区活跃，开箱即用的选择。