gpt4 book ai didi

asp.net-core - Blazor:如何将 npm 依赖项包含到 Razor 类库中?

转载 作者:行者123 更新时间:2023-12-05 01:38:45 24 4
gpt4 key购买 nike

我正在尝试在使用 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 添加到游戏中的解决方案。这是我的做法:

  1. 如果您还没有package.json,请在wwwroot 中运行npm init 生成一个
  2. wwwroot 中除 package.jsonpackage-lock.json 之外的所有内容移动到 wwwroot/src
  3. 安装 webpack 和一些加载器:

    npm install --save-dev webpack css-loader file-loader style-loader

  4. 添加合适的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 以所有 Assets 都相对于主 JS 文件的方式打包结果。但是,Blazor 需要路径 _content/ProjectName 中的数据,该路径使用 publicPath

  1. 将此添加到 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 installwebpack

为此,您必须安装 webpack-cli:

npm install -g webpack webpack-cli

现在,当您运行 dotnet build -c Release MyRazorClassLibrary,并将您的库设置为在构建时生成 NuGet 包时,您将获得一个漂亮的 nupkg,其中包含所有内容中。

关于asp.net-core - Blazor:如何将 npm 依赖项包含到 Razor 类库中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59355881/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com