为webpack项目提供一键接入Vite的能力
包管理工具推荐使用pnpm
npm i -g pnpm
npm install webpack-vite-serve -D
# or
yarn add webpack-vite-serve -D
# or
pnpm add webpack-vite-serve -D
# devServer
wvs start [options]
{
"scripts": {
"vite:vue": "wvs start -f vue",
"vite:react": "wvs start -f react",
"vite": "wvs start"
}
}
# build
wvs build [options]
{
"scripts": {
"build:vite": "wvs build",
}
}
- -f,--framework
<type>
:指定使用的业务框架 (vue
,react
)- 此选项将会自动引入框架依赖的插件,react-@vitejs/plugin-react,vu3-@vitejs/plugin-vue,vue2-vite-plugin-vue2
- 用户可以不开启此选项,自行在用户配置中加入对应的插件
- -s,--spa:按照单页应用目录结构处理
src/${entryJs}
- 不指定
-s
或-m
,默认按单页应用
- 不指定
- -m,--mpa:按照多页应用目录结构处理
src/pages/${entryName}/${entryJs}
- -d,--debug
[feat]
:打印debug信息 - -w,--wp2vite:use wp2vite 自动转换webpack文件
- -c,--config: 手动指定vite配置路径
- -w,--webpack: 手动指定webpack配置路径
其中entryJs
匹配命名规则/(index|main)\.[jt]sx?$/
工程目录约定
Pages Dir | Html Template | Entry Js |
---|---|---|
src |
public/index.html |
src/${entryJs} |
* public
* index.html
* src
* main.ts
Pages Dir | Html Template | Entry Js |
---|---|---|
src/pages |
src/pages/${pageName}/${pageName}.html |
src/pages/${entryName}/${entryJs} |
src/pages/${pageName}/index.html |
- | |
public/index.html |
- |
* public
* index.html
* src
* pages
* pageName1
* main.js
* pageName.html
* pageName2
* index.ts
* index.html
- Vue
- React
- SPA - 单页应用
- MPA - 多页应用
- build for production - 打包
wvs build
- merge userConfig - 自动合并工程根目录的
vite.config.ts
文件 - config transform use wp2vite - webpack配置转换 !!! 存在一些小小问题,准备PR解决
- export inline plugin - 对外暴露内置的插件,供单独使用,如处理
htmlTemplate
与entryJs
的能力
- JS
- Vue2 SPA
- React SPA
- Vue MPA
- React MPA
- TS
- Vue3 SPA
- React SPA
- Vue MPA
- React MPA
pnpm install
# 1
cd examples
# 2
cd js
# 3
cd react-mpa
# 4
# run webpack devServer
npm run dev
# 5
# run vite devServer
npm run dev:vite
使用pnpm
npm i -g pnpm
安装依赖
pnpm install
编译
pnpm dev
激活指令(全局)
npm link
测试指令
wvs hello
使用pnpm
npm i -g pnpm
安装依赖
pnpm install
构建
pnpm build
# or
pnpm dev