Skip to content

I
IPC-footer
Commit 3487c03b authored by Allen Bai's avatar Allen Bai
Browse files
Options

feat: commit

parent 03c05558
Hide whitespace changes
Inline Side-by-side
Showing with 130 additions and 88 deletions
README.md
View file @ 3487c03b
# 推啊埋点 SDK
<!-- @format -->
[推啊前端埋点方案](https://www.yuque.com/docs/share/212c6065-f556-492b-a27d-748d509e3583?#)
## 开发
# 页脚自动添加备案号
如果已经打包过就直接运行如下命令，开启监听，文件改动会同步打包到 dist 下
[技术方案](https://www.yuque.com/tuia/rzutr6/lckv1f)
```
yarn watch
# Or
npm run watch
## 开发
```shell
npm run dev:in_module
```
`src/index.ts` 是入口文件，方法挂载
更改文件之后，在本地调试的时候运行如下命令，把包链接到本地
亦可
```
yarn link
# Or
npm link
```shell
npm run dev:in_html
```
出现如下提示
> You can now run `yarn link "@tuia/log-sdk"` in the projects where you want to use this package and it will be used instead.
## 打包
然后在需要调试的项目中（其他使用这个包的项目）`yarn link "@tuia/log-sdk"` 把本地的包链接到改项目进行调试
```shell
npm run build
```
打包后分别输出 `IPCHelper.main.js` 和 `IPCHelper.module.js`，他们风别遵循 AMD 和 ESMD。
## 打包
## 发布
打包生产环境sdk (压缩后)
### 发布到 jssdk 平台
```
yarn build
# Or
npm run build
```
将打包后的 `IPCHelper.main.js` 发布到 [sdk 发布平台](http://jssdk.tuia.cn/#/publish/advert)
打包开发环境 (压缩前)方便调试
路径： 落地页 sdk -> 发布 -> 选择 ipc-footer-sdk
```
yarn build:debug
# Or
npm run build:debug
```
### 发布到 npm
## 发布前准备工作
1. 首先确保已经登录 npm 账号并且拥有发布权限
2. 生成版本号、打tag和生成更改日志，其他用法详情见[standard-version](https://github.com/conventional-changelog/standard-version)
2. 生成版本号、打 tag 和生成更改日志，其他用法详情见[standard-version](https://github.com/conventional-changelog/standard-version)
1) 指定版本号，如0.1.0-beta
1) 指定版本号，如 0.1.0-beta
```
yarn release -- --release-as <版本号>
# Or
# Or
npm run release -- --release-as <版本号>
```
2) 不指定版本号，直接自动累加
2. 不指定版本号，直接自动累加
```
yarn release
# Or
# Or
npm run release
```
......@@ -75,22 +65,22 @@ git push --follow-tags origin master
```
yarn deploy
or
or
npm run deploy
```
## 注意事项
如果直接使用 `npm publish --access public` 命令发布的话，发布之前要保证根目录下的 dist 包是最新的，版本号是最新的（之前没有已经发布的版本），所有代码都提交到远程 master
在发布npm版本之后，要执行 `npm run pub`同步最新的版本到 cdn 以便用来script标签引入来使用
在发布 npm 版本之后，要执行 `npm run pub`同步最新的版本到 cdn 以便用来 script 标签引入来使用
`yarn release` 和 `yarn deploy` 是这一系列的组合命令
## TODO
- [x] elint+prettier+commit 规范代码开发&提交
- [x] standard-version 生成版本号、打tag和生成更改日志
- [x] 支持模块化方式导入和script标签方式使用
- [x] standard-version 生成版本号、打 tag 和生成更改日志
- [x] 支持模块化方式导入和 script 标签方式使用
## SDK 使用
[推啊埋点SDK使用文档](https://www.yuque.com/docs/share/444fe742-1624-4298-937d-af8f9a14043d)
\ No newline at end of file
[推啊埋点 SDK 使用文档](https://www.yuque.com/docs/share/444fe742-1624-4298-937d-af8f9a14043d)
build.js
View file @ 3487c03b
......@@ -10,14 +10,14 @@ const pkg = require('./package.json')
const publicPath = `//yun.tuisnake.com/tuia/${pkg.name}/${pkg.version}/dist/`
const deploy = async () => {
console.log(chalk.cyan('dist文件 开始上传>>>>>>>>>>\n'))
const uploader = await new TuiaAutoUpload({
dir: path.join(__dirname, `./dist/`),
originDir: `/tuia/${pkg.name}/${pkg.version}/dist/`
})
console.log(chalk.cyan('dist文件 开始上传>>>>>>>>>>\n'))
const uploader = await new TuiaAutoUpload({
dir: path.join(__dirname, `./dist/`),
originDir: `/tuia/${pkg.name}/${pkg.version}/dist/`
})
await uploader.start()
console.log(chalk.cyan(`入口文件cdn地址为：\n ${publicPath}logHub.main.js`))
await uploader.start()
console.log(chalk.cyan(`入口文件cdn地址为：\n ${publicPath}logHub.main.js`))
}
deploy()
example/inHTML/h5_online.html 0 → 100644
View file @ 3487c03b
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>线上页面引入方法</title>
<style>
* {
margin: 0;
padding: 0;
}
html,
body {
background-color: rgb(35, 155, 86);
}
</style>
</head>
<body>
<div style="height: 200vh;border:5px slateblue solid"></div>
<script>
(function (e) {
const IPCFooterConfig = {}
function loadScript() {
var r = document.createElement("script");
(r.async = !0),
(r.src = "//yun.dui88.com/ipc-footer-sdk/ipc-footer-sdk.js"),
(r.crossOrigin = "anonymous"),
(r.onload = function () {
window.__TUIA_IPC_HELPER__ && window.__TUIA_IPC_HELPER__.mountIPCFooter(IPCFooterConfig)
}),
document.body && document.body.appendChild(r);
};
loadScript()
})(window);
</script>
</body>
</html>
example/inHTML/index.html
View file @ 3487c03b
......@@ -42,6 +42,10 @@
<h5>带滚动的</h5>
<iframe class="phone" src="./h5_scroll.html" frameborder="0"></iframe>
</div>
<div class="box">
<h5>线上页面引入方式</h5>
<iframe class="phone" src="./h5_online.html" frameborder="0"></iframe>
</div>
</div>
</body>
......
example/inModule/webpack.config.js
View file @ 3487c03b
......@@ -10,7 +10,8 @@ module.exports = {
path: path.resolve(__dirname, './dist/')
},
devServer: {
hot: true
hot: true,
open: true
},
module: {
rules: []
......
package.json
View file @ 3487c03b
......@@ -4,15 +4,15 @@
"description": "推啊IPC备案号获取",
"main": "libs/tuiaIPC.js",
"module": "libs/tuiaIPC.module.js",
"author": "ltt",
"author": "allenBai",
"license": "MIT",
"scripts": {
"watch": "rollup -c -w",
"build": "npm run clean && cross-env NODE_ENV=prod && rollup -c",
"build:debug": "npm run clean && cross-env NODE_ENV=dev rollup -c",
"clean": "rm -rf ./dist",
"test:in_html": "npm run watch & concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234/example/inHTML/index.html\"",
"test:in_module": "webpack serve --config ./example/inModule/webpack.config.js"
"dev:in_html": "npm run watch & concurrently \"http-server -a localhost -p 1234\" \"open http://localhost:1234/example/inHTML/index.html\"",
"dev:in_module": "npm run watch & webpack serve --config ./example/inModule/webpack.config.js"
},
"typescript": ">=4.0",
"files": [
......
rollup.config.js
View file @ 3487c03b
......@@ -9,37 +9,37 @@ import { DEFAULT_EXTENSIONS } from '@babel/core'
const isDev = process.env.NODE_ENV === 'dev'
export default {
input: './src/index.ts', // 入口文件
output: [
{
file: `dist/IPCHelper.main.js`, // 打包之后的文件名以及存放位置
format: 'umd', // 以什么模式打包，支持umd,cmd,esm...
name: '__TUIA_IPC_HELPER__'
},
{
file: `dist/IPCHelper.module.js`, // 打包之后的文件名以及存放位置
format: 'es', // 以什么模式打包，支持umd,cmd,esm...
name: '__TUIA_IPC_HELPER__'
}
],
plugins: [
// https://github.com/rollup/rollup-plugin-babel/issues/318
// put TS plugin before babel plugin in your plugins array
typescript({
exclude: 'node_modules/**',
typescript: require('typescript')
}),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
// babel 默认不支持 ts 需要手动添加
extensions: [...DEFAULT_EXTENSIONS, '.ts']
}),
nodeResolve({
mainField: ['jsnext:main', 'browser', 'module', 'main'],
browser: true
}),
commonjs(),
!isDev && terser()
]
input: './src/index.ts', // 入口文件
output: [
{
file: `dist/IPCHelper.main.js`, // 打包之后的文件名以及存放位置
format: 'umd', // 以什么模式打包，支持umd,cmd,esm...
name: '__TUIA_IPC_HELPER__'
},
{
file: `dist/IPCHelper.module.js`, // 打包之后的文件名以及存放位置
format: 'es', // 以什么模式打包，支持umd,cmd,esm...
name: '__TUIA_IPC_HELPER__'
}
],
plugins: [
// https://github.com/rollup/rollup-plugin-babel/issues/318
// put TS plugin before babel plugin in your plugins array
typescript({
exclude: 'node_modules/**',
typescript: require('typescript')
}),
babel({
exclude: 'node_modules/**',
runtimeHelpers: true,
// babel 默认不支持 ts 需要手动添加
extensions: [...DEFAULT_EXTENSIONS, '.ts']
}),
nodeResolve({
mainField: ['jsnext:main', 'browser', 'module', 'main'],
browser: true
}),
commonjs(),
!isDev && terser()
]
}
src/index.ts
View file @ 3487c03b
......@@ -90,7 +90,13 @@ const defaultBoardStyles: Optional<CSSStyleDeclaration> = {
}
async function mountIPCFooter(opts: IPCFooterOptions = {}) {
const IPCNumberString = await getIPCByDomain(opts.domain || location.host)
let IPCNumberString = ''
try {
IPCNumberString = (await getIPCByDomain(opts.domain || location.host)) as string
} catch (err) {
console.log('备案号获取失败')
}
const IPCFooter = document.createElement('div')
const IPCBoard = document.createElement('a')
const targetDom = opts.dom || document.querySelector('body')
......@@ -98,7 +104,7 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) {
IPCBoard.id = '__IPC_board__'
addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) })
IPCBoard.innerText = (IPCNumberString as string) || ''
IPCBoard.innerText = (IPCNumberString as string) || 'IPC备-'
IPCFooter.appendChild(IPCBoard)
targetDom.appendChild(IPCFooter)
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment