Подбрасывание закопанной точки внешнего кода 📝

внешний интерфейс

задний план

В текущем проекте используются кодовые закопанные точки.По историческим причинам до сих пор существует два набора (фактически три набора) этих навязчивых скрытых точек одновременно.apmи через корпоративный интерфейс曝光exposureОтчетная статистика (исторические причины такжеtrackOsrRecordТо же самое интерфейс, сообщающий статистику). Хотя скрытые точки кода могут быть уточнены для предоставления данных, с увеличением числа скрытых точек возникают некоторые проблемы.

  • Частая итерация бизнес-требований и ошибочное удаление скрытого кода, что приводит к бесплодию онлайн-статистики;
  • Повторяющиеся точки захоронения, различные продукты имеют волну спроса на точки захоронения, и есть много повторяющихся точек захоронения;
  • Не ясен смысл поля скрытой точки в проекте, и я не знаю, для чего используется точка;
  • Связанный бизнес, что еще хуже, есть несколько способов похоронить проект.
  • При многопроектном использовании каждый проект вводится и пишется по-разному, что не только снижает возможность повторного использования, но и увеличивает сложность чтения кода.

Такие как:

// 埋点之一：apm
this.$apm.addCountReocord('record', 'action', {
  name: 'complete_task_from_card'
})
// 埋点之二：exposure接口上报
this.eventReport({
  action: 'join_position',
  channel: null,
  data: null,
  key: 'event_iphone',
  module: '',
  path: '',
  trigger: 'click'
})
// 埋点之二的同胞兄弟，浏览记录addRecord上报
function trackRecord(params) {
  //...其他params过滤操作，end
  await addRecord(params) // addRecord是一个接口上报
},

Принять меры

Ввиду того, что скрытые точки являются незаменимой частью контента мониторинга, чтобы лучше стандартизировать использование скрытых точек, необходимо выполнить следующие оптимизации кода скрытых точек в проекте:

  • Унифицированный метод захоронения точек: извлекается метод захоронения точек, а также вводится и используется пакет npm, который можно повторно использовать для нескольких проектов;
  • Похороненная семантика: Похороненный указывает на силу действия вызова (или детали) Похороненный метод;
  • Создать маршрутизацию и сопоставление скрытых точек: пройтиwebpack pluginСоздайте взаимосвязь между маршрутизацией страницы и скрытыми точками, и вы сможете интуитивно увидеть распределение скрытых точек во всем проекте (которое также может зависеть от строки и столбца кода).

Вышеупомянутое по-прежнему использует императивные скрытые точки, и заинтересованные партнеры также могут декларативно скрытые точки в проекте, чтобы сделать скрытые точки более аккуратными.

// 预期调用
this.$trackReport({
  key: 'view_iphone_detail',
  msg: 'apm_iphone页_点击查看detail'
})

Унифицированный вызов метода скрытой точки

Здесь не так уж и много хитросплетений, просто поставьте разнообразные способы закапывания по типуtypeсоставить стратегию, передать параметрыtypeтак же какparams参数Вызовите различные методы скрытых точек.
Например, через пакет npmtrackнезащищенныйtrackReportЭто метод стратегии. Он получает параметры и управляет параметрами. Конфигурация, необходимая для встраивания конфигурации, выглядит следующим образом.token uid
getDefaultTrackConfiНа самом деле, это для получения конфигурации по умолчанию, которую можно перезаписать в соответствии с различными потребностями, например перезаписать URL-адрес интерфейса, сообщаемый интерфейсом экспозиции. Для общего удобства он окончательно смонтирован в цепочке прототипов Vue.

// 初始化埋点方法，并挂载到原型链中
import Vue from 'vue'
import { trackReport, getDefaultTrackConfig } from 'track'
/**
 * 描述: 埋点事件对应的传参，这里的对象的key就是调用时的key做匹配。
 * this.$trackReport({
 * 	key: 'view_iphone_detail',
 * 	msg: 'apm_iphone页_点击查看detail'
 * })
 */
const eventMapParams = {
  view_iphone: () => ({
    type: 'apm',
    params: {
      name: 'iphone',
      type: 'view',
      spans: { name: 'view_iphone_list' }
    }
  }),
  view_iphone_detail: (that) => ({
    // that为当前调用组件的上下文this，以获取动态的数据
    type: 'apm',
    params: {
      name: 'iphone_detail',
      type: 'view_detail',
      spans: { money: that.money }
    }
  })
}

export const initTrack = ({ token, userInfo }) => {
  const config = getDefaultTrackConfig({ token, userInfo })
  Vue.prototype.$trackReport = function(info) {
    // 根据传入的信息info匹配params
    const { key } = info || {}
    const params = eventMapParams[key](this)
    trackReport(params, config)
  }
}

Здесь специально указано, чтоeventMapParamsПолучите параметры текущего события закопанной точки (я не думал о других способах управления параметрами...), в конце концов, параметры, о которых сообщает скрытая точка, отличаются, и ими более интуитивно понятно и легко управлять в единым способом, который лучше, чем разбросанный по бизнес-компонентам, хорошо~

разработка пакета npm, выпуск

Общий проект выглядит следующим образом:
image.png
Инициализация и конфигурация упаковки следующие

Установить машинописный текст

Настоятельно рекомендуется строгая проверка типов и очень дружественные подсказки по TypeScript.
Например, тип ТС можно пометить комментарием в виде /** */, и в редакторе будут более качественные подсказки
image.png
tsconfig.jsonФайл указывает корневой файл и параметры компиляции, используемые для компиляции этого проекта, подробнееофициальная документация ТС

// yarn安装
yarn add tslib typescript -D
// 生成ts配置文件，tsconfig.json可用来配置编译成的js版本、tslint检查等
npx tsc --init

Конфигурация накопительной упаковки

Как мы все знаем, сведение лучшеtree-shakingСоответствующая библиотека классов разработки очень проста в использовании, конечно, вы также можете использовать webpack. посмотреть подробноэта хорошая статья

  • Rollup анализирует поток программы во время компиляции и упаковки.Благодаря статическим модулям ES6 (экспорт и импорт нельзя изменить во время выполнения) мы можем определить, какой код нам нужен при упаковке.
  • Сам Webpack может только помечать неиспользуемый код, не удаляя его при упаковке, и на самом деле это такие инструменты, как UglifyJS, babili и terser, для сжатия кода, которые идентифицируют неиспользуемый код и завершают встряску дерева. Проще говоря, инструмент минификации считывает результаты пакета webpack и удаляет неиспользуемый код из пакета перед минификацией.

Установить:

yarn add rollup -D

новыйrollup.config.jsфайл, настроенный следующим образом:

// 识别并转译ts
import typescript from '@rollup/plugin-typescript'
// 解析引入npm包，以允许我们加载第三方模块
import resolve from 'rollup-plugin-node-resolve'
// ES6 +的JavaScript解析器，mangler和压缩器工具包
import { terser } from 'rollup-plugin-terser'

import pkg from './package.json'

// 末尾可加当前的版本记录
const footer = `
if(typeof window !== 'undefined') {
  window._TrackVersion = '${pkg.version}'
}`
export default {
  input: './src/index.ts',
  output: [
    {
      file: pkg.main,
      format: 'umd',
      footer,
      name: 'Track',
      sourcemap: true,
      plugins: [terser()]
    }
  ],
  context: 'window',
  plugins: [typescript(), resolve()]
}

Отладка и выпуск

npm link
видетьnpm config.

Выполните ссылку npm link/yarn внутри корня пакета, Это будет в глобальной папке {prefix}/lib/node_modules/ Создайте символическую ссылку на пакет, где npm link выполняет команду.

npm link packageName
Посмотреть проектnode_modulesВы можете увидеть пакет, в который входит ссылка.

packageName берется из поля имени в package.json пакета. Запуск команды npm link packageName создаст символическую ссылку из глобально установленного packageName на node_modules в текущем файле.

npm отвязать отвязать

Выполнить npm unlink --no-save package && npm install в проекте Выполнить npm unlink в пакете

Войти в npm && npm опубликовать опубликовать

npm login логин и пароль для npm
публиковать npm публиковать в npm

Если вы публикуете, вы можете использовать Github Actions для автоматизации публикации и сокращения ручных операций. Вы можете обратиться к:
NPM_TOKENНастраивается в гитхабе,конкретный штамп(Заинтересованные друзья могут прочитать статью Github Actions, которую я написал ранее)

name: dry
on:
  pull_request:
    branches:
      - main # 监听main分支，有pr进来触发workFlow，push的话就分支有更新触发
jobs:
  build:
    runs-on: ubuntu-18.04
    steps:
      - uses: actions/checkout@v2	   # checkout代码
      - uses: actions/setup-node@v1  # 集成node
      - uses: actions/cache@v2 			 # cache
        with:
          path: ~/.npm
          key: ${{ runner.os }}-node-${{ hashFiles('**/package-lock.json') }}
          restore-keys: |
            ${{ runner.os }}-node-
      - name: install and test
        run: |
          npm install
          npm run test
      - run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_TOKEN }}" > ~/.npmrc
      - name: publish
        if: ${{contains(github.ref, 'refs/tags/')}} # 检查git tag
        run: |
          npm run build
          npm publish --access public

Плагин webpack генерирует сопоставление скрытых точек маршрутизации

пройти черезwebpack pluginСоздайте взаимосвязь между маршрутизацией страницы и скрытыми точками, вы можете интуитивно увидеть распределение скрытых точек во всем проекте (вы также можете указать, какая строка и столбец кода), и окончательный эффект будет следующим:
image.png
Не буду здесь разворачивать, а приложу живую картинку:

image.png
Плагин запускается в подпроцессе, а сгенерированный json можно использовать в интерфейсе рендеринга, чтобы вы могли интуитивно видеть распределение скрытых точек всего проекта, и вы могли бы счастливо фехтовать с продуктом 🤺 в будущем.

Суммировать

Выше приведены некоторые записи при сортировке скрытых точек компании, и возможности ограничены.Если у вас есть лучший способ организовать такого рода скрытые точки кода, оставьте сообщение 👏🏻.

Категории