Как запретить `babel-loader` для webpack минифицировать имена классов?

У меня есть следующее в моем webpack.config

{
    test: /\.js$/,
    exclude: /node_modules/,
    use:
    { 
        loader: "babel-loader",
        options: {
            presets: [
                ["@babel/preset-env", { 
                    "targets": "last 1 chrome version"
                    }
                ]
            ],
            plugins: ["@babel/plugin-proposal-class-properties", "@babel/plugin-proposal-private-methods"]
        }
    }
}

Как остановить webpack/babel от минимизации/изменения имен классов при сборке в производственном режиме?

Babel этого не делает, это часть Webpack.

loganfsmyth 20.04.2023 18:51

Хорошо, так какое решение?

Andrew Bullock 22.04.2023 08:53
Поиск всех неиспользуемых файлов в проекте
Поиск всех неиспользуемых файлов в проекте
Количество файлов в проекте растет по мере его развития. И если быть по-настоящему честным, их продвижение происходит в геометрической прогрессии...
Настройка шаблона Metronic с помощью Webpack и Gulp
Настройка шаблона Metronic с помощью Webpack и Gulp
Я пишу эту статью, чтобы поделиться тем, как настроить макет Metronic с помощью Sass, поскольку Metronic предоставляет так много документации, и они...
0
2
67
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Это можно сделать с помощью опции keep_classnames terser, см. опции Minify.

keep_classnames (по умолчанию: undefined) — передать true, чтобы предотвратить удаление или искажение имен классов. Передайте регулярное выражение, чтобы только имена классов соответствовали этому регулярному выражению.

Например.

src/mock-link.js:

export class MockLink {
  toString() {
    return 'mock link'
  }
}

src/app.js:

import { MockLink } from './mock-link'

const mockLink = new MockLink();
console.info(mockLink);

webpack.config.js:

const path = require('path');
const TerserPlugin = require("terser-webpack-plugin");

module.exports = {
  mode: 'production',
  entry: './src/app.js',
  output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /\.(?:js|mjs|cjs)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: [
              ['@babel/preset-env', { targets: "defaults" }]
            ]
          }
        }
      }
    ],
  },
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        keep_classnames: true
      }
    })],
  }
};

dist/bundle.js:

(()=>{"use strict";const n=new class MockLink{toString(){return"mock link"}};console.info(n)})();

Если мы установим keep_classnames на false, вывод dist/bundle.js:

(()=>{"use strict";const n=new class{toString(){return"mock link"}};console.info(n)})();

версии пакета:

"devDependencies": {
  "@babel/core": "^7.21.4",
  "@babel/preset-env": "^7.21.4",
  "babel-loader": "^9.1.2",
  "terser-webpack-plugin": "^5.3.7",
  "typescript": "^5.0.4",
  "webpack": "^5.80.0",
  "webpack-cli": "^5.0.2"
}

Другие вопросы по теме