基于 Vite 的前端 SDK 工程化设计与模块化构建实践

1.创建项目

说明：如图所示，创建test-sdk文件夹。

2. 初始化 npm

说明：npm init是创建一个新的 Node.js 项目，自动生成 package.json配置文件。

npm init -y

3.创建对应目录

说明：如图所示：

4.Vite配置打包

说明：Vite 配置打包就是告诉 Vite 如何把你的代码转换成浏览器能直接运行的文件。

npm install vite -D

4.1创建vite.config.js

说明：项目的说明书，代码如下

javascript 复制代码

import { defineConfig } from 'vite'

export default defineConfig({
    build: {
        lib: {
            entry: 'src/index.js',
            name: 'Weather',
            fileName: 'weather'
        }
    }
})

5.编写业务代码

说明：rainfall.js写个简单函数，然后在index.js文件引入。

javascript 复制代码

export function loadRainfall(options) {
    console.log('加载waterData:', options)
}

6.文件目录

说明：用 Vite 打包的 JavaScript 库项目，源码在 src，构建产物在 dist，通过 example进行测试。

src/ - 源码（index.js是入口文件，rainfall.js是功能逻辑）
dist/ - 打包后的成品文件（用于发布）
example/ - 使用示例和测试页面
node_modules/ - 项目依赖包

文件整体目录如下：

7.打包

说明：打包命令。

vite build

javascript 复制代码

{
  "name": "test-sdk",
  "version": "1.0.0",
  "description": "",
  "main": "dist/weather.umd.js",
  "module": "dist/weather.mjs",
  "files": ["dist"],
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "vite build"
  },
"keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "vite": "^8.0.9"
  }
}

8.测试项目

8.1 UMD（传统方式）

说明：最传统 script 引入（UMD）

javascript 复制代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>SDK测试</title>
</head>
<body>

<div id="app"></div>
<button id="btn">加载降水</button>
<!-- 引入你的SDK -->
<script src="../dist/weather.umd.js"></script>

<script>
    // 注意：这里的 Weather 就是你 vite.config.js 里的 name
    document.getElementById('btn').addEventListener('click', () => {
        Weather.loadData({
            test: 123,
            city: '城市'
        })
    })

</script>

</body>
</html>

8.2 ESM（现代方式）

说明：编写SDK测试页面，如下所示：

javascript 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <title>Weather GIS SDK Test</title>
</head>

<body>
<h2>SDK 测试页面</h2>

<button id="btn">加载降水</button>

<script type="module">
    import { loadRainfall } from '../dist/weather.mjs'

    document.getElementById('btn').addEventListener('click', () => {
        loadRainfall({
            test: 123,
            city: '城市'
        })
    })
</script>
</body>
</html>