NPM Package ：引用包内的资产

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'
}

上面的在开发包时没有抛出错误。

当前问题

但是现在在我安装、导入和使用包时抛出以下错误：

Error: ENOENT: no such file or directory, open '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 stories asset configuration:

中所述

You can use this extended configuration to copy assets from outside your project. For instance, you can copy assets from a node package:

"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 material, primeng schematics，等等...

NPM Package ：引用包内的资产

NPM Package : Referring to assets within the package

relative-path

npm

typescript

angular

我当前的设置

当前问题

观察