关于前端:如何用vite-开发并打包-库文件

如何用 vite 开发并打包 库文件。

其实在开发库的时候有很多抉择。比方 webpack，rollup，esbuild 等等。

但这些都要配置，尤其是当你发现 rollup-plugin-typescript 没卵用的时候，还得去翻找 rollup-plugin-typescript2，尽管装置对于咱们来说很快，但还是要很多设置的。

所以 vite 的库模式是一个十分好的抉择。

那就来吧。

npm create vite@latest

抉择世界上最好的 javascript 框架 Vanilla。

 cd vite-project
  npm install

首先在 package.json 增加 ` “files”: [

    "dist"
],`
这样就指定了 npm 提交的文件夹，对了，`"private": true,` 要删除，不然不给提交。

{
  "name": "vite-project",
  "private": true,
  "version": "0.0.0",
  "type": "module",
   "files": ["dist"],
  "scripts": {
    "dev": "vite",
    "build": "tsc && vite build",
    "preview": "vite preview"
  },
  "devDependencies": {
    "typescript": "^5.0.2",
    "vite": "^4.3.0"
  }
}

而后 keywords、author、description等等就看你写了。

但 vite 默认的接口文件是 index.html。所以就要批改，index.html 就留给 dev 吧。

而默认 Vanilla 是没有 vite.config.js 的，所以在根目录新建一个即可。

库模式官网文档

依照批示批改，lib 里的 entry 代表文件入口，name代表打包后库的名字，就是引入文件后的变量名，fileName，就是你打包后文件的名字。

当然更多的文档里有，比方文件拆分，绝对于其余的来说，这点配置就是毛毛雨。

最初就是当你的库编写的差不多的时候，间接 build 了，他的默认打包在 /dist 文件夹下的。

真的是这一套，省了多少事。