likes
comments
collection
share

基于vite2.0的开发构建工具vited

作者站长头像
站长
· 阅读数 5

vited

基于vite2.0开发/打包工具

特点

  • 无需编写vite.config
  • 默认支持react和 react hmr
  • 支持 typescript
  • 支持spa/mpa 构建
  • 默认支持zarm和antd v4
  • 支持antd换肤

安装

用npm / yarn 安装:

$ npm install --save-dev vited
$ yarn add -D vited

开发

 
 目录结构
 --src
    -index.jsx/tsx/ts/js

vited start [-p port] [-t themeColor]

目录结构
 --src
    --dir
      -index.jsx/tsx/ts/js

vited start dir [-p port][-t themeColor]

打包
vited build  -p https://www.xxx.com/ , 不设置publicPath, 则默认为 /

vited build [-p publicPath] [-t themeColor]

vited包含安装的vite依赖

  "devDependencies": {
    "@vitejs/plugin-react-refresh": "^1.3.2",
    "vite": "^2.3.0",
    "vite-plugin-style-import": "^0.10.0"
  },
默认 html 入口
<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta
      name="viewport"
      content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,minimal-ui,viewport-fit=cover"
    />
    <meta name="format-detection" content="telephone=no, email=no" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta name="apple-touch-fullscreen" content="yes" />
    <title></title>
  </head>
  <body style="font-size: 14px">
    <div id="root"></div>
    <script type="module" src="./src/index.jsx"></script>
  </body>
</html>

demo

参考 github.com/leonwgc/vit…