NPM 包：引用包中的资产

Question

我的当前设置

我创建并发布了一个 npm 包（在 typescript 中），它在内部引用了位于其中 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/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 中所述：

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

"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 等......