Merge pull request #9 from analyticsjs/develop

Release v2.1.0

.eslintrc.js

@@ -0,0 +1,14 @@
+module.exports = {
+  root: true,
+  env: {
+    browser: true
+  },
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    ecmaVersion: 2020
+  },
+  plugins: [
+    '@typescript-eslint'
+  ],
+  rules: {}
+};

.github/FUNDING.yml

@@ -9,4 +9,4 @@ community_bridge: # Replace with a single Community Bridge project-name e.g., cl
 liberapay: # Replace with a single Liberapay username
 issuehunt: # Replace with a single IssueHunt username
 otechie: # Replace with a single Otechie username
-custom: https://git.io/Sponsor
+custom: [chengpeiquan](https://github.com/chengpeiquan/sponsor)

README.md

@@ -3,7 +3,7 @@ vue-baidu-analytics 使用说明
 
 基于 Vue 开发的百度统计插件，可以在 `Vue-CLI 脚手架项目` 或者 `引入了 Vue 相关 CDN 的普通页面`，以及 `VuePress` 项目上使用，使用本插件的项目需要引入 `Vue Router`。
 
-> @v2.0版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
+> v2.0 版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对 Vue 3.0 感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
 
 ## 功能
 
@@ -29,13 +29,13 @@ Vue 3.0 版本：[vue-baidu-analytics demo for Vue 3.x](https://chengpeiquan.git
 
 ## 安装
 
-方式一：通过npm安装
+方式一：通过 NPM 安装
 
 ```
 npm install vue-baidu-analytics --save-dev
 ```
 
-方式二：通过cdn安装
+方式二：通过 CDN 安装
 
 ```html
 <script src="https://cdn.jsdelivr.net/npm/vue-baidu-analytics/dist/vue-baidu-analytics.min.js"></script>
@@ -51,7 +51,7 @@ isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在
 
 ## 使用
 
-通过npm安装的项目，需要先在 `main.js` 里引入插件（通过cdn则无需该步骤）。
+通过 NPM 安装的项目，需要先在 `main.js` 里引入插件（通过 CDN 则无需该步骤）。
 
 ```js
 import baiduAnalytics from 'vue-baidu-analytics'
@@ -59,7 +59,7 @@ import baiduAnalytics from 'vue-baidu-analytics'
 
 安装插件后，在 `main.js` 引入以下代码（注意区分 Vue 2.0 和 Vue 3.0 的用法区别），即可开启自动上报功能，首次访问页面会部署统计代码并提交第一次访问数据上报。
 
-后续在路由切换过程中，也会根据路由的切换提交相应的url信息到友盟统计。
+后续在路由切换过程中，也会根据路由的切换提交相应的url信息到百度统计。
 
 ### 在 Vue 2.0 里使用
 
@@ -132,17 +132,17 @@ export default ({ Vue, router }) => {
 
 ## 方法
 
-插件目前封装了两个常用的api，统一挂载到Vue实例上的 `$pushBAIDU` 去调用。
+插件目前封装了两个常用的 API ，统一挂载到 Vue 实例上的 `$pushBAIDU` 去调用。
 
 注：如果配置了多个站点 id ，会同时上报给所有站点。
 
 ### 手动上报页面 PV
 
-api名称|功能说明
+API 名称|功能说明
 :-:|-
 pv|手动执行PV数据上报
 
-**api参数**
+**API 参数**
 
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
@@ -168,11 +168,11 @@ proxy.$pushBAIDU.pv(pageUrl.value);
 
 ### 手动上报事件分析
 
-api名称|功能说明
+API 名称|功能说明
 :-:|-
 event|手动执行事件分析数据上报
 
-**api参数**
+**API 参数**
 
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-

demo/js/main-for-vue2.js

@@ -11,13 +11,13 @@ const router = new VueRouter({
 
 /**
  * 引入统计插件
+ * @description 自 v2.1.0 版本开始，需要使用 .default 去激活插件
  */
-Vue.use(baiduAnalytics, {
+Vue.use(baiduAnalytics.default, {
   router: router,
   siteIdList: [
     'aaaaaaaaaaaaaaaaaaa',
-    'bbbbbbbbbbbbbbbbbbb',
+    'bbbbbbbbbbbbbbbbbbb'
-    'ccccccccccccccccccc'
   ],
   isDebug: true
 });
@@ -35,17 +35,43 @@ const app = new Vue({
       category: '',
       action: '',
       label: '',
-      value: ''
+      value: '',
+
+      // 也可以绑定一个钩子变量去使用
+      baidu: baiduAnalytics.usePush()
     }
   },
   mounted () {
+    this.baidu.pv('/use-push-api/?from=mounted');
   },
   methods: {
+    /**
+     * 提交 pv
+     * @description 支持两种推送方式
+     */
     pv () {
+      // 使用默认全局 API
       this.$pushBAIDU.pv(this.pageUrl);
+
+      // 使用钩子 API
+      // this.baidu.pv(this.pageUrl);
     },
+
+    /**
+     * 提交事件
+     * @description 支持两种推送方式
+     */
     event () {
-      this.$pushBAIDU.event(
+      // 使用默认全局 API
+      // this.$pushBAIDU.event(
+      //   this.category,
+      //   this.action,
+      //   this.label,
+      //   this.value
+      // );
+
+      // 使用钩子 API
+      this.baidu.event(
         this.category,
         this.action,
         this.label,

demo/js/main-for-vue3.js

@@ -3,6 +3,7 @@
  */
 const { createRouter, createWebHashHistory } = VueRouter;
 const { createApp, getCurrentInstance, ref } = Vue;
+const { usePush } = baiduAnalytics;
 
 
 /**
@@ -22,8 +23,17 @@ const router = createRouter({
  */
 const app = {
   setup () {
-    // 插件要用到的一个代理组件
+    /**
-    const { proxy } = getCurrentInstance();
+     * 新的推荐方式
+     * @description 创建一个钩子变量去使用，更适合于 TypeScript 项目
+     */
+    const baidu = usePush();
+
+    /**
+     * 原来的方式
+     * @description 用代理组件去操作，对 TS 项目不够友好
+     */
+    // const { proxy } = getCurrentInstance();
 
     // 初始化要用到的数据
     const pageUrl = ref('');
@@ -32,19 +42,38 @@ const app = {
     const label = ref('');
     const value = ref('');
 
-    // 提交pv的操作
+    /**
+     * 提交 pv
+     * @description 支持两种推送方式
+     */
     const pv = () => {
-      proxy.$pushBAIDU.pv(pageUrl.value);
+      // 通过钩子去操作
+      baidu.pv(pageUrl.value);
+
+      // 通过代理组件去操作
+      // proxy.$pushBAIDU.pv(pageUrl.value);
     }
 
-    // 提交事件的操作
+    /**
+     * 提交事件
+     * @description 支持两种推送方式
+     */
     const event = () => {
-      proxy.$pushBAIDU.event(
+      // 通过钩子去操作
+      baidu.event(
         category.value,
         action.value,
         label.value,
         value.value
       );
+
+      // 通过代理组件去操作
+      // proxy.$pushBAIDU.event(
+      //   category.value,
+      //   action.value,
+      //   label.value,
+      //   value.value
+      // );
     }
 
     // Vue 3.0 需要把模板要用到的东西 return 出去
@@ -72,12 +101,11 @@ createApp(app)
   .use(router)
 
   // 启动插件
-  .use(baiduAnalytics, {
+  .use(baiduAnalytics.default, {
     router: router,
     siteIdList: [
       'aaaaaaaaaaaaaaaaaaa',
-      'bbbbbbbbbbbbbbbbbbb',
+      'bbbbbbbbbbbbbbbbbbb'
-      'ccccccccccccccccccc'
     ],
     isDebug: true
   })

demo/vue2.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>[Vue2] vue baidu analytics demo</title>
-  <script src="https://unpkg.com/vue@2"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
-  <script src="https://unpkg.com/vue-router@3"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@3"></script>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
 
@@ -59,8 +59,8 @@
   </div>
 
   <script src="../dist/vue-baidu-analytics.js"></script>
-  <script src="js/routes.js"></script>
+  <script src="./js/routes.js"></script>
-  <script src="js/main-for-vue2.js"></script>
+  <script src="./js/main-for-vue2.js"></script>
 
 </body>
 </html>

demo/vue3.html

@@ -4,9 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>[Vue3] vue baidu analytics demo</title>
-  <script src="https://unpkg.com/vue@3"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
-  <script src="https://unpkg.com/vue-router@4"></script>
+  <script src="https://cdn.jsdelivr.net/npm/vue-router@4"></script>
-  <link rel="stylesheet" href="css/style.css">
+  <link rel="stylesheet" href="./css/style.css">
 </head>
 <body>
 
@@ -59,8 +59,8 @@
   </div>
 
   <script src="../dist/vue-baidu-analytics.js"></script>
-  <script src="js/routes.js"></script>
+  <script src="./js/routes.js"></script>
-  <script src="js/main-for-vue3.js"></script>
+  <script src="./js/main-for-vue3.js"></script>
 
 </body>
 </html>

dist/main.d.ts

@@ -1 +1,16 @@
-export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): boolean;
+/**
+ * 暴露 Hooks
+ * @description 解决 Vue 3.0 使用全局变量很麻烦的问题
+ * @example
+ * import { usePush } from 'vue-baidu-analytics'
+ * const baidu = usePush();
+ * baidu.pv('/');
+ */
+export declare function usePush(): {
+    pv: (pageUrl: string) => void;
+    event: (category: string, action: string, label: string, value: number) => void;
+};
+/**
+ * 定义插件
+ */
+export default function install(Vue: Vue, { router, siteIdList, isDebug }: Partial<Options>): false | undefined;

dist/modules/baidu.d.ts

@@ -1,10 +1,26 @@
+/**
+ * 定义基础配置
+ * 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
+ */
 declare class BAIDU {
     siteId: string;
     isDebug: boolean;
     constructor(siteId?: string, isDebug?: boolean);
+    /**
+     * 初始化
+     */
     init(): void;
+    /**
+     * 设置要响应的站点
+     */
     setAccount(): void;
+    /**
+     * 提交PV、UV
+     */
     trackPageview(pageUrl: string): void;
-    trackEvent(category: string, action: string, label: string, value: number): boolean;
+    /**
+     * 提交点击事件
+     */
+    trackEvent(category: string, action: string, label: string, value: number): void;
 }
 export default BAIDU;

dist/modules/getRouterMode.d.ts

@@ -1,2 +0,0 @@
-declare const getRouterMode: (vueVersion: number, router: any) => string;
-export default getRouterMode;

dist/modules/getVueVersion.d.ts

@@ -1,2 +1,6 @@
+/**
+ * 获取Vue的版本
+ * @return 2=Vue2.x, 3=Vue3.x
+ */
 declare const getVueVersion: (Vue: Vue) => number;
 export default getVueVersion;

dist/modules/pushBAIDU.d.ts

@@ -1,9 +1,21 @@
+/**
+ * 定义推送操作
+ */
 declare class PushBAIDU {
     siteIdList: string[];
     isDebug: boolean;
     constructor(siteIdList: string[], isDebug: boolean);
+    /**
+     * 批量部署站点
+     */
     init(): void;
+    /**
+     * 批量提交pv上报
+     */
     pv(pageUrl: string): void;
+    /**
+     * 批量提交事件上报
+     */
     event(category: string, action: string, label: string, value: number): void;
 }
 export default PushBAIDU;

dist/vue-baidu-analytics.js

@@ -1,59 +1,102 @@
-/** 
+/*!
  * name: vue-baidu-analytics
- * version: v2.0.3
+ * version: v2.1.0
  * author: chengpeiquan
  */
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
+    typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports) :
-  typeof define === 'function' && define.amd ? define(factory) :
+    typeof define === 'function' && define.amd ? define(['exports'], factory) :
-  (global = global || self, global.baiduAnalytics = factory());
+    (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.baiduAnalytics = {}));
-}(this, (function () { 'use strict';
+}(this, (function (exports) { 'use strict';
 
-  var BAIDU = (function () {
+    /*! *****************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    function __spreadArray(to, from) {
+      for (var i = 0, il = from.length, j = to.length; i < il; i++, j++) to[j] = from[i];
+
+      return to;
+    }
+
+    /**
+     * 定义基础配置
+     * 官方文档 https://tongji.baidu.com/open/api/more?p=guide_overview
+     */
+    var BAIDU = /** @class */ (function () {
         function BAIDU(siteId, isDebug) {
             if (siteId === void 0) { siteId = ''; }
             if (isDebug === void 0) { isDebug = false; }
             this.siteId = siteId;
             this.isDebug = isDebug;
         }
+        /**
+         * 初始化
+         */
         BAIDU.prototype.init = function () {
+            var _a;
             window._hmt = window._hmt ? window._hmt : [];
             var SCRIPT = document.createElement('script');
             SCRIPT['async'] = true;
             SCRIPT['src'] = "https://hm.baidu.com/hm.js?" + this.siteId;
-          document.querySelector('head').appendChild(SCRIPT);
+            (_a = document.querySelector('head')) === null || _a === void 0 ? void 0 : _a.appendChild(SCRIPT);
             if (this.isDebug) {
                 console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    " + this.siteId);
             }
         };
+        /**
+         * 设置要响应的站点
+         */
         BAIDU.prototype.setAccount = function () {
             window._hmt.push(['_setAccount', this.siteId]);
         };
+        /**
+         * 提交PV、UV
+         */
         BAIDU.prototype.trackPageview = function (pageUrl) {
+            // 如果页面链接没传或者无效链接，则默认为根域名
             if (!pageUrl || typeof pageUrl !== 'string') {
                 pageUrl = '/';
             }
+            // 如果页面链接带上了域名，则需要过滤掉
             if (pageUrl.includes('http')) {
                 var PAGE_CUT = pageUrl.split('/');
                 var HOST_NAME = PAGE_CUT[0] + "//" + PAGE_CUT[2];
                 pageUrl = pageUrl.replace(HOST_NAME, '');
             }
+            // 设置响应 id 并提交数据
             this.setAccount();
             window._hmt.push(['_trackPageview', pageUrl]);
             if (this.isDebug) {
                 console.log("[vue-baidu-analytics] track pv done.\nsiteId:    " + this.siteId + "\npageUrl:   " + pageUrl);
             }
         };
+        /**
+         * 提交点击事件
+         */
         BAIDU.prototype.trackEvent = function (category, action, label, value) {
+            // 前两个是必填项
             if (typeof category !== 'string' || typeof action !== 'string' || !category || !action) {
                 throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
             }
+            // 重置一些无效的默认值
             if (!label || typeof label !== 'string') {
                 label = '';
             }
             if (!Number(value)) {
                 value = 1;
             }
+            // 设置响应id并提交数据
             this.setAccount();
             window._hmt.push(['_trackEvent', category, action, label, value]);
             if (this.isDebug) {
@@ -63,11 +106,17 @@
         return BAIDU;
     }());
 
-  var PushBAIDU = (function () {
+    /**
+     * 定义推送操作
+     */
+    var PushBAIDU = /** @class */ (function () {
         function PushBAIDU(siteIdList, isDebug) {
-          this.siteIdList = siteIdList;
+            this.siteIdList = __spreadArray([], siteIdList);
             this.isDebug = isDebug;
         }
+        /**
+         * 批量部署站点
+         */
         PushBAIDU.prototype.init = function () {
             var _this = this;
             this.siteIdList.forEach(function (siteId) {
@@ -75,6 +124,9 @@
                 SITE.init();
             });
         };
+        /**
+         * 批量提交pv上报
+         */
         PushBAIDU.prototype.pv = function (pageUrl) {
             var _this = this;
             this.siteIdList.forEach(function (siteId) {
@@ -82,6 +134,9 @@
                 SITE.trackPageview(pageUrl);
             });
         };
+        /**
+         * 批量提交事件上报
+         */
         PushBAIDU.prototype.event = function (category, action, label, value) {
             var _this = this;
             this.siteIdList.forEach(function (siteId) {
@@ -92,20 +147,61 @@
         return PushBAIDU;
     }());
 
+    /**
+     * 获取Vue的版本
+     * @return 2=Vue2.x, 3=Vue3.x
+     */
     var getVueVersion = function (Vue) {
         var version = 2;
+        // 获取Vue的版本号
         var VUE_VERSION = String(Vue.version);
+        // Vue 2.x
         if (VUE_VERSION.slice(0, 2) === '2.') {
             version = 2;
         }
+        // Vue 3.x
         if (VUE_VERSION.slice(0, 2) === '3.') {
             version = 3;
         }
         return version;
     };
 
+    /**
+     * 全局的数据
+     */
+    var __GLOBAL__ = {
+        pushBAIDU: {}
+    };
+    /**
+     * 暴露 Hooks
+     * @description 解决 Vue 3.0 使用全局变量很麻烦的问题
+     * @example
+     * import { usePush } from 'vue-baidu-analytics'
+     * const baidu = usePush();
+     * baidu.pv('/');
+     */
+    function usePush() {
+        // 提交 pv
+        function pv(pageUrl) {
+            return __GLOBAL__.pushBAIDU.pv(pageUrl);
+        }
+        // 提交事件
+        function event(category, action, label, value) {
+            return __GLOBAL__.pushBAIDU.event(category, action, label, value);
+        }
+        return {
+            pv: pv,
+            event: event
+        };
+    }
+    /**
+     * 定义插件
+     */
     function install(Vue, _a) {
         var router = _a.router, siteIdList = _a.siteIdList, _b = _a.isDebug, isDebug = _b === void 0 ? false : _b;
+        /**
+         * 一些环境和参数的检查
+         */
         if (typeof document === 'undefined' || typeof window === 'undefined') {
             return false;
         }
@@ -113,26 +209,47 @@
             throw new Error('[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.');
         }
         if (!siteIdList) {
-          throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
+            throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics siteId.');
         }
+        /**
+         * 挂载推送的方法
+         */
         var pushBAIDU = new PushBAIDU(siteIdList, isDebug);
+        __GLOBAL__.pushBAIDU = pushBAIDU;
+        /**
+         * 挂载全局变量到 Vue 上
+         * 获取Vue版本（获取失败则默认为2）
+         */
         var VUE_VERSION = getVueVersion(Vue) || 2;
-      if (VUE_VERSION === 2) {
+        switch (VUE_VERSION) {
+            case 2:
                 Vue.prototype.$pushBAIDU = pushBAIDU;
-      }
+                break;
-      if (VUE_VERSION === 3) {
+            case 3:
                 Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+                break;
         }
-      if (siteIdList) {
+        /**
+         * 部署站点并初始化
+         */
+        if (siteIdList && Array.isArray(siteIdList)) {
             pushBAIDU.init();
         }
+        /**
+         * 路由切换时执行PV上报
+         */
         router.afterEach(function (to) {
+            // 获取要上报的链接（当前版本不需要拼接了）
             var PAGE_URL = window.location.href;
+            // 上报数据
             pushBAIDU.pv(PAGE_URL);
         });
     }
 
-  return install;
+    exports.default = install;
+    exports.usePush = usePush;
+
+    Object.defineProperty(exports, '__esModule', { value: true });
 
 })));
 //# sourceMappingURL=vue-baidu-analytics.js.map

dist/vue-baidu-analytics.min.js

@@ -1,7 +1,7 @@
-/** 
+/*!
  * name: vue-baidu-analytics
- * version: v2.0.3
+ * version: v2.1.0
  * author: chengpeiquan
  */
- !function(t,i){"object"==typeof exports&&"undefined"!=typeof module?module.exports=i():"function"==typeof define&&define.amd?define(i):(t=t||self).baiduAnalytics=i()}(this,(function(){"use strict";var t=function(){function t(t,i){void 0===t&&(t=""),void 0===i&&(i=!1),this.siteId=t,this.isDebug=i}return t.prototype.init=function(){window._hmt=window._hmt?window._hmt:[];var t=document.createElement("script");t.async=!0,t.src="https://hm.baidu.com/hm.js?"+this.siteId,document.querySelector("head").appendChild(t),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var i=t.split("/"),e=i[0]+"//"+i[2];t=t.replace(e,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId:    "+this.siteId+"\npageUrl:   "+t)},t.prototype.trackEvent=function(t,i,e,n){if("string"!=typeof t||"string"!=typeof i||!t||!i)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");e&&"string"==typeof e||(e=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,i,e,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId:   "+this.siteId+"\ncategory: "+t+"\naction:   "+i+"\nlabel:    "+e+"\nvalue:    "+n)},t}(),i=function(){function i(t,i){this.siteIdList=t,this.isDebug=i}return i.prototype.init=function(){var i=this;this.siteIdList.forEach((function(e){new t(e,i.isDebug).init()}))},i.prototype.pv=function(i){var e=this;this.siteIdList.forEach((function(n){new t(n,e.isDebug).trackPageview(i)}))},i.prototype.event=function(i,e,n,o){var s=this;this.siteIdList.forEach((function(r){new t(r,s.isDebug).trackEvent(i,e,n,o)}))},i}();return function(t,e){var n=e.router,o=e.siteIdList,s=e.isDebug,r=void 0!==s&&s;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!n)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!o)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.");var a=new i(o,r),u=function(t){var i=2,e=String(t.version);return"2."===e.slice(0,2)&&(i=2),"3."===e.slice(0,2)&&(i=3),i}(t)||2;2===u&&(t.prototype.$pushBAIDU=a),3===u&&(t.config.globalProperties.$pushBAIDU=a),o&&a.init(),n.afterEach((function(t){var i=window.location.href;a.pv(i)}))}}));
+!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports):"function"==typeof define&&define.amd?define(["exports"],e):e((t="undefined"!=typeof globalThis?globalThis:t||self).baiduAnalytics={})}(this,(function(t){"use strict";var e=function(){function t(t,e){void 0===t&&(t=""),void 0===e&&(e=!1),this.siteId=t,this.isDebug=e}return t.prototype.init=function(){var t;window._hmt=window._hmt?window._hmt:[];var e=document.createElement("script");e.async=!0,e.src="https://hm.baidu.com/hm.js?"+this.siteId,null===(t=document.querySelector("head"))||void 0===t||t.appendChild(e),this.isDebug&&console.log("[vue-baidu-analytics] siteId load done.\nsiteId:    "+this.siteId)},t.prototype.setAccount=function(){window._hmt.push(["_setAccount",this.siteId])},t.prototype.trackPageview=function(t){if(t&&"string"==typeof t||(t="/"),t.includes("http")){var e=t.split("/"),i=e[0]+"//"+e[2];t=t.replace(i,"")}this.setAccount(),window._hmt.push(["_trackPageview",t]),this.isDebug&&console.log("[vue-baidu-analytics] track pv done.\nsiteId:    "+this.siteId+"\npageUrl:   "+t)},t.prototype.trackEvent=function(t,e,i,n){if("string"!=typeof t||"string"!=typeof e||!t||!e)throw new Error("[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.");i&&"string"==typeof i||(i=""),Number(n)||(n=1),this.setAccount(),window._hmt.push(["_trackEvent",t,e,i,n]),this.isDebug&&console.log("[vue-baidu-analytics] track event done.\nsiteId:   "+this.siteId+"\ncategory: "+t+"\naction:   "+e+"\nlabel:    "+i+"\nvalue:    "+n)},t}(),i=function(){function t(t,e){this.siteIdList=function(t,e){for(var i=0,n=e.length,o=t.length;i<n;i++,o++)t[o]=e[i];return t}([],t),this.isDebug=e}return t.prototype.init=function(){var t=this;this.siteIdList.forEach((function(i){new e(i,t.isDebug).init()}))},t.prototype.pv=function(t){var i=this;this.siteIdList.forEach((function(n){new e(n,i.isDebug).trackPageview(t)}))},t.prototype.event=function(t,i,n,o){var s=this;this.siteIdList.forEach((function(r){new e(r,s.isDebug).trackEvent(t,i,n,o)}))},t}(),n={pushBAIDU:{}};t.default=function(t,e){var o=e.router,s=e.siteIdList,r=e.isDebug,u=void 0!==r&&r;if("undefined"==typeof document||"undefined"==typeof window)return!1;if(!o)throw new Error("[vue-baidu-analytics] Must pass a Vue-Router instance to vue-baidu-analytics.");if(!s)throw new Error("[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics siteId.");var a=new i(s,u);switch(n.pushBAIDU=a,function(t){var e=2,i=String(t.version);return"2."===i.slice(0,2)&&(e=2),"3."===i.slice(0,2)&&(e=3),e}(t)||2){case 2:t.prototype.$pushBAIDU=a;break;case 3:t.config.globalProperties.$pushBAIDU=a}s&&Array.isArray(s)&&a.init(),o.afterEach((function(t){var e=window.location.href;a.pv(e)}))},t.usePush=function(){return{pv:function(t){return n.pushBAIDU.pv(t)},event:function(t,e,i,o){return n.pushBAIDU.event(t,e,i,o)}}},Object.defineProperty(t,"__esModule",{value:!0})}));
 //# sourceMappingURL=vue-baidu-analytics.min.js.map

package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-baidu-analytics",
-  "version": "2.0.3",
+  "version": "2.1.0",
   "description": "A data collection tool that supports reporting of single-page application data built by Vue 3.0 & 2.0 & VuePress, based on baidu statistics.",
   "main": "dist/vue-baidu-analytics.min.js",
   "types": "vue-baidu-analytics.d.ts",
@@ -9,7 +9,7 @@
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/chengpeiquan/vue-baidu-analytics.git"
+    "url": "git+https://github.com/analyticsjs/vue-baidu-analytics.git"
   },
   "keywords": [
     "baidu",
@@ -26,6 +26,7 @@
     "百度统计"
   ],
   "author": "chengpeiquan",
+  "homepage": "https://github.com/analyticsjs/vue-baidu-analytics",
   "license": "MIT",
   "devDependencies": {
     "@babel/core": "^7.11.1",
@@ -37,11 +38,13 @@
     "@rollup/plugin-json": "^4.1.0",
     "@rollup/plugin-node-resolve": "^9.0.0",
     "@types/babel__core": "^7.1.9",
-    "rollup": "^2.26.4",
+    "@typescript-eslint/eslint-plugin": "^4.20.0",
-    "rollup-plugin-banner": "^0.2.1",
+    "@typescript-eslint/parser": "^4.20.0",
-    "rollup-plugin-banner2": "^1.0.0",
+    "eslint": "^7.23.0",
+    "rollup": "^2.44.0",
+    "rollup-plugin-banner2": "^1.2.2",
     "rollup-plugin-terser": "^7.0.0",
-    "rollup-plugin-typescript2": "^0.27.2",
+    "rollup-plugin-typescript2": "^0.30.0",
     "tslib": "^2.0.1",
     "typescript": "^4.0.2"
   }

rollup.config.ts

@@ -7,14 +7,12 @@ import banner2 from 'rollup-plugin-banner2'
 import typescript from 'rollup-plugin-typescript2'
 import pkg from './package.json'
 
-// 版权信息配置
+// 输出选项
-const ResolveBanner = () => {
+const outputOptions = {
-  return `/** 
+  format: 'umd',
- * name: ${pkg.name}
+  name: 'baiduAnalytics',
- * version: v${pkg.version}
+  exports: 'named',
- * author: ${pkg.author}
+  sourcemap: true
- */
- `;
 }
 
 export default {
@@ -22,32 +20,31 @@ export default {
   output: [
     {
       file: `dist/vue-baidu-analytics.js`,
-      format: 'umd',
+      ...outputOptions
-      name: 'baiduAnalytics',
-      sourcemap: true
     },
     {
       file: `dist/vue-baidu-analytics.min.js`,
-      format: 'umd',
-      name: 'baiduAnalytics',
       plugins: [
         terser()
       ],
-      sourcemap: true
+      ...outputOptions
     }
   ],
   plugins: [
     resolve({
       browser: true
     }),
+
     babel({
       babelHelpers: 'bundled'
     }),
+
     commonjs(),
+
     json(),
+
     typescript(),
-    banner2( ResolveBanner, {
+
-      sourcemap: true
+    banner2(() => `/*!\n * name: ${pkg.name}\n * version: v${pkg.version}\n * author: ${pkg.author}\n */\n`)
-    })
   ]
 };

src/global.d.ts

@@ -2,23 +2,23 @@ import PushBAIDU from '@m/pushBAIDU'
 
 declare global {
   interface Window {
-    _hmt: any
+    _hmt: any;
   }
 
   interface Options {
-    router: any
+    router: any;
-    siteIdList: string[]
+    siteIdList: string[];
-    isDebug: boolean
+    isDebug: boolean;
   }
 
   interface Vue {
-    prototype: any
+    prototype: any;
-    $pushBAIDU: PushBAIDU
+    $pushBAIDU: PushBAIDU;
-    version: number | string
+    version: number | string;
-    config: any
+    config: any;
   }
 
   interface To {
-    fullPath: string
+    fullPath: string;
   }
 }

src/main.ts

@@ -1,6 +1,38 @@
 import PushBAIDU from '@m/pushBAIDU'
 import getVueVersion from '@m/getVueVersion'
 
+/**
+ * 全局的数据
+ */
+const __GLOBAL__ = {
+  pushBAIDU: {} as PushBAIDU
+}
+
+/**
+ * 暴露 Hooks
+ * @description 解决 Vue 3.0 使用全局变量很麻烦的问题
+ * @example
+ * import { usePush } from 'vue-baidu-analytics'
+ * const baidu = usePush();
+ * baidu.pv('/');
+ */
+export function usePush () {
+  // 提交 pv
+  function pv (pageUrl: string) {
+    return __GLOBAL__.pushBAIDU.pv(pageUrl);
+  }
+
+  // 提交事件
+  function event (category: string, action: string, label: string, value: number) {
+    return __GLOBAL__.pushBAIDU.event(category, action, label, value);
+  }
+
+  return {
+    pv,
+    event
+  }
+}
+
 /**
  * 定义插件
  */
@@ -18,31 +50,33 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
   }
 
   if ( !siteIdList ) {
-    throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics.');
+    throw new Error('[vue-baidu-analytics] Missing tracking domain ID, add at least one of baidu analytics siteId.');
   }
 
   /**
    * 挂载推送的方法
    */
-  const pushBAIDU: any = new PushBAIDU(siteIdList, isDebug);
+  const pushBAIDU: PushBAIDU = new PushBAIDU(siteIdList, isDebug);
+  __GLOBAL__.pushBAIDU = pushBAIDU;
 
-  // 获取Vue版本（获取失败则默认为2）
+  /**
+   * 挂载全局变量到 Vue 上
+   * 获取Vue版本（获取失败则默认为2）
+   */
   const VUE_VERSION: number = getVueVersion(Vue) || 2;
-
+  switch (VUE_VERSION) {
-  // 2.x可以直接挂载到原型上
+    case 2:
-  if ( VUE_VERSION === 2 ) {
       Vue.prototype.$pushBAIDU = pushBAIDU;
-  }
+      break;
-
+    case 3:
-  // 3.x必须使用这个方式来挂载
-  if ( VUE_VERSION === 3 ) {
       Vue.config.globalProperties.$pushBAIDU = pushBAIDU;
+      break;
   }
 
   /**
    * 部署站点并初始化
    */
-  if ( siteIdList ) {
+  if ( siteIdList && Array.isArray(siteIdList) ) {
     pushBAIDU.init();
   }
 

src/modules/baidu.ts

@@ -19,7 +19,7 @@ class BAIDU {
     const SCRIPT = document.createElement('script');
     SCRIPT['async'] = true;
     SCRIPT['src'] = `https://hm.baidu.com/hm.js?${this.siteId}`;
-    document.querySelector('head').appendChild(SCRIPT);
+    document.querySelector('head')?.appendChild(SCRIPT);
 
     if ( this.isDebug ) {
       console.log(`[vue-baidu-analytics] siteId load done.\nsiteId:    ${this.siteId}`);
@@ -65,7 +65,6 @@ class BAIDU {
     // 前两个是必填项
     if ( typeof category !== 'string' ||  typeof action !== 'string' || !category || !action ) {
       throw new Error('[vue-baidu-analytics] Missing necessary category and operation information, and must be of type string.');
-      return false;
     }
 
     // 重置一些无效的默认值

src/modules/pushBAIDU.ts

@@ -8,7 +8,7 @@ class PushBAIDU {
   isDebug: boolean;
 
   constructor (siteIdList: string[], isDebug: boolean) {
-    this.siteIdList = siteIdList;
+    this.siteIdList = [...siteIdList];
     this.isDebug = isDebug;
   }
 

tsconfig.json

@@ -2,11 +2,15 @@
   "compilerOptions": {
     "target": "ES5",
     "module": "ES2015",
+    "strict": true,
+    "jsx": "preserve",
+    "importHelpers": true,
+    "moduleResolution": "node",
+    "skipLibCheck": true,
+    "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,
-    "noImplicitAny": true,
-    "removeComments": true,
-    "preserveConstEnums": true,
     "sourceMap": true,
+    "strictNullChecks": true,
     "baseUrl": ".",
     "paths": {
       "@/*": [