[英]Blazor: How to include npm dependencies into a Razor Class Library?
我正在尝试在使用 npm 依赖项的 Razor 类库中创建 Blazor 组件。 在我的wwwroot
我创建了一个package.json
:
{
"name": "mycomponent",
"version": "0.0.1",
"description": "",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "UNLICENSED",
"dependencies": {
"d3": "^5.14.2"
}
}
在我的csproj
我有:
<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
<Exec Command="npm install" WorkingDirectory="$(ProjectDir)wwwroot" />
</Target>
我将我的项目设置为创建一个 .nupkg。
当我现在运行dotnet publish MyComponent -c Release
,我得到了MyComponent.1.0.0.nupkg
但它的staticwebassets
文件夹中只有wwwroot
的顶级内容。
那么,如何从node_modules
文件夹中获取依赖项? 我是否必须运行某种打包程序来在根文件夹中生成一个缩小的包,还是我错过了一些不同的东西?
我找到了一个将 webpack 添加到游戏中的解决方案。 这是我如何做到的:
package.json
,请在wwwroot
运行npm init
以生成一个wwwroot
除package.json
和package-lock.json
所有内容移动到wwwroot/src
安装 webpack 和一些加载器:
npm install --save-dev webpack css-loader file-loader style-loader
添加适当的webpack.config.js
:
var path = require('path');
module.exports = {
mode: 'production',
entry: [ './src/main.js', './src/style.css' ],
module: {
rules: [
{ test: /\.css$/, use: [ 'style-loader', 'css-loader' ] },
{ test: /\.(jpe?g|png|gif|svg)$/i, use: 'file-loader' }
]
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'index.bundle.js',
publicPath: '_content/MyRazorClassLibrary/dist/' // << See note
}
};
注意: publicPath
用于在 Blazor 中运行时重写路径。 Webpack 以一种所有资产都相对于主 JS 文件的方式打包结果。 但是,Blazor 需要路径_content/ProjectName
的数据,该路径使用publicPath
进行publicPath
。
csproj
文件中: <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
<Exec Command="npm install" WorkingDirectory="$(ProjectDir)wwwroot" />
<Exec Command="webpack" WorkingDirectory="$(ProjectDir)wwwroot" />
</Target>
<ItemGroup>
<Content Remove="wwwroot\package-lock.json" />
<Content Remove="wwwroot\package.json" />
<Content Remove="wwwroot\src\**" />
<Content Remove="wwwroot\webpack.config.js" />
</ItemGroup>
<ItemGroup>
<None Include="wwwroot\package-lock.json" />
<None Include="wwwroot\package.json" />
<None Include="wwwroot\src\**" />
<None Include="wwwroot\webpack.config.js" />
</ItemGroup>
这将导致src
目录以及 npm 和 webpack 特定文件不包含在最终的 NuGet 包中。 另外,它将运行npm install
和webpack
。
为此,您必须安装webpack-cli
:
npm install -g webpack webpack-cli
现在,当您运行dotnet build -c Release MyRazorClassLibrary
并设置您的库以在构建时生成 NuGet 包时,您将获得一个包含所有内容的不错的nupkg
。
抱歉,Blazor 不支持此功能。 您最好的方法是为使用该库的任何人记录对外部依赖项的要求。
我要指出的是,并不是每个人都使用 NPM(我像避免瘟疫一样避免使用它)并且对客户端包有不同的方法,所以如果这是一个“公共”包,那么需要 NPM 的方法可能过于规范。 如果它只是内部使用,那很好,但是您自己决定如何处理捆绑和包装。
有一个问题跟踪静态资源是如何处理的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.