0.0.3 • Published 2 years ago

babel-plugin-tracker v0.0.3

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

一个用于统计埋点的babel插件

npm.io npm.io npm.io npm.io npm.io npm.io npm.io npm.io

开发过程已发布到掘金:https://juejin.cn/post/7103694235970306055

安装

npm i babel-plugin-tracker
yarn add babel-plugin-tracker

使用

配置

const path = require("path");

module.exports = {
	...
	module: {
		rules: [
			{
				test: /\.js$/,
				exclude: /node_modules/,
				loader: "babel-loader",
				options: {
					presets: [
						"@babel/preset-env"
					],
					plugins: [
						[
							path.resolve(__dirname, "../src/index.js"),
							{
								xlsxPath: path.resolve(__dirname, "../buried.xlsx"),
								func: `
							function(category, action) {
								console.log(category,action);
								window._hmt && window._hmt.push(["_trackEvent", category, action]);
							};
							`,
								script: "https://test.js"
							}
						]
					]
				}
			}
		]
	}
};

参数说明

参数
xlsxPathExcel的绝对路径
func一个字符串形式的匿名函数
script需要加入的script的src

如何注释

注释应遵守如下规范

// buried-[id]

buried开头的注释就可以被此插件捕获到,id与Excel表上id字段对应

Excel表

Excel表应遵守如下格式

img

事件id属性属性值
xxx唯一标识对应的操作这里暂时可放两个参数,参数中前面为#即为变量,若不带#即为字符串

功能性

在使用类似“百度统计”这样的统计网站时,需要在引入对应的script文件,此插件已经自动引入,只需要配置script参数即可

此插件会将func挂载到window 上,随时可以在项目中调用

以往我们埋点时,往往需要手动操作,点位很多时非常浪费时间,现在只需使用注释,在每次编译时该插件会自动将funcid对应的参数结合起来,在项目中对应的位置执行func,且传入注释id对应的参数