react-脚手架搭建项目、vite搭建项目

在学习react的时候，搭建项目常用的方式有两种：react脚手架和vite。接下来就简单介绍两种方式搭建一个react项目：

react脚手架：

首先，要安装node，node版本14及以上，然后全局安装react脚手架。

之后，执行命令安装即可

create-react-app app

然后，到app目录下启动服务

npm start

接下来，安装ui库，antd，执行命令

npm i antd

如需配置按需加载，还要安装如下依赖

npm i react-app-rewired customize-cra babel-plugin-import

src目录创建config-overrides.js，加入如下配置

const {override, fixBabelImports} = require('customize-cra');

module.exports = override(
    // 针对antd实现按需打包，根据import来打包（使用babel-plugin-import）
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true, // 自动打包相关的样式
    }),
);

package.json修改如下配置

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
},

至此，一个简单的react+antd框架就搭建完成了。如果要加入less，则执行如下命令：

npm i less less-loader@5

src目录config-overrides.js，修改为如下配置

const {override, fixBabelImports, addLessLoader} = require('customize-cra');

module.exports = override(
    // 针对antd实现按需打包，根据import来打包（使用babel-plugin-import）
    fixBabelImports('import', {
        libraryName: 'antd',
        libraryDirectory: 'es',
        style: true, // 自动打包相关的样式
    }),
    // 使用less-loader对源码中的less的变量进行重新指定，修改默认样式
    addLessLoader({
        javascriptEnabled: true,
        modifyVars: {'@primary-color': '#1DA57A'},
    }),
);

到这里，react脚手架搭建的基础项目就完成了。

vite搭建

首先，下载vite，然后执行如下命令

npm init vite@latest

根据提示，选择react，然后选择js,等待初始化，之后会生成vite-project文件夹，进入使用终端打开下载依赖。然后执行命令启动项目：

npm run dev

然后加入antd及按需加载插件

npm i antd
npm i vite-plugin-imp 

配置vite.config.js文件

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginImp from 'vite-plugin-imp'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name)=>`antd/es/${name}/style`,
        }
      ]
    })
  ],
})

如需使用less,再加入其依赖，可配置修改默认样式

npm i less
npm i less-loader@5.0.0

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
import vitePluginImp from 'vite-plugin-imp'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    vitePluginImp({
      libList: [
        {
          libName: 'antd',
          style: (name)=>`antd/es/${name}/style`,
        }
      ]
    })
  ],
  css:{
    preprocessorOptions:{
      less:{
        javascriptEnabled:true,
        modifyVars:{
          '@primary-color': '#7675fe'
        }
      }
    }
  }
})

"less": "^3.13.1",
"less-loader": "^5.0.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "5"

至此，使用vite就搭建成了一个简单的react项目了。