Два способа удалить бесполезный код в проекте (практический)

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

Помогал King Crab просмотреть код и обнаружил, что в проекте, который он хочет реорганизовать, есть много бесполезных кодов console.log(xxx).

King Crab собирается искать console.log по всему миру и удалять их один за другим, но в коде их слишком много.

Если удалять по одному, такое ощущение такое:遇见喜欢的人跟好朋友手牵手，心里明明想xx，却迟迟不敢动手。。。

Итак, теперь идея состоит в том, чтобы получить весь console.log(xxx) в коде и удалить его, предоставив два решения:

Вариант первый

Загрузчик webpack на самом деле является функцией, внутри которой мы можем сопоставить строку, которую хотим удалить, по обычному шаблону и заменить ее.

Пользовательский код loaders/ignore-console-log-loader.js очень прост:

const reg = /(console.log\()(.*)(\))/g

module.exports = function (sourceCode) {
 return sourceCode.replace(reg, '')
}

Используя положение, добавьте пользовательский загрузчик в файл конфигурации webpack.config.js:

module: {
  rules: [
   {
    test: /\.js$/,
    loader: ['ignore-console-log-loader'],
   },
  ]
 },
 resolveLoader: {
  // 指定自定义 loader 的位置目录
  modules: ['node_modules', path.resolve(__dirname, 'loaders')]
 },

Сравнение упаковки исходного кода до и после использования:

const name = '爱情'
console.log(name)

Перед использованием (обычная упаковка)

После использования (удален console.log)

Хотя этот метод прост, его достаточно для некоторых подобных простых требований (сопоставление, удаление, замена и т. д.).

就好像爱情，不需要复杂的海誓山盟，只需要简单的你在我身旁。

Вариант 2

★

Друзья, не знакомые с babel, могут оставить сообщение, а статья будет опубликована позже, что собственно и является некоторым содержанием принципа компиляции.

"

Например, несколько основных шагов принципа упаковки webpack — это использование babel (краткое упоминание, чтобы не расширять принцип упаковки и написать отдельную статью позже)

  • Получить основной контент записи
  • Проанализируйте основной входной модуль (@babel/parser package, передайте AST)
  • Содержимое модуля обработки (@babel/traverse package, просмотр AST для сбора зависимостей)
  • рекурсивно все модули
  • Сгенерировать окончательный код

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

Получить исходный код через BabelparsingПоследующий AST затем сопоставляется с нашим целевым узлом, преобразует, удаляет и выполняет другие операции на целевом узле и генерирует новый AST (AST после удаления console.los(xxx)).

Сначала конвертируйте веб-сайт в онлайн через https://astexplorer.net/ и посмотрите на узлы AST, которые мы хотим удалить:

Благодаря приведенной выше картинке спрос уже очень ясен.

Пользовательские плагины/ignore-console-log-plugin.js В сочетании с картинкой код становится очень понятным:

// babel 版的工具库，提供了很多 AST 的 Node 节点相关的工具函数
const types = require("@babel/types")

// 规则
const map = new Map()
map.set('console', 'log')
// ...

module.exports = function declare() {
 return {
  name: "ignore-console-log",
  visitor: {
   ExpressionStatement(path) {
    const expression = path.node.expression
    if (types.isCallExpression(expression)) {
     const callee = expression.callee
     if (types.isMemberExpression(callee)) {
      // 获取到 console
      const objectName = callee.object.name
      // 获取到 log
      const propertyName = callee.property.name
      // 规则命中
      if (map.get(objectName) === propertyName) {
       // 移除
       path.remove()
      }
     }
    }
   },
  },
 }
}

Используя положение (в проекте webpack), добавьте следующий настраиваемый плагин в файл конфигурации webpack.config.js:

{
  test: /\.js$/,
  use: {
   loader: 'babel-loader',
   options: {
    "presets": ['@babel/preset-env'],
    "plugins": ['./plugins/ignore-console-log-plugin.js']
   }
  },
  exclude: '/node_modules/'
}

Сравнение упаковки исходного кода до и после использования:

const name = '想太多'
console.log(name)

Перед использованием (обычная упаковка)

После использования (удален console.log)

резюме

★

Исходный код этой статьи был включенGitHub https://github.com/ponkans, добро пожаловать, Стар, продолжай получать воду💧

"

Есть много способов решить проблему, выбрать наиболее подходящую и наиболее удобную.

就好像感情，再多的花里胡哨，也抵不过我们不合适几个字。

Я водяной монстр, гастарбайтер с маленькой целью 3 года 💪

Категории