用Vite构建Lit项目
陈拓 2023/12/05-2023/12/06
1. 概述
1.1 Vite
- 中文官方网址
https://cn.vitejs.dev/
Vite是一种新型前端构建工具，能够显著提升前端开发体验。
1.2 Lit
- 官方网址
https://lit.dev/
Lit是一个简单的库，用于构建快速、轻量级的Web组件。
Lit的核心是一个消除样板的组件基类，它提供反应式状态、作用域样式和一个微小、快速且富有表现力的声明性模板系统。
1.3 我的需求
我想用Lit开发Web组件，但是在本地构建Lit项目很麻烦，因此我要借助Vite来构建一个Lit项目。
2. 创建JS版本的Lit项目
2.1 通过“在线试用Vite”创建Lit的JS项目
- 在线试用vite
你可以通过StackBlitz在线试用vite。它直接在浏览器中运行基于Vite的构建，因此它与本地开发几乎无差别，同时无需在你的机器上安装任何东西。你可以浏览vite.new/{template}来选择你要使用的框架。
- 选择lit
https://stackblitz.com/edit/vitejs-vite-awtxbc?file=index.html&terminal=dev
- 下载项目到本地
得到：
2.2 测试项目
2.2.1 基本开发环境
- 服务器系统架构和操作系统版本
- Win10与服务器的互操作
《Win10命令窗口的SSH和SFTP操作》
https://blog.csdn.net/chentuo2000/article/details/119918637?spm=1001.2014.3001.5501
- node.js
View和Lit都需要依赖node.js运行，node.js的安装见：
《Node.js+Express+Nodemon+Socket.IO构建Web实时通信》
https://blog.csdn.net/chentuo2000/article/details/134651743?spm=1001.2014.3001.5501
2.2.2 构建本地Lit的JS开发环境
- 创建项目目录
mkdir lit
cd lit
mkdir test-js
cd test-js
- 将vitejs-vite-awtxbc.zip文件复制到项目目录
- 解压
unzip vitejs-vite-awtxbc.zip
- 安装依赖
npm install
依赖包安装在node_modules目录中。
2.2.3 在Local运行项目
- 服务器运行
npm run dev
说明：
命令中的dev在package.json文件中有键值对"dev": "vite"：
{
"name": "vite-lit-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"lit": "^3.1.0"
},
"devDependencies": {
"vite": "^5.0.4"
}
}执行npm run dev命令实际上是在运行vite。
- 浏览器查看
服务器本机没用安装桌面，用curl测试：
2.2.4 Network上运行项目
- 修改package.json文件的键值对"dev": "vite"
{
"name": "vite-lit-starter",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite --host 192.168.137.9",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"lit": "^3.1.0"
},
"devDependencies": {
"vite": "^5.0.4"
}
}"dev": "vite --host 192.168.137.9",
其中192.168.137.9是我们服务器IP地址。
- 服务器运行
npm run dev
- 浏览器查看
我用谷歌浏览器Chrome
http://192.168.137.9:5173/
3. 创建TS版本的Lit项目
3.1 通过“在线试用Vite”创建Lit的TS项目
- 选择lit-ts
https://stackblitz.com/edit/vitejs-vite-vfovuq?file=index.html&terminal=dev
- 下载项目到本地
3.2 测试项目
3.2.1 构建本地Lit的TS开发环境
下面的工作与“创建JS版本的Lit项目”相同。
- 创建项目目录
mkdir test-ts
cd test-ts
- 将vitejs-vite-awtxbc.zip文件复制到项目目录
- 解压
unzip vitejs-vite-awtxbc.zip
- 安装依赖
npm install
3.2.2 Network上运行项目
- 修改package.json文件的键值对"dev": "vite"
"dev": "vite --host 192.168.137.9",
- 服务器运行
npm run dev
- 浏览器查看
http://192.168.137.9:5173/
至此我们已经构建好了JS和TS版本的Lit项目，这样本地开发工作就可以在此基础上进行了。
当然我们依然可以继续通过StackBlitz在线使用vite进行开发，并且随时可以用上面的方法将项目移到本地。
参考文档
- Lit：介绍、项目搭建
https://blog.csdn.net/weixin_41897680/article/details/125144720 - Network: use `--host` to expose
https://blog.csdn.net/m0_54409638/article/details/125767692