feat(init repo):

.babelrc

+{ "presets": ["@babel/preset-env"], "plugins": ["@babel/plugin-syntax-dynamic-import", "@babel/plugin-proposal-class-properties"] }

.gitignore

+node_modules
+.vscode
+dist
\ No newline at end of file

README.md

 # hunter-rrweb
 
+用户行为收集
+
+### 开发
+
+- npm run build:w
+- npm link 到测试项目

build.js

+const config = require("./webpack.config");
+const webpack = require("webpack");
+
+webpack(config, (err, stats) => {
+  process.stdout.write(
+    stats.toString({
+      colors: true,
+      modules: false,
+      children: false,
+      chunks: false,
+      chunkModules: false,
+    }) + "\n\n",
+  );
+});

package.json

+{
+  "name": "hunter-rrweb",
+  "version": "0.0.1",
+  "description": "Tools for recording and replaying user behavior built using rrweb",
+  "main": "dist/index.js",
+  "scripts": {
+    "dev": "cross-env NODE_ENV=dev node build.js",
+    "build": "node build.js",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git@gitlab2.dui88.com:Dec-F/hunter-rrweb.git"
+  },
+  "keywords": [
+    "user",
+    "behavior",
+    "rrweb",
+    "record",
+    "replay"
+  ],
+  "author": "Dec-F",
+  "license": "ISC",
+  "dependencies": {
+    "rrweb": "^0.7.18"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.4.5",
+    "@babel/plugin-proposal-class-properties": "^7.5.0",
+    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
+    "@babel/preset-env": "^7.4.5",
+    "babel-loader": "^8.0.6",
+    "cross-env": "^5.2.0",
+    "webpack": "^4.35.2",
+    "worker-loader": "^2.0.0"
+  }
+}

src/index.js

+import Monitor from "./lib/monitor";
+export default Monitor;

src/lib/monitor.js

+import * as rrweb from "rrweb";
+import TracksWorker from "./tracks.worker";
+export default class Monitor {
+  rrwebHandler = null;
+  tracksWorker = new TracksWorker();
+  record() {
+    this.rrwebHandler && this.rrwebHandler();
+    this.rrwebHandler = rrweb.record({
+      emit: event => {
+        this.tracksWorker.postMessage({ type: "record", event });
+      },
+    });
+  }
+  stop() {
+    if (!this.rrwebHandler) {
+      throw new Error("没有正在录制的实例");
+    }
+    this.rrwebHandler();
+  }
+  postMessage(action) {
+    this.tracksWorker.postMessage(action);
+  }
+}

src/lib/tracks.worker.js

+let events = [];
+
+onmessage = ({ data: { type, event } }) => {
+  switch (type) {
+    case "record":
+      events.push(event);
+      console.log(events);
+      if (events.length > 100) {
+        window.localStorage.setItem("rrevents", JSON.stringify(events));
+        events = [];
+        console.log("local");
+      }
+      break;
+    default:
+      console.log("unknow action");
+  }
+};

test.js

+import * as Mo from "./dist";
+
+console.log(Mo);

webpack.config.js

+const path = require("path");
+const env = process.env.NODE_ENV;
+module.exports = {
+  mode: env === "dev" ? "development" : "production",
+  entry: {
+    index: "./src/index.js",
+  },
+  output: {
+    path: path.resolve(__dirname, "dist"),
+    filename: "[name].js",
+    publicPath: "dist/",
+    libraryTarget: "umd",
+  },
+  resolve: {
+    extensions: [".js", ".jsx"],
+  },
+  optimization: {
+    minimize: true,
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js[x]?$/,
+        exclude: /node_modules/,
+        use: {
+          loader: "babel-loader",
+          options: {},
+        },
+      },
+      {
+        test: /\.worker\.js$/,
+        use: { loader: "worker-loader", options: { inline: true } },
+      },
+    ],
+  },
+  watch: env === "dev" ? true : false,
+};