在 npm 包中引用本地文件

Question

我们如何在 npm 包中引用本地文件？由于 npm 包是由另一个消费者安装的，这些引用相对于消费者的根文件夹是否会过时？

例如，我为 Angular 创建了一个 npm 包。该软件包还从第三方重新发送了少量 html 和 css 文件（它们没有 angular 软件包）。我确保在发布包期间将文件复制到...dist\thirdparty。我想使用相对路径或其他机制在我的 npm 包中引用其中一些文件。

例如

@Component({
selector: 'ng2-my-library',
template: '<div></div>'
})
export class MyLibraryComponent {
.....
var newWindowUrl = "./thirdparty/some.html"; **// Need to relatively locate some.html here**
window.open(newWindowUrl);
.....
}

在我将my-package 安装到示例角度应用程序后，上面的代码导致"localhost:3000/thirdparty/some.html"，这是不准确的。

我该怎么做？

安装我的包后，消费者会有这个结构
consumerApp node_modules(Folder) ng2-my-library(Folder) ng2-pdfjs-viewer.umd.js // This is where I need to access some.html thirdparty(Folder) some.html

我也考虑过指导包的消费者做这样的事情，但是这个指令非常依赖于其他构建工具来复制或重定向到 html，这不是我想要的。

   var TransferWebpackPlugin = require('transfer-webpack-plugin');
         ...
         plugins: [
           new TransferWebpackPlugin([
             { from: 'node_modules/my-package/assets', to: path.join(__dirname, 'my/public') }
           ])
         ] 

我也尝试过使用这个包。显然它没有为我提供正确的 html 结果。 https://www.npmjs.com/package/static-reference

Answer 1

使用__dirname 而不是. 来获取保存文件的本地目录。将代码更改为：

var newWindowUrl = __dirname + "/thirdparty/some.html";
window.open(newWindowUrl);

有关 __dirname here 的更多信息。

不要忘记在项目中包含节点类型：

npm install --save-dev @types/node

Answer 2

你可以试试这个

1 - 公开资产

使静态资产可从您的网络服务器（即thirdparty 文件夹）访问

例如，如果您使用 express，则可以使用 serve-static 包

var path = require('path');
var assetsFolder = path.join(__dirname, './node_modules/ng2-my-library/thirdparty');

app.use('/thirdparty', express.static(assetsFolder));
//...
app.listen ...

2 - 引用文件

在你的包的组件中，像这样引用文件

window.open('/thirdparty/some.html')

例如，如果您使用的是 express，则可以

编辑

您也可以使用 npm post install 任务复制文件，但您仍然需要将它们复制到浏览器可以静态提供它们的位置。例如，您不能确定所有客户端都会有一个assets 文件夹。所以我认为总会有某种网络服务器配置需要以某种方式