У меня есть следующее в моем 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 от минимизации/изменения имен классов при сборке в производственном режиме?
Хорошо, так какое решение?
Это можно сделать с помощью опции 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"
}
Babel этого не делает, это часть Webpack.