NPM 包：引用包内的资产

Question

我的当前设置

我已经创建并发布了一个 npm 包（在打字稿中），它在内部引用了几个驻留在其中的public/fonts文件夹中的字体文件。

然后我在一个 Angular 应用程序中安装这个包。

node_modules安装包后的文件结构如下：

 node_modules/
   mypackage/
     dist/
       index.d.ts
       index.js
     public/
       fonts/
     LICENSE
     README.md
     package.json
     tsconfig.json

我指的字体文件来自index.js：

'Roboto': {
   normal: 'public/fonts/Roboto-Regular.ttf',
   bold: 'public/fonts/Roboto-Bold.ttf',
   italics: 'public/fonts/Roboto-Italic.ttf',
   bolditalics: 'public/fonts/Roboto-BoldItalic.ttf'
}

在同时开发包上面没有抛出一个错误。

当前的问题

但是现在在我安装，导入并使用该包后，它会引发以下错误：

错误：ENOENT：没有这样的文件或目录，打开“public/fonts/Roboto-Bold.ttf”

观察

如果我将 public 文件夹放在使用该包的应用程序的根目录下，它会按预期工作。这意味着包是public/fonts/在应用程序的根级别而不是包内查找的。

任何想法如何在包中引用这些文件也确保它在开发包时不会抛出错误。

此外，我还在我的包中收到以下错误tsconfig.json：

[ts] No inputs were found in ...../mypackage/tsconfig.json. Specified 'include' paths were [**/*] and 'exclude' paths were [./dist].

对于上述问题，在包的根目录添加一个空白的 .ts 文件可以修复它，但还有其他选择吗？

编辑（添加我的包tsconfig.json）

{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "declaration": true,
    "outDir": "./dist",
    "strict": true,
    "noImplicitAny": false,
    "lib": [
      "es2015"
    ]
  }
}

Answer 1

在您的自述文件中，您可以指导用户将资产配置添加到 Angular json 文件中，如 Angular CLI故事资产配置中所述：

您可以使用此扩展配置从项目外部复制资源。例如，您可以从节点包复制资产：

"assets": [
  { 
    "glob": "**/*", 
    "input": "./node_modules/some-package/images", 
    "output": "/some-package/" 
  }
]

所以，在你的情况下应该是：

"assets": [
  { 
    "glob": "**/*", 
    "input": "../node_modules/mypackage/public", 
    "output": "/public/" 
  }
]

路径node_modules应该相对于您的应用程序根目录。

从 NG6 开始，您可以使用 Angular CLI 中的 ng add 命令来安装您的 npm 模块并在 Angular json 文件中进行所需的更新。您需要ng add在模块中实现原理图逻辑，您可以找到以下示例：Angular 材料、primeng 原理图等...