我的TypeScript枚举定义如下,如本文件所示
export enum HueColors {
"red" = "hsl(0, 100%, 50%)",
"orange" = "hsl(30, 100%, 50%)",
// ...
"pink" = "hsl(330, 100%, 50%)",
}
export enum RGBExtended { /* ... */ }
export enum WebSafe { /* ... */ }安装/控制
// package.json
{
...
"main": "./index.js",
"types": "./index.d.ts",
"files": [
"**/*.{js,ts, map}"
],
"sideEffects": false,
"scripts": {
...
"build:dev": "cross-env NODE_ENV=development webpack --config config/webpack.config.js",
"build": "cross-env NODE_ENV=production webpack --config config/webpack.config.js",
...
},
"babel": {
"extends": "./config/.babelrc.json"
},
...
"devDependencies": {
"@babel/core": "^7.14.8",
"@babel/preset-env": "^7.14.8",
"@types/jest": "^26.0.24",
"@types/node": "^16.4.0",
"@typescript-eslint/eslint-plugin": "^4.28.4",
"@typescript-eslint/parser": "^4.28.4",
"copy-webpack-plugin": "^9.0.1",
"cross-env": "^7.0.3",
"eslint": "^7.31.0",
"eslint-plugin-jest": "^24.4.0",
"jest": "^27.0.6",
"prettier": "^2.3.2",
"terser-webpack-plugin": "^5.1.4",
"ts-jest": "^27.0.4",
"ts-loader": "^9.2.4",
"ts-node": "^10.1.0",
"typedoc": "^0.21.4",
"typescript": "^4.3.5",
"webpack": "^5.46.0",
"webpack-cli": "^4.7.2"
}
}// config/.babelrc.json
{
"presets": [
[
"@babel/preset-env",
{
"targets": {
"node": "current"
},
"modules": false
}
]
]
}// config/tsconfig.json
{
"compilerOptions": {
"target": "ES6",
"module": "ES6",
"lib": ["DOM", "DOM.Iterable", "ES2017"],
"moduleResolution": "node",
"outDir": "../dist",
"noEmit": false,
"declaration": true,
"strict": true,
"esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"removeComments": false,
"forceConsistentCasingInFileNames": true,
"noFallthroughCasesInSwitch": true
},
"include": ["../src"],
"exclude": ["../node_modules", "../tests", "../coverage", "../src/debug.ts"]
}// config/webpack.config.js
/* eslint-disable @typescript-eslint/no-var-requires */
const CopyPlugin = require("copy-webpack-plugin");
const path = require("path");
const basePath = path.resolve(__dirname, "../");
module.exports = {
entry: path.join(basePath, "src", "index.ts"),
mode: process.env.NODE_ENV,
devtool: process.env.NODE_ENV === "production" ? "source-map" : false,
module: {
rules: [
{
test: /\.ts$/,
loader: "ts-loader",
options: {
configFile: path.join(__dirname, "tsconfig.json")
},
exclude: /node_modules/
}
]
},
plugins: [
new CopyPlugin({
patterns: [
... // not important for question
]
})
],
optimization: {
minimize: process.env.NODE_ENV === "production",
minimizer: [
(compiler) => {
const TerserPlugin = require("terser-webpack-plugin");
new TerserPlugin({
terserOptions: {
ecma: 5,
mangle: true,
module: false
}
}).apply(compiler);
}
],
usedExports: true,
sideEffects: true,
innerGraph: true
},
stats: {
usedExports: true,
providedExports: true,
env: true
},
resolve: {
extensions: [".ts"]
},
output: {
filename: "index.js",
path: path.join(basePath, "dist"),
library: "colormaster",
libraryTarget: "umd",
globalObject: "this",
clean: true
}
};开发生成输出
我在控制台中看到了以下内容:
...
./src/enums/colors.ts 17.6 KiB [built] [code generated]
[exports: HueColors, RGBExtended, WebSafe]
[only some exports used: HueColors] // ← indicates that tree shaking should occur in production build
webpack 5.46.0 compiled successfully in 2368 ms我在生成的dist文件夹输出中看到了以下内容:
// dist/index.js → mode === development
/***/ "./src/enums/colors.ts":
/*!*****************************!*\
!*** ./src/enums/colors.ts ***!
\*****************************/
/***/ ((__unused_webpack_module, __webpack_exports__, __webpack_require__) => {
/* harmony export */ __webpack_require__.d(__webpack_exports__, {
/* harmony export */ "HueColors": () => (/* binding */ HueColors)
/* harmony export */ });
/* unused harmony exports RGBExtended, WebSafe */ // ← indicates that tree shaking should occur in production
var HueColors;
(function (HueColors) {
HueColors["red"] = "hsl(0, 100%, 50%)";
...
HueColors["pink"] = "hsl(330, 100%, 50%)";
})(HueColors || (HueColors = {}));
var RGBExtended;
(function (RGBExtended) {
RGBExtended["maroon"] = "rgb(128,0,0)";
...
RGBExtended["white"] = "rgb(255,255,255)";
})(RGBExtended || (RGBExtended = {}));
var WebSafe;
(function (WebSafe) {
WebSafe["#000000"] = "rgb(0,0,0)";
...
WebSafe["#FFFFFF"] = "rgb(255,255,255)";
})(WebSafe || (WebSafe = {}));生产建设产出
但是,在生产生成输出中,我看到以下内容:

显然还包括未使用的出口。
可以做些什么来规避这个问题?
解决方案
多亏了杰夫·鲍曼的广泛回应,我们才能推断出,根本原因是TypeScript将enum编译成一个生命。
简单地将enum变量替换为const (记录实用程序)解决了这个问题,在生产包中可以看到树的抖动。
https://stackoverflow.com/questions/68720866
复制相似问题