NPM包：如何引用包内的资源文件？

Question

NPM包：如何引用包内的资源文件？

angulartypescriptnpmrelative-path

7

我的当前设置

我创建并发布了一个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'
}

以上在开发包时没有出现错误

当前问题

但是现在，在我安装、导入并使用该包时，它会抛出以下错误：

Error: ENOENT: no such file or directory, open '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"
    ]
  }
}

- Nikhil Nanjappa

2个回答

0

如果你遇到了错误信息 '[ts] No inputs were found in ...../mypackage/tsconfig.json. Specified 'include' paths were [**/*] and 'exclude' paths were [./dist]'，请检查你的项目文件结构。我曾经也遇到过这个问题，后来发现是我不小心把我想要用作输出目录（在我的ts.config中指定）的dist文件夹嵌套到了src文件夹中。我只需要确保文件在项目文件结构中放置正确，问题就得到了解决。

- user19917425

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Andriy · Accepted Answer

在你的read me文件中，你可以引导用户按照Angular CLI中stories asset configuration所解释的方式向angular json文件添加资产配置：

你可以使用这个扩展配置从项目外部复制资产。例如，你可以从一个node包中复制资产：

"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等的示例...