[英]Blazor: How to include npm dependencies into a Razor Class Library?
I am trying to create a Blazor component in a Razor Class Library which uses npm dependencies.我正在尝试在使用 npm 依赖项的 Razor 类库中创建 Blazor 组件。 In my
wwwroot
I created a package.json
:在我的
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"
}
}
In my csproj
I have:在我的
csproj
我有:
<Target Name="PreBuild" BeforeTargets="PreBuildEvent">
<Exec Command="npm install" WorkingDirectory="$(ProjectDir)wwwroot" />
</Target>
And I set my project to create a .nupkg.我将我的项目设置为创建一个 .nupkg。
When I now run dotnet publish MyComponent -c Release
, I get the MyComponent.1.0.0.nupkg
but its staticwebassets
folder only has the top level content of wwwroot
in there.当我现在运行
dotnet publish MyComponent -c Release
,我得到了MyComponent.1.0.0.nupkg
但它的staticwebassets
文件夹中只有wwwroot
的顶级内容。
So, how do I get the dependencies from the node_modules
folder in there?那么,如何从
node_modules
文件夹中获取依赖项? Do I have to run some sort of packager which generates a minified package in the root folder or am I missing something different?我是否必须运行某种打包程序来在根文件夹中生成一个缩小的包,还是我错过了一些不同的东西?
I found a solution which adds webpack to the game.我找到了一个将 webpack 添加到游戏中的解决方案。 Here is how I did it:
这是我如何做到的:
package.json
, run npm init
inside wwwroot
to generate onepackage.json
,请在wwwroot
运行npm init
以生成一个wwwroot
but package.json
and package-lock.json
to wwwroot/src
wwwroot
除package.json
和package-lock.json
所有内容移动到wwwroot/src
Install webpack and some loaders:安装 webpack 和一些加载器:
npm install --save-dev webpack css-loader file-loader style-loader
Add an appropriate webpack.config.js
:添加适当的
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
}
};
Note: The publicPath
is used for rewriting the path when run inside Blazor.注意:
publicPath
用于在 Blazor 中运行时重写路径。 Webpack packs the result in a way that all assets are relative to the main JS file. Webpack 以一种所有资产都相对于主 JS 文件的方式打包结果。 However Blazor expects the data at the path
_content/ProjectName
, which is accounted for using publicPath
.但是,Blazor 需要路径
_content/ProjectName
的数据,该路径使用publicPath
进行publicPath
。
csproj
file: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>
This will cause the src
directory and npm and webpack specific files to not be included in the final NuGet package.这将导致
src
目录以及 npm 和 webpack 特定文件不包含在最终的 NuGet 包中。 Plus, it'll run npm install
and webpack
.另外,它将运行
npm install
和webpack
。
For this to work, you must install webpack-cli
:为此,您必须安装
webpack-cli
:
npm install -g webpack webpack-cli
Now, when you run dotnet build -c Release MyRazorClassLibrary
, and set your library to generate a NuGet package on build, you will get a nice nupkg
with everything baked in.现在,当您运行
dotnet build -c Release MyRazorClassLibrary
并设置您的库以在构建时生成 NuGet 包时,您将获得一个包含所有内容的不错的nupkg
。
Sorry there is no support for this in Blazor.抱歉,Blazor 不支持此功能。 Your best approach is to document the requirements on external dependencies for anyone using the library.
您最好的方法是为使用该库的任何人记录对外部依赖项的要求。
I'd point out that not everyone uses NPM (I avoid it like the plague) and have different approaches to client-side packages, so if this is a "public" package it might be too prescriptive an approach to require NPM.我要指出的是,并不是每个人都使用 NPM(我像避免瘟疫一样避免使用它)并且对客户端包有不同的方法,所以如果这是一个“公共”包,那么需要 NPM 的方法可能过于规范。 If it's internal use only that's fine, but you're on your own as to how to handle bundling and packaging.
如果它只是内部使用,那很好,但是您自己决定如何处理捆绑和包装。
There is an issue tracking how static resources are handled有一个问题跟踪静态资源是如何处理的
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.