Vite
layout: post
title: Vite
tags: Vite package
categories:Vite
1.创建一个 Vite 新项目就比较简单 ```npm install vite 使用 NPM: $ npm init vite@latest
使用 PNPM: $ pnpm create vite
npm 6.x
npm init vite@latest my-vue-app –template vue
2. select the project by type
vue
react
electron
typecript
……………………………………………………………………
3.
CSS 预处理器#
由于 Vite 的目标仅为现代浏览器，因此建议使用原生 CSS 变量和实现 CSSWG 草案的 PostCSS 插件（例如 postcss-nesting）来编写简单的、符合未来标准的 CSS。
话虽如此，但 Vite 也同时提供了对 .scss, .sass, .less, .styl 和 .stylus 文件的内置支持。没有必要为它们安装特定的 Vite 插件，但必须安装相应的预处理器依赖：
# .scss and .sass
npm install -D sass
# .less
npm install -D less
# .styl and .stylus
npm install -D stylus
4.一个完整的 Vite demo
业务项目的 vite.config.js 完整配置 import { defineConfig } from ‘vite’; import reactRefresh from ‘@vitejs/plugin-react-refresh’; import legacyPlugin from ‘@vitejs/plugin-legacy’; import { resolve } from ‘path’;
const fs = require(‘fs’); const lessToJS = require(‘less-vars-to-js’); const themeVariables = lessToJS(fs.readFileSync(resolve(__dirname, ‘./src/antd-custom.less’), ‘utf8’)); const reactSvgPlugin = require(‘vite-plugin-react-svg’);
// https://cn.vitejs.dev/config/
export default defineConfig({
base: ‘./’,
root: ‘./’,
resolve: {
alias: {
‘react-native’: ‘react-native-web’,
‘@’: resolve(dirname, ‘src’),
},
},
define: {
‘process.env.REACT_APP_IS_LOCAL’: ‘'true'’,
‘window.__CID’: JSON.stringify(process.env.cid || ‘id’),
},
server: {
port: 8080,
proxy: {
‘/api’: {
target: ‘https://stoku.test.shopee.co.id/’,
changeOrigin: true,
cookieDomainRewrite: {
‘stoku.test.shopee.co.id’: ‘localhost’,
},
},
},
},
build: {
target: ‘es2015’,
minify: ‘terser’,
manifest: false,
sourcemap: false,
outDir: ‘build’,
rollupOptions: {},
},
esbuild: {},
optimizeDeps: {},
plugins: [
// viteSingleFile({
// title: ‘dynamic title’, // doesn’t work
// }),
reactSvgPlugin(),
reactRefresh(),
legacyPlugin({
targets: [
‘Android > 39’,
‘Chrome >= 60’,
‘Safari >= 10.1’,
‘iOS >= 10.3’,
‘Firefox >= 54’,
‘Edge >= 15’,
],
}),
// vitePluginImp({
// libList: [
// {
// libName: ‘antd’,
// style: (name) => antd/es/${name}/style,
// },
// ],
// }),
],
css: {
preprocessorOptions: {
less: {
modifyVars: {
hack: true;@import '${resolve('./src/vars.less')}';,
…themeVariables,
},
javascriptEnabled: true,
},
},
},
});
```
5.vue2项目要从webpack 迁移到 vite 需要完成以下几步 案列1 安装vite 的依赖包
添加 vite 的配置文件 vite.config.js
修改文件，包入口 index.html 和 其他文件
运行 vite 和 vite build 根据报错，修改文件
删除无用的文件和依赖包