使用Vite工具构建OpenLayers应用

vite作为最近大火的前端构建工具，吸引了大批开发者和工具框架作者的关注。vite自称为下一代的构建工具，这是要取代webpack的节奏啊。openlayers最新版本的案例代码就使用了vite来构建，因此这一篇文章我们来给大家示范一下如何使用vite来构建一个基于openlayers的应用。

 首先要学会如何初始化vite。

你需要在自己的电脑里安装node环境，这个大家可以自行百度我就不废话了。

安装好node以后可以打开电脑的终端，windows用户直接按win+R即可。mac用户直接command+空格搜索终端然后打开。

在终端里输入命令：npm create vite@latest

这时候终端窗口会询问我们项目的名字，自己起个名字就好

然后选择第一项即可：

 

然后选择javascript按下回车项目就构建好了，特别神速有没有。

当然这个神速是暂时的，vite不同于webpack，webpack在初始化项目的时候就会下载对应的依赖包。因此需要花费很长时间才能初始化好，而vite相反，它并没有去下载对应的依赖而是直接告诉你项目初始化好了，然后你去项目里开始运行的时候才开始给你下载对应的依赖包。所以现在并不能说vite比webpack快了多少。

言归正传我们是要构建openlayers的工程。

我们打开刚才建立好的工程文件夹，然后打开终端，输入命令：

npm install

安装项目对应的基础依赖包。然后再输入命令：

npm install ol  --save

安装openlayers的依赖包。

都安装完成后就可以点击运行package.json里的dev命令或者在终端直接输入：

npm run dev

也可以。

然后我们点击生成的链接就可以访问到项目的首页：

 

项目首页：

 这时候我们就成功的安装了依赖并且成功的启动了项目。

然后我们openlayers官网上的例子代码对应的copy到相应位置。

比如我们随便找一个例子：

 打开看看里面的代码构造，代码其实很简单，就一个main.js和index.html。下面的package.json文件是我们vite 项目里本就有的。

所以我们只需要复制走html里的代码然后替换掉项目里的index.html的代码。

复制main.js代码替换掉项目里的main.js代码。

然后重新启动项目，就可以看到

这样我们就成功搭建了我们的应用，后续如果需要做什么改动的话只需要整理项目结构即可。