react中一些vite常见配置

使用vite，首先要在项目根目录创建vite.config.js的文件，如果使用ts的话，也可以是.ts文件。 这里其实重点想要说的是，vite属于新兴的工具，所以对于他的配置项，我们必然是很陌生的，但是官方很贴心的，给我们提供了方案——一个可以给出配置提示的方法：

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';
export default defineConfig({
  plugins: [reactRefresh()],
})

如上，只要引用defineConfig，包裹vite的config，你在键入options的时候，就可以看到提示啦。 还有需要注意的一点，vite内置less，和sass，但是如果使用默认配置，那么在给less，和sass文件起名字的时候，文件名后缀要使用.module.less,这样vite才能正确识别

项目中实用、常用配置

文件别名配置resolve.alias

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';
export default defineConfig({
  plugins: [reactRefresh()],
  resolve: {
    alias: [
      { find: "src", replacement: path.resolve(__dirname,'src') },
    ]
  },
})

less设置全局变量css.preprocessorOptions

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';
export default defineConfig({
  plugins: [reactRefresh()],
  css: {
    preprocessorOptions: {
      less: {
        additionalData: `@import "${path.resolve(__dirname, 'src/theme.module.less')}";`,
        javascriptEnabled: true,
      }
    },
  },
})

打包

打包这里问题比较多，首先要确定自己的项目，是什么场景。比如：是一个完成的应用，需要将html打包进项目的，可以使用默认配置。如果自己的项目是SDK，或者是一个react组件。那么就需要使用另外一种库模式来打包。还有node环境的npm包，比如脚手架之类需要执行某些node命令行的配置，都会有所不同

常规配置-rollupOptions

一般的打包配置，可以使用rollupOptions，这部分具体有什么配置项，有哪些参数，我这里偷个懒，大家可以去rollup官方文档去查（虽然我知道这样比较烦人，但是这部分比较容易查，所以就不写啦，我重点写一点，不太容易查到的配置） 这里只分享一个我遇到的，更改css构建产物文件名的配置

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';
export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    rollupOptions: {
      output:{
		  entryFileNames: `[name].${timestamp}.js`,
	      chunkFileNames: `[name].${timestamp}.js`,
	      // css文件名
	      assetFileNames: `[name].${timestamp}.[ext]`
	      // 比如你想构建出来的css为dist/index.css，那么你可以这样
	      //  assetFileNames: `index.[ext]`
	  }
	}
  },
})

库模式

这个模式适用于，打包一个不含html文件的场景

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';
export default defineConfig({
  plugins: [reactRefresh()],
  build: {
    lib: {
      // 入口文件
      entry: path.resolve(__dirname, 'src/index.tsx'),
      // umd、iife的格式vite要求必须要有name作为导出的全局变量
      name: "SpecialEffect",
      // 导出格式，默认为["iife","umd"]
      formats: ['iife'],
      // js打包名称，当然这部分官方文档更加详细
      fileName: () => "index.js"
    },
	// umd格式下，支持将不需要打包的第三方库，排除在外，并指定全部环境
	// 提供的全局变量代替，比如以下的例子，不将react打包，由全局React
	// 变量提供react库
	rollupOptions: {
      external: ['react'],
      output: {
        globals: {
          react: 'React'
        }
      }
    }
  },
})

本地开发服务器的配置

import { defineConfig } from 'vite'
import reactRefresh from '@vitejs/plugin-react-refresh'
import path from 'path';
export default defineConfig({
  plugins: [reactRefresh()],
  server: {
  	// 端口
    port: 3000,
    // 是否开启https服务
    https: true,
    // 代理
    proxy: {
      '/project/delete': {
        target: 'https://www.bdsc.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/project\/delete/, '')
      },
      '/project/update': {
        target: 'https://www.bdsc.com',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/project\/update/, '')
      },
    }
  },
})

proxy

{
	proxy:{
		'api':{
			target: 'https://www.bdsc.com',
        	changeOrigin: true,
        	rewrite: (path) => path.replace(/^\api/, '')
		}
	}
}

以上配置可以解决proxy百分之九十的问题，但是这个含义却很少有人讲的清楚。 首先 "api"这个是一个标识符，虽然很多接口会提供给你类似这样的'www.bdsc.com/api/materia…

我还是拿www.bdsc.com/api/materia…

首先我们需要向本地开发服务发起请求，然后本地开发服务器请求地址www.bdsc.com/api/materia…

发起请求的方式是，我们通过proxy定义一个标识符，例如aaa，然后在本地开发服务器的地址拼接上标识符aaa。也就是localhost:3000/aaa，这样就可以对本地开发服务器发起请求了。当你发起这个请求，本地开发服务器要做什么呢？他会根据配置中的target字段的地址，也就是www.bdsc.com，拼接上aaa标识符，然后再拼接上/api/materia… rewrite字段中，将aaa这个标识符，替换为空的字符串。那么这样得到的最终地址就是www.bdsc.com/api/materia…

当然这个标识符你不想自定义，想要使用接口中的那个api字段行不行呢，当然也可以，最后不需要rewrite就好了

上面说了一大堆。字有点多，可能也少有人耐心看。下面我就从头到位的说一下具体做法，代码：

import axios from 'axios';
import env from './env';
// env 环境变量，这里必须要判断当前的环境。本地开发，还是在生产、日常、预发等
// 是否是本地环境
const isLocal = env === "LOCAL"
// 本地开发baseURL使用标识符，浏览器会自动添加域名，也就是本地开发服务器的域名
const baseURL = isLocal ? "aaa" : "https://www.bdsc.com"
axios({
	baseURL,
	url:"api/material",
	method:"GET",
	params:{}
})
.then(res => {
	// 发起请求
})

如果是本地环境，那么上面实际请求的地址就是类似http://localhost:3000/aaa/api/material这种地址

下面proxy的配置

{
	proxy:{
		'aaa':{
			target: 'https://www.bdsc.com',
        	changeOrigin: true,
        	rewrite: (path) => path.replace(/^\aaa/, '')
		}
	}
}

当本地服务器收到http://localhost:3000/aaa/api/material的请求，便会将localhost:3000替换为target：https://www.bdsc.com的到https://www.bdsc.com/aaa/api/material, 然后再根据rewrite的配置，将aaa替换为空字符串。得到www.bdsc.com/api/materia…

以上是关于vite的配置的一点总结

标签 , ,

发表回复