在 Vue CLI 中使用私有 npm 包服务/构建时的错误和警告

Posted 2023-02-22

【中文标题】在 Vue CLI 中使用私有 npm 包服务/构建时的错误和警告

【英文标题】：Errors and warnings when serving/building with a private npm package in Vue CLI

【发布时间】：2020-04-04 04:24:27

【问题描述】：

我的公司有一个 Vue 项目，我正在导入一些驻留在我也创建的私有 npm 包中的 UI 助手。

导入示例：

import  UIPosition  from '@mycompany/ui-library'

但是，当我为我的 Vue 应用程序（使用 vue-cli-service build 或 vue-cli-service serve 脚本）运行构建或服务命令时，我在命令行中看到以下警告：

声明文件警告（我的私有包中的每个 *.d.ts 都会看到警告，但node_modules 中的任何其他包都没有）：

 warning  in ./node_modules/@mycompany/ui-library/library/utils/UIPosition.d.ts

Module build failed (from ./node_modules/ts-loader/index.js):
Error: Debug Failure. Output generation failed
    at Object.transpileModule (/myapp/node_modules/typescript/lib/typescript.js:116864:29)
    at getTranspilationEmit (/myapp/node_modules/ts-loader/dist/index.js:318:74)
    at successLoader (/myapp/node_modules/ts-loader/dist/index.js:66:15)
    at Object.loader (/myapp/node_modules/ts-loader/dist/index.js:22:12)

地图文件警告（我只看到我的私有包中的源地图文件的警告，而不是node_modules 中的任何其他项目）：

 warning  in ./node_modules/@mycompany/ui-library/index.js.map

Module parse failed: Unexpected token (1:10)
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
> "version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO;AACP,OAAO,..."

我还创建了@mycompany/ui-library 私有包，因此我可以进行编辑。我在文章和论坛中进行了研究，但还没有确切地找到私有软件包的理想设置。

几个问题：

当您导入私有包时，是否应该根据上述警告提取声明 (.d.ts) 文件或映射 (.js.map) 文件并尝试编译它们？ 我是否应该在我的项目设置中以某种方式忽略这些文件作为编译输入？ 当我创建一个私有包时，我应该输出源映射文件和声明文件吗？ （看起来我应该输出它们，因为我至少在node_modules 中看到了其他流行项目中的声明文件，这使得任何使用其 IDE 中的包的人都可以进行类型推断。）

【问题讨论】：

看起来像*.d.ts 文件，在你的主 webpack 配置文件中没有关联的加载器。您是否在主项目中为这些文件使用任何加载器？

当我运行 vue inspect 时，我看到了根据 Vue CLI 生成的 webpack 配置...对于“.ts”文件，它使用：node_modules/ts-loader/index.js 作为加载器。

对于 .map 文件，我不确定它为什么要尝试处理这些文件，或者我什至需要担心处理它们。您通常会为第三方包处理 .map 文件吗？

我认为您不必担心第 3 方包的地图文件。就我个人而言，我不会在我的项目中进行处理，或者从未觉得需要这样做。但我不能 100% 确定是否会因此而出现任何问题。

谢谢，@Sunil，我相信您是正确的，您不必担心第 3 方项目的地图文件。我最终找到了根本原因，并在下面回答了我自己的问题。

【参考方案1】：

这对我来说是一个简单的解决方案，但确实很难弄清楚。这个问题实际上与 require 语句有关，用于在私有包的代码中加载图像。

下面的函数在私有包中：

public static get(res: string) 
    return require('@mycompany/ui-library/' + res)

在运行vue-cli-service build或vue-cli-service serve时，当Webpack看到这个require语句时，显然感觉它需要解析/加载所有文件，例如声明文件、源映射、自述文件等。

一个简单的解决方案是更改代码以在 require 语句中显式列出文件类型，这导致 Webpack 仅查找该特定文件类型：

public static getPNG(res: string) 
    return require('@mycompany/ui-library/' + res + '.png')

还有一些方法可以使用 Webpack 的 require.context 来制作更灵活的 require 语句，以便能够为您想要加载的文件类型指定 RegEx。

另外，下面是我最终发现的一些相关故事，这些故事是关于 Webpack 尝试加载 README 文件的。虽然，我认为我的 *** 问题仍然相关，因为我在加载声明和源映射文件时发现了问题。

Nuxt - Module parse failed: Unexpected character '#'

Why does webpack try to parse my readme.md files