前端初学者 sdk 的使用

news2024/11/25 10:12:57

目录结构:

 package.json

{
  "name": "ivanfor666",
  "version": "1.0.0",
  "description": "",
  "main": "dist/index.cjs.js",
  "module": "dist/index.esm.js",
  "browser": "dist/index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build-pro": "rollup --config pro.config.js",
    "build-sdk": "rollup --config sdk.config.js",
    "build": "rollup --config sdk.config.js && rollup --config pro.config.js"
  },
  "keywords": [
    "前端",
    "sdk"
  ],
  "author": "",
  "files": [
    "dist"
  ],
  "license": "ISC",
  "devDependencies": {
    "rollup": "^2.76.0",
    "rollup-plugin-dts": "^4.2.2",
    "rollup-plugin-typescript2": "^0.32.1",
    "typescript": "^4.7.4"
  },
  "dependencies": {
    "@rollup/plugin-commonjs": "^24.0.1"
  }
}

创建好上面的 package.json 文件

执行 npm  i 安装好依赖

sdk.config.js

import ts from 'rollup-plugin-typescript2'
import path from 'path'
import dts from 'rollup-plugin-dts';

export default [{
    //入口文件
    input: "./src/sdk/index.ts",
    output: [
        //打包esModule
        {
            file: path.resolve(__dirname, './sdk-dist/index.esm.js'),
            format: "es"
        },
         //打包common js
        {
            file: path.resolve(__dirname, './sdk-dist/index.cjs.js'),
            format: "cjs"
        },
       //打包 AMD CMD UMD
        {
            input: "./src/sdk/index.ts",
            file: path.resolve(__dirname, './sdk-dist/index.js'),
            format: "umd",
            name: "tracker"
        }
 
    ],
    //配置ts
    plugins: [
        ts(),
    ]
}, {
    //打包声明文件
    input: "./src/sdk/index.ts",
    output:{
        file: path.resolve(__dirname, './sdk-dist/index.d.ts'),
        format: "es",
    },
    plugins: [dts()]
}]

sdk/index.ts

export default class MySdk {

  public name: string;
  public version: string;
  public fn:()=>void;

  public constructor(options: any) {
    this.init(options)
  }

  private init(options: any): any {
    this.name = "my-sdk"
    this.version = "1.0.0"
    this.fn = ():void=>{
      console.log("hello sdk")
    }
    if(typeof options === 'object'){
       Object.keys(options).forEach((key:string)=>{
        this[key] = options[key]
      })
    }
    
    console.log("this",this)
  }

}

创建好上面的 sdk.config.js 和 sdk/index.ts  文件 后

就可以打包 sdk 包了

pro.config.js

import ts from 'rollup-plugin-typescript2'
import path from 'path'
import dts from 'rollup-plugin-dts';
import commonjs from '@rollup/plugin-commonjs'

export default [{
    //入口文件
    input: "./src/pro/index.ts",
    output: [
        //打包esModule
        {
            file: path.resolve(__dirname, './dist/index.esm.js'),
            format: "es"
        },
         //打包common js
        {
            file: path.resolve(__dirname, './dist/index.cjs.js'),
            format: "cjs"
        },
       //打包 AMD CMD UMD
        {
            input: "./src/pro/index.ts",
            file: path.resolve(__dirname, './dist/index.js'),
            format: "umd",
            name: "tracker"
        }
 
    ],
    //配置ts
    plugins: [
        commonjs(),
        ts(),
    ]
}, {
    //打包声明文件
    input: "./src/pro/index.ts",
    output:{
        file: path.resolve(__dirname, './dist/index.d.ts'),
        format: "es",
    },
    plugins: [dts()]
}]

/pro/index.ts

import sdk from '../../sdk-dist/index'

const MySdk = new sdk({
  url:"127.0.0.1"
})

MySdk.fn&&MySdk.fn()

在 /pro/index.ts 上使用我们前面打好的sdk包

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ivanfor666'sdk</title>
</head>
<body>
    <script src="/dist/index.js"></script>
    
</body>
</html>

(使用vscode的小伙棒)最后使用 Live Server 插件, 直接以静态服务器形式运行打开 index.html

成功使用sdk。

end!!!

有代码疑问可以直接下载下面源码查阅。

如果学习后对你有帮助,请点个赞,让更多小伙棒得到帮助吧!

源码:

 ivanfor666 / 前端初学

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/401416.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Kafka 分区机制

Kafka 分区机制分区策略轮询策略随机策略按消息键保序策略基于地理位置的分区策略主题 (Topic) &#xff1a;承载真实数据的逻辑容器&#xff0c;主题下还分 n 个分区 Kafka 消息的三级结构&#xff1a; 主题 - 分区 - 消息主题下的每条消息只会保存在某个分区中&#xff0c;…

案例06-复用思想的接口和SQL

目录 一&#xff1a;背景介绍 二&#xff1a;思路&方案 三&#xff1a;过程 1.Controller层接口的复用 2.Mapper层sql语句的复用 四&#xff1a;总结 一&#xff1a;背景介绍 我们在开发项目的过程中非常容易出现的一种现象就是用什么我就直接写什么&#xff0c;就像我…

VPC专有网络介绍

基本概念 VPC&#xff1a;专有网络&#xff0c;云上用户自定义的私有网络。 vSwitch&#xff1a;交换机&#xff0c;组成专有网络的基础网络设备&#xff0c;交换机可以连接不同的云资源&#xff0c;在专有网络内创建云资源时&#xff0c;必须指定云资源所在连接的交换机。 vR…

微服务与分布式——SpringCloud

前提&#xff1a; 当项目逐渐变得庞大起来&#xff0c;简单的 spring 框架可能就不够用了&#xff0c;所以就需要用到分布式架构&#xff0c;我们这里简单介绍一下 springcloud 以及 springcloud 需要依赖的一些组件 目录&#xff1a; 1、分布式简介 2、Eureka 注册中心 3、R…

什么样的人更适合创业?那类人创业更容易成功?

创业是一项充满风险和机遇的事业&#xff0c;成功的创业者需要具备一定的素质和能力。那么&#xff0c;什么样的人更适合创业&#xff1f;哪类人创业更容易成功呢&#xff1f;本文将为您介绍几个适合创业的人群和成功创业者的共同特点。 具有创新精神的人 创业需要不断创新&am…

产品大本营丨计讯物联智慧灯杆网关全系列

在随着智慧城市不断推进&#xff0c;数字信息基础设施已然成为重要驱动。面对新一轮的智慧城市建设&#xff0c;技术赋能结合机制创新&#xff0c;驱动着追城市中生产方式、生活方式、管理方式的变革以及生产要素的配置&#xff0c;全面提升城市的信息化水平。 在新型智慧城市的…

webpack指南(项目篇)——webpack在项目中的运用

系列文章目录 webpack指南&#xff08;基础篇&#xff09;——手把手教你配置webpack webpack指南&#xff08;优化篇&#xff09;——webpack项目优化 文章目录系列文章目录前言一、配置拆分二、修改启动命令三、定义环境变量四、配置路径别名总结前言 前面我们对webpack的基…

Baumer工业相机堡盟相机如何使用自动曝光功能(自动曝光优点和行业应用)(C++)

项目场景 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、计数和识别、运动分析和图像处理。 Baumer的万兆网相机拥有出色的图像处理性能&#xff0c;可以实时传输高分辨率图像。此外&#xff0c;该相机还具…

Microsoft Word RTF Font Table Heap Corruption - 漏洞解析(CVE-2023-21716)

写在最前 如果你是信息安全爱好者&#xff0c;如果你想考一些证书来提升自己的能力&#xff0c;那么欢迎大家来我的 Discord 频道 Northern Bay。邀请链接在这里&#xff1a; https://discord.gg/9XvvuFq9Wb我拥有 OSCP&#xff0c;OSEP&#xff0c;OSWE&#xff0c;OSED&…

每日学术速递3.10

CV - 计算机视觉 | ML - 机器学习 | RL - 强化学习 | NLP 自然语言处理 Subjects: cs.RO 1.Diffusion Policy: Visuomotor Policy Learning via Action Diffusion 标题&#xff1a;扩散策略&#xff1a;通过动作扩散进行视觉运动策略学习 作者&#xff1a;Cheng Chi, Si…

一文解析ethtool 命令的使用

命令简介 ethtool命令用于查询和控制网络设备驱动程序和硬件设置&#xff0c;尤其是有线以太网设备&#xff0c;devname网卡的名称。网卡就像是交换机的一个端口&#xff0c;正常使用我们只是配置网卡IP地址等信息&#xff0c;网卡的速率、双工模式等我们并不关心。通过ethtoo…

3.7day05

二维数组&#xff1a;int arr[10] {1,2,3,5,6,7};{1,2,3,5,6,7};{1,2,3,5,6,7};{1,2,3,5,6,7};{1,2,3,5,6,7};定义语法&#xff1a;int arr[2][3] {{2, 5, 8},{7, 9 10}};int arr[3][5] {{2, 3, 54, 56, 7 }, {2, 67, 4, 35, 9}, {1, 4, 16, 3, 78}};打印&#xff1a;for(i …

【计算机体系结构-05】流水线冒险 (Pipeline Hazards)——控制冒险 (Control Hazards)

1. 流水线冒险 (Pipeline Hazards) 在流水线处理器中会有这样的情况&#xff0c;当前级流水线的指令可能会阻止下一条连续指令在流水线中预期的时钟周期内执行&#xff0c;这样的情况被称为流水线冒险 (Pipeline Hazards)。当发生流水线冒险后将会降低流水化所带来的理想加速比…

IDEA中自动书写setter插件

一般我们创建一个对象后&#xff0c;想要设置属性&#xff0c;是不是我们经常需要一个一个写&#xff0c;当属性很多的时候会非常麻烦&#xff0c;这个插件就可以解决这个问题&#xff1a;它可以一键生成该对象所有的setter方法 下载插件 选择需要设置属性的类名&#xff0c;a…

【Matlab】如何设置多个y轴

MTALAB提供了创建具有两个y轴的图&#xff0c;通过help yyaxis就能看到详细的使用方式。 但是如果要实现3个及以上y轴的图&#xff0c;就没有现成的公式使用了&#xff0c;如下图所示。 具体代码 % 数据准备 x10:0.01:10; y1sin(x1); x20:0.01:10; y2cos(x2); x30:0.01:10;…

C++:详解C++11 线程(一):MingGW 各版本区别及安装说明

MingGW 各版本区别一&#xff1a;MinGW、MinGW-w64 简介二&#xff1a;MinGW 各版本参数说明三&#xff1a;下载解压一&#xff1a;MinGW、MinGW-w64 简介 MinGW&#xff08;全称为 Minimalist GNU for Windows&#xff09;&#xff0c;它实际上是将经典的开源 C 语言编译器 G…

Serviceaccount

K8S鉴权 目录 K8S鉴权 什么是RBAC K8S中的RBAC 角色 角色绑定 主体&#xff08;subject&#xff09; 角色&#xff08;Role和ClusterRole&#xff09; 集群内置权限 cluster-admin admin edit view system开头的y用户 演示 参考 k8s集群相关所有的交互都通过apiserve…

Go 内置运算符 if for switch

算数运算符fmt.Println("103", 103) //103 13 fmt.Println("10-3", 10-3) //10-3 7 fmt.Println("10*3", 10*3) //10*3 30 //除法注意&#xff1a;如果运算的数都是整数&#xff0c;那么除后&#xff0c;去掉小数部分&#xff0c;保留整数部分 f…

redis Big key (俗称大key)

一、什么是Big Key? 大key&#xff0c;其实不是说比较大的主键&#xff0c;而是值比较大的key。key往往是程序可以自行设置的&#xff0c;value往往不受程序控制&#xff0c;因此可能导致value很大。 redis中这些Big Key对应的value值很大&#xff0c;在序列化/反序列化过程中…

SAP MM学习笔记5-SAP中的移动类型实例,对应收货入库以及退货之后的各种情况

对应现实的情况&#xff0c;SAP中有各种各样的收货模式。在SAP中使用移动Type来对应这些情况。 最常用的就是 移动Type 101 收货。没有意外情况&#xff0c;就是正常的收货。 以下是我调查及验证的结果&#xff0c;如果有错误&#xff0c;请指正&#xff0c;谢谢。 移动Type…