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

Question

我有一个 React 库，我想使用 Webpack 使其可构建。该库是使用 Typescript 编写的。似乎一切正常，但由于某些原因，枚举无效。

当我将库安装到我的 React 应用程序中时，我在浏览器控制台中找到枚举的 Cannot read properties of undefined。

我已尝试查看输出的包，但似乎确实正在将枚举编译到包中。我觉得我必须在某处配置错误。在我能够与 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 个对象。

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

`Cannot read properties of undefined` for enum after bundling with webpack

javascript

enums

typescript

reactjs

webpack