Skip to content

Commit

Permalink
docs: update README.md (#105)
Browse files Browse the repository at this point in the history
  • Loading branch information
konpeki622 authored Aug 5, 2022
1 parent 711ed8e commit 6076135
Show file tree
Hide file tree
Showing 2 changed files with 34 additions and 14 deletions.
21 changes: 15 additions & 6 deletions README-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ $ npx @originjs/webpack-to-vite <project path>
$ npm install @originjs/webpack-to-vite -g
$ webpack-to-vite <project path>
```

在新目录 `filename-toVite` 下查看和运行转换完成的 Vite 项目.

> 注意:默认转换的是 vue-cli 项目。 传入 `-t webpack` 选项来转换 webpack 项目。
## 选项
Expand All @@ -31,6 +34,7 @@ Options:
-d --rootDir <path> 要转换的项目目录
-t --projectType <type> 项目类型,传入 vue-cli 或 webpack(默认:vue-cli)
-e --entry <type> 整个构建过程的入口,webpack 或 vite 会从那些入口文件开始构建,如果没有指定入口文件,则默认使用 src/main.ts 或 src/main.js
-c --cover 使用此选项,转换的项目文件将覆盖原文件
-h, --help 显示命令帮助
```

Expand Down Expand Up @@ -109,16 +113,21 @@ Options:
*`html-webpack-plugin` 中引用 `injectHtml``minifyHtml` 并且配置选项:
```js
plugins: [
injectHtml({
data: {
title: value
createHtmlPlugin({
inject: {
data: {
title: value,
},
},
minify: {
minifyCss: true
}
}),
minifyHtml({
minifyCss: true
})
]
```
* ⚠️ B12: 特定的 Vite 插件
* 你需要根据项目引入特定的 Vite 插件,该工具并不能做到识别和引入。
* 例如,如果之前使用了 `windi.css`,你应该检查 Vite 是否已经支持它,然后参考指导说明,手动引入使用相关的插件([vite-plugin-windicss](https://windicss.org/integrations/vite.html))。

### Vue-CLI 转换项
> Vue-CLI 转换是将 `vue.config.js` 中的配置,转换后设置到 `vite.config.js`
Expand Down
27 changes: 19 additions & 8 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,9 @@ $ npx @originjs/webpack-to-vite <project path>
$ npm install @originjs/webpack-to-vite -g
$ webpack-to-vite <project path>
```

The converted Vite project could be found in a new directory `filename-toVite`.

> Note: the default conversion is vue-cli project. Pass in the `-t webpack` option to convert a webpack project.
## Options
Expand All @@ -30,7 +33,10 @@ Options:
-v, --version display version number
-d --rootDir <path> the directory of project to be converted
-t --projectType <type> the type of the project, use vue-cli or webpack (default: vue-cli)
-e --entry <type> entrance of the entire build process, webpack or vite will start from those entry files to build, if no entry file is specified, src/main.ts or src/main.js will be used as default
-e --entry <type> entrance of the entire build process, webpack or vite will start from those
entry files to build, if no entry file is specified, src/main.ts or
src/main.js will be used as default
-c --cover transformed project files will cover the raw files
-h, --help display help for command
```

Expand Down Expand Up @@ -104,19 +110,24 @@ Legend of annotations:
* ✅ B11: `html-webpack-plugin` is supported
* Options will be applied to plugin `vite-plugin-html`
* Variables injected to `index.html` will be transformed. for example, `<%= htmlWebpackPlugin.options.title %>` -> `<%= title %>`
* Import `injectHtml` and `minifyHtml` from `html-webpack-plugin` and use them like this:
* Import `createHtmlPlugin` from `html-webpack-plugin` and use it like this:
```js
plugins: [
injectHtml({
data: {
title: value
createHtmlPlugin({
inject: {
data: {
title: value,
},
},
minify: {
minifyCss: true
}
}),
minifyHtml({
minifyCss: true
})
]
```
* ⚠️ B12: specified Vite plugins
* You need to import specified Vite plugins based on your project, when this tool can not identify and import them.
* For example, if `windi.css` was used before, you should check if Vite has supported it, and then import related plugin ([vite-plugin-windicss](https://windicss.org/integrations/vite.html)) manually refered to its plugin guide.

### Vue-CLI conversion
> Vue-CLI conversion is based on `vue.config.js`. Configurations will be transformed and written to `vite.config.js`
Expand Down

0 comments on commit 6076135

Please sign in to comment.