无法在使用Babel的Webpack项目中导入常量枚举。

Question

我正在一个React项目上工作，该项目是使用create-react-app构建的，后来我们进行了eject并大量修改了webpack配置。现在我很难从外部库中导入 const enums 。我无法控制那个外部包。它在其d.ts文件中定义了const枚举。

我已经尝试使用babel-plugin-use-const-enum Babel插件和预设集，但也没有帮助我。 我的Webpack配置：

.....
.....
{
  test: /\.(js|mjs|jsx|ts|tsx)$/,
  include: [paths.appSrc],
  loader: require.resolve("babel-loader"),
  options: {
    customize: require.resolve("babel-preset-react-app/webpack-overrides"),
    plugins: [
        [require.resolve("babel-plugin-const-enum"), { transform: "constObject" }],
        [require.resolve("@babel/plugin-transform-typescript"), { isTSX: true, optimizeConstEnums: true }],
        [require.resolve("@babel/plugin-transform-react-jsx")],
        [require.resolve("@babel/plugin-proposal-class-properties"), { loose: true }],
        [require.resolve("@babel/plugin-proposal-nullish-coalescing-operator")],
        [require.resolve("@babel/plugin-proposal-optional-chaining"), { isTSX: true }],
        [require.resolve("@babel/plugin-transform-arrow-functions")],
        [require.resolve("@babel/plugin-proposal-private-methods"), { loose: true }],
        [
          require.resolve("babel-plugin-named-asset-import"),
          {
            loaderMap: {
              svg: {
                ReactComponent: "@svgr/webpack?-svgo,+titleProp,+ref![path]",
              },
            },
          },
        ],
    ],
    presets: ["@babel/preset-env"],
  },
},
.....
.....

我的tsconfig文件：

{
  "compilerOptions": {
    "typeRoots": ["./typings", "node_modules/@types"],
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "noEmit": true,
    "jsx": "react",
    "downlevelIteration": true
  },
  "exclude": ["dist/**/*"],
}

问题在于构建成功，但我遇到了所有const enums导入时的运行时问题，如下所示： Uncaught TypeError: Cannot read properties of undefined (reading '<ConstEnumName>')。 包版本:

"@babel/core": "^7.11.6",
"babel-loader": "^8.1.0",
"typescript": "^3.9.7",
"webpack": "^4.44.2",

- Prabu samvel

---

你介意分享一个可复现的代码库吗？ - tmhao2005

那个外部包是一个开源项目吗？也许你可以分享它的名称。我想复制这个问题并尝试一下我心中的解决方法。最好使用实际的包来尝试。 - diedu

不，这不是一个开源项目。ts-loader解决了我的问题。感谢您的评论。 - Prabu samvel

Answer 1

根据这个讨论串，插件的创建者参与其中，babel不会转译.d.ts文件，这使得从中获取枚举(enum)变为不可能。唯一的选择似乎是迁移您的配置以使用ts-loader并包含具有枚举声明的.d.ts文件。 tsconfig

{
  ...
  "exclude": ["dist/**/*"],
  "include": ["node_modules/[external_library]/**/*.d.ts"],
}

- diedu