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代码。
然后重新启动项目,就可以看到
这样我们就成功搭建了我们的应用,后续如果需要做什么改动的话只需要整理项目结构即可。