vite实战

Posted 2022-03-30 coderlin_

Pnpm

很好的文章
pnpm相对比npm和yarn有很大速度的提升。因为：

• 对于每个项目的依赖，yanr和npm会根据package.json每次都去下载依赖，导致项目越多，依赖就代码就越多。
• 而对于pnpm，他会通过hard link的模式，在计算机的虚拟硬盘目录下创建一个store目录，将依赖存放到里面去，下次另一个项目需要某些依赖的时候，pnpm会直接来这store目录获取到代码，就不用重复下载。
• 对于版本不同的依赖，版本之间不同的文件会被存储起来。

例子：在项目中安装express依赖。
在项目的node_modules目录中就会出现

node_modules/express/...
node_modules/.pnpm/express@4.17.1/node_modules/xxx

• 第一个目里面啥也没有，就是一个软连接（类似于快捷方式）定位到第二个目录下的文件，它是用来给node.js使用找寻依赖的。
• 而第二个目录下的.pnpm 是个虚拟磁盘目录（也就是store），express 这个依赖的一些依赖会被平铺到 .pnpm/express@4.17.1/node_modules/ 这个目录下面，这样保证了依赖能够 require 到，同时也不会形成很深的依赖层级。
• 其他项目需要express也会来这个.pnpm目录下获取依赖。

Vite

使用

yarn add @vitejs/plugin-vue @vue/compiler-sfc vite -D

在根目录下准备一个html文件，即可开始。

vite本地server为什么这么快？

官网解释

• 类似于webpack的本地服务，他需要将所有的代码都构建完成之后，才能启动服务，可以比较为是通过webpack build之后，再通过http-server启动。
• 而对于vite的本地服务，它会将模块代码分为两部分，依赖+源码。
• 对于依赖，比如一些第三方模块，Vite 将会使用 esbuild 预构建依赖。Esbuild 使用 Go 编写，比以 javascript 编写的打包器预构建依赖快 10-100 倍。
• 对于源码，比如vue,jsx等需要转化的，Vite 以 原生 ESM 方式提供源码，也就是一部分工作交给浏览器进行，vite只负责当浏览器请求源码的时候（如异步加载的代码）才会进行转换并且按需提供，其他的不会提前加载。
• 而这两个原因也是vite为啥快的原因。

全部构建玩再启动服务的图

vite的方式：

esbuild介绍

vite实战

Vite天然支持typescript, css, less ,scss, css module,支持postcss。
ts只需要有tsconfig.json文件，并且配置.babelerc

    "presets": [
        "@babel/preset-env",
        "@babel/preset-typescript"
    ]

然后
配置.d.ts，就可以使用
ts写法。

postcss只需要配置postcss.config.js

module.exports = 
    plugins: [
        require('autoprefixer')
    ]

支持mock数据

接着在根目录创建mock文件即可。


非常方便。

单元测试

pnpm i jest@next babel-jest@next @types/jest vue-jest@next ts-jest@next @vue/test-utils@next -D

配置jest.config.js文件




这样就可以测试vue了。