最近Vite实在是太火了,打算总结一系列学习Vite的心得,在学习优秀思想的同时,为日后做Contributor准备。
什么Vite
Vite是一个由原生ESM驱动的Web开发构建工具。开发环境下使用原生ESM imports,生产环境下使用Rollup打包。它具有如下特点:
- 闪速冷启动
- 即时模块热更新
- 真正按需编译
获取、安装依赖、启动server
从github 上clone最新vite代码。
https://github.com/vitejs/vitegithub.com如果使用npm,运行:
// cd 到 vite 根目录
npm install
npm run dev
如果使用yarn,运行:
// cd 到 vite 根目录
yarn
yarn dev
项目成功启动
启动playground
playground用于测试vite所有功能。在vite项目下有如下目录结构:
- playground
- index.html
- main.js
- package.json
- ...
- src
可以感觉到playground能单独通过index.html运行。
查看playground/package.json
{
"scripts": {
"dev": "vite --debug",
"build": "vite build --debug",
"serve": "serve dist"
},
"dependencies": {
"bootstrap": "link:../node_modules/bootstrap",
"lodash-es": "link:../node_modules/lodash-es",
"moment": "link:../node_modules/moment",
"@babel/runtime": "link:../node_modules/@babel/runtime",
"normalize.css": "link:../node_modules/normalize.css",
"optimize-linked": "link:./optimize-linked",
"resolve-browser-field-test-package": "link:./resolve/browser-field",
"rewrite-optimized-test-package": "link:./resolve/rewrite-optimized/test-package",
"rewrite-unoptimized-test-package": "link:./resolve/rewrite-unoptimized/test-package"
}
}
dev脚本通过vite启动,但是在dependencies下没有。需要单独link vite,link方法:
cd到vite根目录下,如果使用npm
npm link
如果使用yarn
yarn link
接下来安装playground依赖包,执行npm install,报如下错误:
出错原因:package.json里面dependencies里不支持link:
的写法。(文章最后会单独进行说明)
playground下运行如下命令:
yarn install
yarn dev
访问localhost:3000得到如下结果:
playground运行成功。
npm与yarn在dependencies中使用symlink对比
npm 使用symlink
npm添加symlink语法:
npm install <folder>
添加之后dependencies为:
// npm install ../node_modules/bootstrap/
"bootstrap": "file:../node_modules/bootstrap"
node_modules下bootstrap为链接。
yarn 使用symlink
yarn添加symlink语法:
yarn add link:/path/to/local/folder
添加之后dependencies为:
// yarn add link:../node_modules/bootstrap/
"bootstrap": "link:../node_modules/bootstrap/"
在playground/package.json中使用的正是yarn添加symlink的方式,所以不支持npm的symlink。
相关链接
下一篇:
Lee Wen:【Vite 源码学习】2. Vite构建工具为什么用Rollupzhuanlan.zhihu.com