`与webpack捆绑后，无法读取未定义的``枚举''

Question

我有一个 React 库，我想使用 Webpack 来构建它。该库是使用 Typescript 编写的。似乎一切正常，但由于某种原因枚举却不起作用。

当我将该库安装到我的 React 应用程序中时，我发现在浏览器控制台中无法读取枚举的属性。

我尝试查看输出的包，似乎枚举正在被编译到包中。我觉得我一定是某个地方配置错误。在我能够与 microbundle-crl 捆绑之前，我们正在从它转向 Webpack。

这是我的 webpack.config.js 文件：

const path = require('path');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const DtsBundleWebpack = require('dts-bundle-webpack');

module.exports = {
    mode: 'production',
    entry: './src/index.tsx',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true,
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.json', 'jsx', '.js'],
    },
    devtool: 'inline-source-map',
    module: {
        rules: [
            {
                test: /\.(ts|tsx)$/,
                use: 'ts-loader',
                exclude: /node_modules/,
            },
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader, //Extract css into files
                    'css-loader', // Turns css into commonjs
                ],
            },
            {
                test: /\.pcss$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader', // Turns css into commonjs
                    'postcss-loader'
                ]
            },
        ],
    },
    plugins: [
        new MiniCssExtractPlugin({ filename: 'randomcompany-components.css' }),
        new DtsBundleWebpack({
            name: '@randomcompany/components',
            main: './dist/src/index.d.ts',
            out: '../index.d.ts',
        }),
    ],
};

我的 tsconfig.json 如下：

{
  "compilerOptions": {
    "outDir": "dist",
    "module": "esnext",
    "lib": ["dom", "esnext"],
    "types": ["react", "react-scripts"],
    "moduleResolution": "node",
    "jsx": "react",
    "sourceMap": true,
    "declaration": true,
    "declarationDir": "dist",
    "esModuleInterop": true,
    "noImplicitReturns": true,
    "noImplicitThis": true,
    "noImplicitAny": true,
    "isolatedModules": true,
    "preserveConstEnums": true,
    "strictNullChecks": true,
    "suppressImplicitAnyIndexErrors": true,
    "noUnusedLocals": true,
    "noUnusedParameters": true,
    "allowSyntheticDefaultImports": true,
    "resolveJsonModule": true
  },
  "include": ["src", "src/lang"],
  "exclude": ["node_modules", "dist", "src/stories"]
}

我的枚举采用以下格式：

export enum Test {
    TestOne = "Test One",
    TestTwo = "Test Two",
    TestThree = "Test Three"
};

export default Test;

Answer 1

您应该像以下内容一样写入它：

const Test = {
  TestOne: "Test One",
  TestTwo: "Test Two",
  TestThree: "Test Three",
};

export default Test;

但是我认为，使用enum使您的捆绑文件有些沉重，只需建议即可。使用简单的JavaScript对象。