bootstrap local环境_【Vite 源码学习】1. 环境搭建

最近Vite实在是太火了，打算总结一系列学习Vite的心得，在学习优秀思想的同时，为日后做Contributor准备。

什么Vite

Vite是一个由原生ESM驱动的Web开发构建工具。开发环境下使用原生ESM imports，生产环境下使用Rollup打包。它具有如下特点：

• 闪速冷启动
• 即时模块热更新
• 真正按需编译

获取、安装依赖、启动server

从github 上clone最新vite代码。

https://github.com/vitejs/vite​github.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构建工具为什么用Rollup​zhuanlan.zhihu.com