Vite + React + tailwindcss + ts + 多Nodejs环境... 速搭

最近接触了前端代码，作为一个后端，能将其搭起来并用于生产，我感到很是欣慰。

本文纯安装速记与关键点记录，适合有一定经验且对前端React及生态有一些小了解，想要快速的将一个框架搭建起来的童鞋。可当成一个指引。

Node.js环境安装

本地搭建可支持多个Node.js版本切换的工具。这里笔者使用的工具是NVM。该工具支持多种操作系统，目前以windoows为例来说明。

tip: NVM用于切换多个node版本，比node要先安装，后面node由nvm来安装。

NVM安装

进入官网http://nvm.uihtm.com/ 下载

解压下载，双击安装

检查装情况, 在控制台输入 nvm version，有版本输出即说明安装成功。

nvm version

# ---
# Running version 1.1.10.

tip: 安装之后，会自动生成两个环墒变量: NVM_HOME和NVM_SYNLINK, 指定安装路径以及Node关联路径。

用nvm安装nodejs

# 查询可获得的版本列表
nvm list available  

# 安装指定版本的node
nvm install node16
nvm install node18
nvm install node2?

注意事项： 一定要先安装nvm，如果后端版本切换会不成功，请多试几次，比如卸掉node重来一遍。

常用功能

列出在用版本

nvm list 

# 带*号和"Currently ...)为当前在用nodejs
# 控制台输出  
# 18.18.0  
# * 16.20.2 (Currently using 64-bit executable)  
#  14.21.3  

版本切换

nvm use 16

# 切换到第 16版

前端框架速搭

起步: node > pnpm + yarn

# 工具

npm i -g pnpm yarn typescirpt
pnpm create vite my-react-app --template react-ts
cd my-react-app
pnpm install

笔记最爱yarn，目前pnpm性能高出好几倍，所以两个会一起用。

必备组件

安装

#ant-design 
pnpm add antd @ant-design/icons

### atailwind css
pnpm add -D tailwindcss postcss autoprefixer 
npx tailwindcss init 

## 
pnpm i crypto-js 
pnpm i axios
pnpm i react-redux react-router-dom 

## 优化器与path
pnpm i vite-plugin-optimizer path -D

## 改变控制台颜色 -- 用于vitePluginStart.ts插件-在控制打印输出Ascii图
pnpm i picocolors

配置-tailwind.config.js

/** @type {import('tailwindcss').Config} */

module.exports = {
  content: [
    "./index.html",
    "./src/**/*.{html,js,ts,jsx,tsx}"
  ],
  theme: {
    screens: {
      xs: '457px',
      sm: '480px',
      md: '768px',
      lg: '976px',
      xl: '1440px',
    },
    colors:{
      transparent: 'transparent',
      current: 'currentColor',
      dark: 'rgba(0, 0, 0, 0.88)',
      primaryColor: '#13ce66',
      'white': '#ffffff',
      'blue': '#1fb6ff',
      'purple': '#7e5bef',
      'pink': '#ff49db',
      'orange': '#ff7849',
      'green': '#13ce66',
      'yellow': '#ffc82c',
      'gray-dark': '#273444',
      'gray': '#8492a6',
      'gray': '#8495ff',
      'gray-light': '#d3dce6',
    },
    fontFamily: {
      sans: ['Graphik', 'sans-serif'],
      serif: ['Merriweather', 'serif'],
    },
    extend: {
      borderColor: '#c2c8d1',
      spacing: {
        '128': '32rem',
        '144': '36rem',
      },
      borderRadius: {
        '4xl': '2rem',
      }
    },
  },
  plugins: [],
}

配置index.css

@tailwind base;
@tailwind components;
@tailwind utilities;
 
# extra 内容
 
:root {
    --border-color: #c2c8d1;
    --primary-color: #13ce66
}

/* pc 宽度大于1200px */
@media screen and (min-width: 1200px){
    
}

/* 平板 小于1199 大于501px*/
@media screen and (max-width: 1199px)  and (min-width: 501px) {

}

 /* 手机 最大500px*/
@media screen and (max-width: 500px) {
   
}

.border-solid {
    border: 1px solid var(--border-color);
}
.border-radius {
    border-radius: 20px;
}

.border-right {
    border: 1px solid  var(--border-color);
}

创建plugin vitePluginStart.ts

import type { PluginOption, ViteDevServer } from 'vite';
import colors from 'picocolors';

export default function vitePluginVueMonitor (): PluginOption  {

    return {
        name: 'ts-start',
        apply: 'serve',
        enforce: 'pre',
        configureServer(server: ViteDevServer) {
            const print = server.printUrls;
            server.printUrls = () => {
                const network = server.resolvedUrls?.network[0];
                const local = server.resolvedUrls?.local[0];
                if (!network && !local) {
                    console.log(colors.red('获取IP地址失败,请检查vite.config.ts文件中server.host配置是否正确!\n'))
                } else {
                    console.info(colors.green("Hello World"))
                    print();
                }
            }
        }
    }
}

配置vite.config

import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
import path from 'path';
import optimizer from 'vite-plugin-optimizer'

// # 控制台输出
// 注意这里千万不要使用@，因为这里还不能识别你配置文件系统路径别名
import vitePluginStart from './src/plugin/vitePluginStart.ts'

export default defineConfig({
  plugins: [
      react(),
      optimizer({
          child_process: () => ({
              find: /^(node:)?child_process$/,
              code: `const child_process = import.meta.glob('child_process'); export { child_process as default }`
          })
      }),
      vitePluginStart(),
  ],

  resolve: {
    alias: {
        '@': path.resolve(__dirname, 'src'),
      '@assets': path.join(__dirname, 'src/assets'),
    }
  },
    server: {
        host: '0.0.0.0', // 指定服务器应该监听哪个 IP 地址
        port: 5173, // 指定开发服务器端口
        strictPort: true, // 若端口已被占用则会直接退出
        open: false, // 启动时自动在浏览器中打开应用程序
    }
})

配置 tsconfig.json

{
  "compilerOptions": {
    "target": "ES2020",
    "useDefineForClassFields": true,
    "lib": ["ES2020", "DOM", "DOM.Iterable","WebWorker"],
    "module": "ESNext",
    "skipLibCheck": true,

    /* Bundler mode */
    "moduleResolution": "bundler",
    "allowImportingTsExtensions": true,
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",

    /* Linting */
    "strict": true,
    "noUnusedLocals": false,
    "noUnusedParameters": false,
    "noFallthroughCasesInSwitch": true,
    "allowSyntheticDefaultImports": true,
    "noImplicitAny": false,
    "baseUrl": "./",
    "paths": {
      "@/*": ["src/*"]
    },
    "types": ["vite/client", "jest", "@testing-library/jest-dom"]
  },
  "include": ["src"],
  "references": [{ "path": "./tsconfig.node.json" }]
}

配置 .gitignore

.DS_Store
node_modules
dist
.npmrc
.cache

yarn.lock
package-lock.json

tests/server/static
tests/server/static/upload
test/unit/coverage
test/e2e/reports

.local
# local env files
.env.local
.env.*.local
.eslintcache

# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
selenium-debug.log
pnpm-debug.log*

# Editor directories and files
.idea
# .vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

修改 App.tsx

去掉app.css

import React from 'react'
import {ConfigProvider} from "antd";

function App() {

  return (
    <>
        
           {alert("hello world")}}>click me
        
    
  )
}

export default App

启动框架，测试效果

pnpm start

代码规范组件 - eslint + prettier + husky

• eslint (https://github.com/eslint/eslint) JavaScript 代码检测工具，检测并提示错误或警告信息
• prettier (https://github.com/prettier/prettier) 代码自动化格式化工具，更好的代码风格效果
• husky (https://github.com/typicode/husky) Git hooks 工具, 可以在执行 git 命令时，执行自定义的脚本程序

安装

# eslint -->  .eslintrc.cjs
pnpm add -D eslint eslint-config-react-app
npm init @eslint/config


# Prettier prettier 是一个代码格式化工具 - prettierrc.cjs ，
pnpm add -D prettier eslint-config-prettier @trivago/prettier-plugin-sort-imports  eslint-plugin-prettier


# 创建配置文件 -- 配置后谈
npm init @eslint/config
touch .eslintrc.cjs
touch .prettierrc.cjs

# husky
pnpm add -D  husky
pnpm pkg set scripts.prepare="husky install"
git init
pnpm prepare
npx husky add .husky/pre-commit "npm run lint"

配置 .eslintrc.cjs – eslint

1. 添加.eslintrc.cjs文件

module.exports = {
    extends: ['react-app', 'prettier'],
};

配置.prettierrc.cjs

创建.prettierrc.cjs

module.exports = {
    singleQuote: true,
    importOrder: [
        '^vite',
        '^react',
        '^antd',
        '',
        'components/',
        'pages/',
        'hooks/',
        'utils/',
        '^[./]',
    ],
    importOrderSortSpecifiers: true,
    importOrderGroupNamespaceSpecifiers: true,
    importOrderCaseInsensitive: true    
};

测试

git add . 
git commit -m 'test husky'

工程测试

pnpm dev

WebAssembly - 可选

mkdir assembly
cd assembly

见笔者的另外文章 [Emscripten编译c/c++为WebAssembly]（https://juejin.cn/post/7285538670608810043)