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