Skip to content

SDK教程（一:SDK准备工作）

Jump to bottom
magic edited this page Nov 4, 2020 · 3 revisions

考虑上面这些我们就开始做吧

1.初始化SDK目录

mkdir learn-sdk
cd learn-sdk
npm init

QQ20201029-150938

过程中让你输入SDK名称，输入后，其他回车即可。

完成后，目录下有一个package.json文件

{
  "name": "learn-sdk",
  "version": "1.0.0",
  "description": "学习一个SDK开发",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [
    "sdk"
  ],
  "author": "magic",
  "license": "ISC"
}

2.使用安装Webpack来打包

webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图对应映射到项目所需的每个模块，并生成一个或多个 bundle。

// 安装Webpack
tanpeng:learn-sdk tanpeng$ npm install --save-dev webpack
npm WARN learn-sdk@1.0.0 No repository field.

+ webpack@5.3.1
added 81 packages from 121 contributors and audited 81 packages in 60.452s
found 0 vulnerabilities

这里没有指定webpack版本，他默认按照最新稳定版，目前目录结构

.
├── node_modules  //依赖目录
├── package-lock.json
└── package.json

npm init 只为我们生成了 package.json 文件。我们应当参照CommonJS的目录规范创建我们的文件夹和脚本文件。

webpack 更多知识，可以异步webpack官网

https://webpack.docschina.org/guides/getting-started/

我们开始建立SDK目录，首先我们把我们写的所有SDK代码都放src目录下面

mkdir src

然后在建立整个SDK的目录结构

├── index.js
├── package-lock.json
├── package.json
└── src
    ├── index.html // 目前为空
    ├── index.js // 目前为空
    └── lib
    		└── app.js

我们写入默认测试代码

./index.js

module.exports = require('./src/lib/app')

根目录下面的index，我们只用来引入SDK的开始文件

然后app.js测试代码

./src/lib/app.js

这里是我们的sdk具体业务，由于是测试，我直接导出一个Bmob对象，里面只有一个Echo方法，返回1

const Bmob = global.Bmob || {}  //定义一个空对象

Bmob.Echo = ()=>{
  return 1
}
window.Bmob = Bmob  //导出到浏览器window 对象下 暴露一个公共变量
module.exports = Bmob // 导出Bmob对象

测试代码写好后，我们创建打包环境

在项目根目录下创建 webpack.config.js, 前面提到过 webpack 是基于 node环境的， 所以同样采用的是 Commonjs 包管理规范。

webpack.config.js代码

const path = require('path');

module.exports = {
  entry: './index.js',
  output: {
    filename: 'sdk.js',
    path: path.resolve(__dirname, 'dist'),
  },
};

这里入口以根目录下面的index.js ,src为空的那个index先暂时不管他，待会我们运行npm run dev测试用。

webpack配置好后，我们可以测试代码打包压缩后的效果，命令行输入

npx webpack --config webpack.config.js

执行后，他会生成dist 目录，并且下面有个sdk.js 里面包含了app.js里面导出的对象。

3.编写测试代码

现在SDK打包出来了，如何测试？

很简单，我们src 下面有个index.html 我们在下面写入代码

<!doctype html>
  <html>
   <head>
     <title>学习SDK开发</title>
    <script src="../dist/sdk.js">
    </script>
   </head>
   <body>
    <script>
      // 打印执行Echo函数，Echo我们的值是1，输出结果为1
      console.log(Bmob.Echo())
    </script>

   </body>
  </html>

4.运行测试效果

因为我们这是简单的单HTML 引入js文件，直接进入src目录，双击浏览器打开看效果

QQ20201029-170903

这样就基本完成了我们的H5 SDK 的架构，后面封装好业务就可以。这里我发布一个版本叫v1.0.0，大家需要学习的，可以克隆下来，代码地址 https://github.com/magic007/learn-sdk.git

大家注意没有，如果每次都需要执行npx webpack --config webpack.config.js 去打包一次SDK才能刷新h5看效果，非常麻烦。

Clone this wiki locally