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 ```shell
npm run watch npm run dev:in_module
``` ```
`src/index.ts` 是入口文件，方法挂载 亦可
更改文件之后，在本地调试的时候运行如下命令，把包链接到本地
``` ```shell
yarn link npm run dev:in_html
# Or
npm link
``` ```
出现如下提示 ## 打包
> 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 平台
``` 将打包后的 `IPCHelper.main.js` 发布到 [sdk 发布平台](http://jssdk.tuia.cn/#/publish/advert)
yarn build
# Or
npm run build
```
打包开发环境 (压缩前)方便调试 路径： 落地页 sdk -> 发布 -> 选择 ipc-footer-sdk
``` ### 发布到 npm
yarn build:debug
# Or
npm run build:debug
```
## 发布前准备工作 ## 发布前准备工作
1. 首先确保已经登录 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 <版本号> yarn release -- --release-as <版本号>
# Or # Or
npm run release -- --release-as <版本号> npm run release -- --release-as <版本号>
``` ```
2) 不指定版本号，直接自动累加 2. 不指定版本号，直接自动累加
``` ```
yarn release yarn release
# Or # Or
npm run release npm run release
``` ```
...@@ -75,22 +65,22 @@ git push --follow-tags origin master ...@@ -75,22 +65,22 @@ git push --follow-tags origin master
``` ```
yarn deploy yarn deploy
or or
npm run deploy npm run deploy
``` ```
## 注意事项 ## 注意事项
如果直接使用 `npm publish --access public` 命令发布的话，发布之前要保证根目录下的 dist 包是最新的，版本号是最新的（之前没有已经发布的版本），所有代码都提交到远程 master 如果直接使用 `npm publish --access public` 命令发布的话，发布之前要保证根目录下的 dist 包是最新的，版本号是最新的（之前没有已经发布的版本），所有代码都提交到远程 master
在发布npm版本之后，要执行 `npm run pub`同步最新的版本到 cdn 以便用来script标签引入来使用 在发布 npm 版本之后，要执行 `npm run pub`同步最新的版本到 cdn 以便用来 script 标签引入来使用
`yarn release` 和 `yarn deploy` 是这一系列的组合命令 `yarn release` 和 `yarn deploy` 是这一系列的组合命令
## TODO ## TODO
- [x] elint+prettier+commit 规范代码开发&提交 - [x] elint+prettier+commit 规范代码开发&提交
- [x] standard-version 生成版本号、打tag和生成更改日志 - [x] standard-version 生成版本号、打 tag 和生成更改日志
- [x] 支持模块化方式导入和script标签方式使用 - [x] 支持模块化方式导入和 script 标签方式使用
## SDK 使用 ## 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') ...@@ -10,14 +10,14 @@ const pkg = require('./package.json')
const publicPath = `//yun.tuisnake.com/tuia/${pkg.name}/${pkg.version}/dist/` const publicPath = `//yun.tuisnake.com/tuia/${pkg.name}/${pkg.version}/dist/`
const deploy = async () => { const deploy = async () => {
console.log(chalk.cyan('dist文件 开始上传>>>>>>>>>>\n')) console.log(chalk.cyan('dist文件 开始上传>>>>>>>>>>\n'))
const uploader = await new TuiaAutoUpload({ const uploader = await new TuiaAutoUpload({
dir: path.join(__dirname, `./dist/`), dir: path.join(__dirname, `./dist/`),
originDir: `/tuia/${pkg.name}/${pkg.version}/dist/` originDir: `/tuia/${pkg.name}/${pkg.version}/dist/`
}) })
await uploader.start() await uploader.start()
console.log(chalk.cyan(`入口文件cdn地址为：\n ${publicPath}logHub.main.js`)) console.log(chalk.cyan(`入口文件cdn地址为：\n ${publicPath}logHub.main.js`))
} }
deploy() 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 @@ ...@@ -42,6 +42,10 @@
<h5>带滚动的</h5> <h5>带滚动的</h5>
<iframe class="phone" src="./h5_scroll.html" frameborder="0"></iframe> <iframe class="phone" src="./h5_scroll.html" frameborder="0"></iframe>
</div> </div>
<div class="box">
<h5>线上页面引入方式</h5>
<iframe class="phone" src="./h5_online.html" frameborder="0"></iframe>
</div>
</div> </div>
</body> </body>
......
example/inModule/webpack.config.js
View file @ 3487c03b
...@@ -10,7 +10,8 @@ module.exports = { ...@@ -10,7 +10,8 @@ module.exports = {
path: path.resolve(__dirname, './dist/') path: path.resolve(__dirname, './dist/')
}, },
devServer: { devServer: {
hot: true hot: true,
open: true
}, },
module: { module: {
rules: [] rules: []
......
package.json
View file @ 3487c03b
...@@ -4,15 +4,15 @@ ...@@ -4,15 +4,15 @@
"description": "推啊IPC备案号获取", "description": "推啊IPC备案号获取",
"main": "libs/tuiaIPC.js", "main": "libs/tuiaIPC.js",
"module": "libs/tuiaIPC.module.js", "module": "libs/tuiaIPC.module.js",
"author": "ltt", "author": "allenBai",
"license": "MIT", "license": "MIT",
"scripts": { "scripts": {
"watch": "rollup -c -w", "watch": "rollup -c -w",
"build": "npm run clean && cross-env NODE_ENV=prod && rollup -c", "build": "npm run clean && cross-env NODE_ENV=prod && rollup -c",
"build:debug": "npm run clean && cross-env NODE_ENV=dev rollup -c", "build:debug": "npm run clean && cross-env NODE_ENV=dev rollup -c",
"clean": "rm -rf ./dist", "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\"", "dev: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_module": "npm run watch & webpack serve --config ./example/inModule/webpack.config.js"
}, },
"typescript": ">=4.0", "typescript": ">=4.0",
"files": [ "files": [
......
rollup.config.js
View file @ 3487c03b
...@@ -9,37 +9,37 @@ import { DEFAULT_EXTENSIONS } from '@babel/core' ...@@ -9,37 +9,37 @@ import { DEFAULT_EXTENSIONS } from '@babel/core'
const isDev = process.env.NODE_ENV === 'dev' const isDev = process.env.NODE_ENV === 'dev'
export default { export default {
input: './src/index.ts', // 入口文件 input: './src/index.ts', // 入口文件
output: [ output: [
{ {
file: `dist/IPCHelper.main.js`, // 打包之后的文件名以及存放位置 file: `dist/IPCHelper.main.js`, // 打包之后的文件名以及存放位置
format: 'umd', // 以什么模式打包，支持umd,cmd,esm... format: 'umd', // 以什么模式打包，支持umd,cmd,esm...
name: '__TUIA_IPC_HELPER__' name: '__TUIA_IPC_HELPER__'
}, },
{ {
file: `dist/IPCHelper.module.js`, // 打包之后的文件名以及存放位置 file: `dist/IPCHelper.module.js`, // 打包之后的文件名以及存放位置
format: 'es', // 以什么模式打包，支持umd,cmd,esm... format: 'es', // 以什么模式打包，支持umd,cmd,esm...
name: '__TUIA_IPC_HELPER__' name: '__TUIA_IPC_HELPER__'
} }
], ],
plugins: [ plugins: [
// https://github.com/rollup/rollup-plugin-babel/issues/318 // https://github.com/rollup/rollup-plugin-babel/issues/318
// put TS plugin before babel plugin in your plugins array // put TS plugin before babel plugin in your plugins array
typescript({ typescript({
exclude: 'node_modules/**', exclude: 'node_modules/**',
typescript: require('typescript') typescript: require('typescript')
}), }),
babel({ babel({
exclude: 'node_modules/**', exclude: 'node_modules/**',
runtimeHelpers: true, runtimeHelpers: true,
// babel 默认不支持 ts 需要手动添加 // babel 默认不支持 ts 需要手动添加
extensions: [...DEFAULT_EXTENSIONS, '.ts'] extensions: [...DEFAULT_EXTENSIONS, '.ts']
}), }),
nodeResolve({ nodeResolve({
mainField: ['jsnext:main', 'browser', 'module', 'main'], mainField: ['jsnext:main', 'browser', 'module', 'main'],
browser: true browser: true
}), }),
commonjs(), commonjs(),
!isDev && terser() !isDev && terser()
] ]
} }
src/index.ts
View file @ 3487c03b
...@@ -90,7 +90,13 @@ const defaultBoardStyles: Optional<CSSStyleDeclaration> = { ...@@ -90,7 +90,13 @@ const defaultBoardStyles: Optional<CSSStyleDeclaration> = {
} }
async function mountIPCFooter(opts: IPCFooterOptions = {}) { 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 IPCFooter = document.createElement('div')
const IPCBoard = document.createElement('a') const IPCBoard = document.createElement('a')
const targetDom = opts.dom || document.querySelector('body') const targetDom = opts.dom || document.querySelector('body')
...@@ -98,7 +104,7 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) { ...@@ -98,7 +104,7 @@ async function mountIPCFooter(opts: IPCFooterOptions = {}) {
IPCBoard.id = '__IPC_board__' IPCBoard.id = '__IPC_board__'
addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) }) addStyles(IPCFooter, { ...defaultFooterStyles, ...(opts.footerStyles || {}) })
addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) }) addStyles(IPCBoard, { ...defaultBoardStyles, ...(opts.footerStyles || {}) })
IPCBoard.innerText = (IPCNumberString as string) || '' IPCBoard.innerText = (IPCNumberString as string) || 'IPC备-'
IPCFooter.appendChild(IPCBoard) IPCFooter.appendChild(IPCBoard)
targetDom.appendChild(IPCFooter) 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