Git Product home page Git Product logo

babel-auto-tracker's Introduction

babel-auto-tracker

使用注释实现自动埋点的babel插件

安装

npm install babel-auto-tracker or  yarn add babel-auto-tracker -D

配置

在.babelrc文件中

{
  "presets": [
    ...
  ],
  "plugins": [
    // 引入自动埋点插件
    [
      "babel-auto-tracker",
      {
        pathName: path.resolve(__dirname, 'xx/xxx/utils/tracker'), // 引入埋点方法的文件路径
      }
    ]
  ]
}

在webpack中

{
  module: [
    rules: [
       {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        include: paths.appSrc,
        loader: require.resolve('babel-loader'),
        options: {
          plugins: [
            // 引入自动埋点插件
            [
              require.resolve('babel-auto-tracker'),
              {
                pathName: path.resolve(__dirname, '../src/utils/tracker'), // 引入埋点方法的文件路径
              }
            ]
          ].filter(Boolean),
        },
      },
    ]
  ],
}

使用方法

 /**
  * autoTracker
  *
  * @param {string} id - 订单id
  * @param {string} name - 用户名
  */
  function needTracker(id, name, text) {
    console.log('needTracker====需要埋点1 ', text);
  }

  /**
  * autoTracker
  * 
  * @param {string} id - 订单id
  */
  const needTracker2 = (id) => {
    console.log('needTracker====需要埋点2 ');
  }

  /**
  * autoTracker
  * 
  * @param {string} id - 订单id
  */
  const needTracker3 = function (id) {
    console.log('needTracker====需要埋点3');
  };
 class TestComponent {

  /**
  * autoTracker
  * 
  * @param {string} id - 订单id
  */
  needTracker4(id) {
    console.log('needTracker====需要埋点4');
  }
 }

注意点:

  1. 第一个注释需要指定为:autoTracker,告诉babel-auto-tracker该函数需要自动埋点。
  2. 注释中声明的参数需要和函数中的参数名称以及位置一一对应。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.