前端工程化

2023-10-19 03:45| 来源: 网络整理| 查看: 265

一、为什么做这个？

在项目中添加埋点，是数据分析的重要一环，每次项目的跌点，都会或多或少有些埋点的需求，那么，能不能通过自动化的形式，去添加这些埋点呢？

答案：针对大部分的埋点，可以自动化添加

二、是什么？

这是一个非常基础的功能插件，完成对methods下的函数，其函数名是以_track结尾的函数，添加一段埋点代码，举个例子：

// vue源码 export default { data () { return { baseTrackProps: { appName: 'ardf' } } }, methods: { getApp_track (param_01, params_02) { console.log(param_01, params_02, this.baseTrackProps) } } }

以上这段代码，在打包之后，会在getApp_track这个函数内，添加一段这样的代码

this.$track('getApp_track', { param_01: param_01, params_02: params_02, baseTrackProps: this.baseTrackProps }) 三、如何做到的呢？

编写一个babel插件，使用babel对AST（抽象语法树）的操作，找到对应的函数，在函数体内插入语句

四、项目设计

计划编写一个开发框架，可以发布到npm上，方便其他项目引入使用

auto-track ├─ .gitignore ├─ README.md ├─ babel.config.js ├─ lib │ ├─ index.js │ └─ index.js.map ├─ package.json ├─ rollup.config.js ├─ src │ ├─ babelPlugins │ │ └─ addTrack.js // babel插件，负责想函数内，插入语句 │ ├─ index.js │ ├─ lib │ │ └─ util.js │ └─ webpackPlugins │ └─ removeBabelLoaderCache.js └─ yarn.lock

由于webpack使用babel-loader会有缓存，导致babel插件不会每次都执行，所以要在运行之前，删除babel插件，所以用到了一个webpack插件，负责在webpack打包开始的时候，删掉babel-loader的缓存

核心代码：

index.js const addTrack = require('./babelPlugins/addTrack') const RemoveBabelLoaderCache = require('./webpackPlugins/removeBabelLoaderCache') module.exports = { addTrack: addTrack, removeBabelLoaderCache: RemoveBabelLoaderCache } removeBabelLoaderCache.js const util = require('../lib/util') const pluginName = 'removeBabelLoaderCache' class RemoveBabelLoaderCache { constructor({basePath}){ // 传入的参数挂载在这个类的实例上. this.basePath = basePath } apply(compiler) { compiler.hooks.run.tap(pluginName, (compilation) => { console.log('***** Webpack 构建过程开始！*****'); const babelLoaderCachePath = `${this.basePath}/node_modules/.cache/babel-loader` // 删除babel-loader缓存 util.removeDir(babelLoaderCachePath) }) compiler.hooks.done.tap(pluginName, (stats) => { console.log('***** Webpack 构建结束！*****') }) } } module.exports = RemoveBabelLoaderCache; addTrack.js module.exports = function (babel, options) { console.log('**：babel插件开始执行***') const { types, template } = babel return { name: 'add-track-babel-plugin', visitor: { Identifier (path, state) { const { name } = path.node if (name.endsWith('_track')) { try { if (path.node.loc && path.node.loc.start) { const location = `---track: line ${path.node.loc.start.line}, column ${path.node.loc.start.column}, ${state.filename}---`; console.log(location) const parentNode = path.parent const functionNode = parentNode.value if (types.isFunctionExpression(functionNode)) { const body = functionNode.body if (types.isBlockStatement(body)) { const params = functionNode.params var s = '{' params.forEach(p => { s = s + p.name + ':' + p.name + ',' }) s = s + 'baseTrackProps: this.baseTrackProps}' const tName = `'${name}'` const addCodeStr = `this.$track(${tName},${s})` // 向函数内，插入埋点语句 body.body.unshift(template.statement(addCodeStr)()); } } } } catch (error) { console.error(error) } } } } } }

编写解析AST语句的代码，可以使用astexplorer 配合，在里面编写相似的代码，快速找到需要观察的AST节点类型

五、vue项目中如何使用？第一步：在main.js中，添加埋点方法

demo代码

... Vue.prototype.$track = (name, data={}) => { if (data.baseTrackProps) { const baseTrackProps = { ...data.baseTrackProps } delete data.baseTrackProps const params = { ...data, ...baseTrackProps } console.log(`****track：${name},${JSON.stringify(params)}******`) } else { delete data.baseTrackProps const params = { ...data } console.log(`****track：${name},${JSON.stringify(params)}******`) } } ... 第二步：在vue.config.js中，配置使用webpack插件 const autoTrack = require('auto-track') module.exports = { ...// 省略其他 configureWebpack: (config) => { config.plugins.push(new autoTrack.removeBabelLoaderCache({ basePath: __dirname })) } ... } 第三步：在babel.config.js中，配置使用babel插件 const autoTrack = require('auto-track') module.exports = { presets: [ ... ], plugins: [ ... // 其他插件 autoTrack.addTrack ] }

这样就可以啦，之后，在你需要添加埋点的函数上，将其名字后面加上_track，那么打包之后的代码中，就会自动加上埋点语句了

完整的源码，可见github：github.com/lcl6659/aut…

特别备注：灵感来自zxg_神说要有光的《babel 插件通关秘籍》

【本文地址】

前端工程化

前端工程化

今日新闻

推荐新闻