1.npm 创建项目

npm create vite 项目名

2.选择框架

3.进入项目安装依赖

cd 项目名
npm install

4.修改项目中的文件，创建程序入口

注：打开刚创建的项目，在src文件夹下创建tqsdk文件夹，以及在tqsdk文件夹创建index.js主入口文件

5.修改vite.config.js文件

注：这里主要配置打包文件名称以及打包后全局变量名，name:'tqsdk' 就是成为打包后全局变量的名称。

import { resolve } from "path";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  build: {
    // 输出目录（默认 dist，可自定义）
    outDir: "sdkpack",
    // 清空输出目录（避免旧文件残留）
    emptyOutDir: true,

    lib: {
      entry: resolve(__dirname, "src/tqsdk/index.js"),
      name: "tqsdk",
      fileName: (format) => `tq-sdk.${format}.js`,
    },
  },
});

6.修改package.json 文件

注：这里是配置打包模式以及打包文件位置

{
  "name": "gis_sdk",
  "type": "module",
  "files": [
    "sdkpack"
  ],
  "main": "./sdkpack/tqsdk.umd.js",
  "module": "./sdkpack/tqsdk.es.js",
  "exports": {
    ".": {
      "import": "./sdkpack/tq-sdk.es.js",
      "require": "./sdkpack/tq-sdk.umd.js"
    }
  },
  ....
 
}

7.修改tqsdk文件夹下的index.js文件

首先在tqsk文件夹下创建一个js文件，也就是要在这个文件夹下创建很多个js,封装的方法都写在这里，例如：CountData.js文件，然后在js里面写逻辑

8.修改tqsdk文件夹下的index.js;

注：这个文件是写出口文件

import GetSumData from "./CountData";
export default {
  GetSumData,
};

9.打包sdk

注：在终端直接运行 npm run build

10.测试刚刚写的案例

首先在index.html全局引入打包后的js文件