serving/building 在 Vue CLI 中使用私有 npm 包时的错误和警告

Question

我的公司有一个 Vue 项目，我在其中导入了一些 UI 助手，这些助手位于我也创建的私有 npm 包中。

导入示例：

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 中使用这些包的人都能进行类型推断。）

Answer 1

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

下面的函数在私有包中：

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

在运行vue-cli-service build或vue-cli-service serve时，当Webpack看到这个require语句时，显然感觉它需要parse/load所有文件，比如声明文件，源地图、自述文件等

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

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

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

此外，下面是我终于找到的一些相关故事，谈论 Webpack 试图加载 README 文件。虽然，我认为我的 Whosebug 问题仍然相关，因为我在加载声明和源映射文件时发现了问题。

Why does webpack try to parse my readme.md files

serving/building 在 Vue CLI 中使用私有 npm 包时的错误和警告

Errors and warnings when serving/building with a private npm package in Vue CLI

typescript

vue.js

npm

package.json

type-declaration