时间戳

首页 > 解决方案 > 从 node_modules 导入枚举时，webpack encore 失败

javascript - 从 node_modules 导入枚举时，webpack encore 失败

问题描述

我正在尝试使用我在另一个项目中创建的库中的一些枚举。该库由 Vue 和 typescript 制作，与 rollup 捆绑，项目由 Synfony 制作，前端也是 Vue 和 typescript，由 Webpack Encore 构建。

该库是我项目的依赖项，因此我尝试像这样导入枚举： import { MyEnum } from 'myLibrary/src/enum/MyEnum';

枚举看起来像这样

// node_modules/myLibrary/src/enum/MyEnum.ts

export enum MyEnum {
  One = 'one',
  Two = 'two',
  Three = 'three'
}

但是当我构建时，我得到了这个错误（使用 Symfony 的 Webpack Encore）：

 ERROR  Failed to compile with 1 errors                                                       4:37:05 PM

Error loading ./node_modules/myLibrary/src/enum/MyEnum.ts

 FIX  To process TypeScript files:
        1. Add Encore.enableTypeScriptLoader() to your webpack.config.js file.

我显然已经enableTypeScriptLoader()在 webpack.config.js 中添加了，我不知道如何解决这个问题。

如果我在我的项目中创建相同的枚举文件并导入它，它可以工作，但我必须将它保存在我的库中并且我不想重复代码。我以同样的方式从同一个库中导入接口，它工作正常。

我尝试了不起作用的东西：

知道如何解决这个问题吗？

编辑

我的浏览器中有另一条错误消息，其中添加了一些信息：

Module parse failed: Unexpected token (4:7)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
> export enum MyEnum {
|   One = 'one',
|   Two = 'two'

我还测试在使用 Vue Cli 制作的新项目中从同一个库中导入相同的枚举，并且我没有错误。我很确定问题来自 Webpack Encore。

标签： javascripttypescriptvue.jsenumswebpack-encore

解决方案

找到解决方案，此 Webpack Encore 问题中的一些详细信息：https ://github.com/symfony/webpack-encore/issues/1060

这是修复：

  • allowTsInNodeModules1 /添加enableTypeScriptLoader选项：
Encore.enableTypeScriptLoader((options) => {
  options.allowTsInNodeModules = true;
});
  • 2/更新规则以更改exclude排除 node_modules 的选项，并排除 node_modules 但我自己的模块（我自己的模块所在@myCompany的 node_modules 中的文件夹在哪里。
Encore.configureLoaderRule('typescript', (rule) => {
  rule.exclude = /node_modules\/(?!@myCompany)/;
});

这会在编译时生成警告，但目前这是我发现解决此问题的唯一方法。

推荐阅读