1.新建文件夹,用来存放将要创建的项目
2.安装rollup cnpm install rollup --save-dev
3.添加.gitignore文件
4.创建rollup.config.js
**node版本不能低于14.18
**当node版本设置成16.16.0,提示nvm版本从1.1.7要升到1.1.9,还有其他安装环境的bug
**后又把node版本设置到14.19.0
项目目录:
toolsfile={
config:{
index.ts 存放配置文件
}
libs:{
hTools.ts //把所有封装的jsdk导出的ts
sdk1.ts
sdk2.ts
}
index.js //入口文件
rollup.config.js
package.json //自动生成
tsconfig.json
README.md
tsconfig.json
}
package.json 修改package.json部分参数 可用npm init
{
"devDependencies": {
"rollup": "^3.3.0"
},
"type": "module",
"scripts": {
"build": "rollup -c",
"dev": "rollup -c rollup.config.js"
},
"dependencies": {
"@rollup/plugin-commonjs": "^23.0.2",
"@rollup/plugin-terser": "^0.1.0",
"qs": "^6.11.0",
"rollup-plugin-typescript2": "^0.34.1",
"typescript": "^4.9.3"
},
"name": "h-tools",
"description": "# XX sdk 介绍",
"version": "1.0.0",
"main": "libs/hTools.ts",
"repository": {
"type": "git",
"url": "http://git.xxxx.xxx" //存放项目的git地址
},
"author": "",
"license": "ISC"
}
rollup.config.js
import typescript from "rollup-plugin-typescript2";
import commonjs from '@rollup/plugin-commonjs'
import terser from '@rollup/plugin-terser'
export default {
input: "libs/hTools.ts",
external: ["qs"],
output: {
file: "./dist/hTools.js",
format: "umd",
name: "hTools",
globals:{
qs:"qs"
}
},
plugins: [typescript(),commonjs(), terser()]
};
libs/hTools.ts
import browserType from "./browserType";
export default {
browserType
}
export {
browserType
}
//export default 和export同时使用,编译时会有警告,不影响封装代码使用
//编译成js文件,npm run build
index.js
import hTools from "./dist/hTools";
export default hTools;
config/index.ts
export default {
urlSchema: {
android: "2222/open",
ios: "tinytiger1234567890:///open",
appStore: "itms-apps://itunes.apple.com/app/id1234567890",
}
}
README.md
## 安装
浏览器环境:
通过 npm 安装:
```
// npm安装
cnpm install git+http://git.xxx.cn/web/XXX.git --save (用npm安装不成功)
// 在项目中使用
import { getToken } from 'h-tools';
const token = getToken();
或者
import hTools from 'h-tools';
hTools.getToken();
```
### getToken 获取app token
`getToken`
```
import { getToken } from 'h-tools'
const token:string|null = getToken();
```
<table>
<tr>
<th>参数名称</th>
<th>说明</th>
<th>类型</th>
<th>默认值</th>
</tr>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
</table>
---
//table 就是普通的表格
// ---是分割线
// > aaaa 下级标题行
更多插件使用可参考:https://blog.csdn.net/weixin_30372331/article/details/118987807,插件介绍会比较详细