vite的依赖预构建create vite 和 vite 的区别在官网可以看到使用vite构建项目时推荐的命令有 ya

create vite 和 vite 的区别

在官网可以看到使用vite构建项目时推荐的命令有 yarn create vite 但是其实这个命令是安装了create-vite这个脚手架。

create-vite和vite的关系就类似于vue-cli和webpack的关系。

create-vite是脚手架，vite是构建工具。

vite的依赖预构建

先在本地文件夹创建一个index.html文件和一个main.js文件和一个count.js文件

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script src="./mian.js" type="module"></script>
</body>

</html>

main.js

import a from "./count"

console.log(a)

count.js


function a(){
    console.log("hello")
}
export default a

在游览器打开html，在网络处发现count.js加载失败，原因是没有构建工具自动补充后缀

这里安装vite之后，会自动补充后缀，先按下不表，在终端中yarn init -y进行初始化，延后yarn add lodash-es

更改main.js如下

// import a from "./count"
// console.log(a)
import _ from "lodash-es"
console.log(_)

依旧报错，原因是esmodule无法去自动识别到node_modules

而且注意到此时的node_modules文件夹下lodash-es的位置

现在安装使用 yarn add vite来安装vite，然后通过vite启动项目，发现没有写后缀的count.js成功加载，没有完整路径的lodash-es也成功加载，而且lodas-es.js的路径是在.vite/deps下的

由此得到vite的依赖构建的所作的第一件事就是路径处理，并且对安装的第三方依赖进行了处理

我们在根目录下创建vite.config.js文件，写入以下内容


export default {
    optimizeDeps: {
        exclude:["lodash-es"]//对loadsh-es不进行依赖预构建
    }
}

loadsh-es依赖所依赖的全部js文件在网络请求中被加载，由此得知vite在依赖预构建时将该依赖所import的其他内容全部集成编写为了一个js文件（当依赖模块复杂时会编写为几个文件）。而且这种集成是无视esmodule和module.export的区别。