Blazor：如何將 npm 依賴項包含到 Razor 類庫中？

Question

我正在嘗試在使用 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文件夾中獲取依賴項？ 我是否必須運行某種打包程序來在根文件夾中生成一個縮小的包，還是我錯過了一些不同的東西？

Answer 1

我找到了一個將 webpack 添加到游戲中的解決方案。 這是我如何做到的：

1. 如果您還沒有package.json ，請在wwwroot運行npm init以生成一個
2. 將wwwroot除package.json和package-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 以一種所有資產都相對於主 JS 文件的方式打包結果。 但是，Blazor 需要路徑_content/ProjectName的數據，該路徑使用publicPath進行publicPath 。

5. 將此添加到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 。

Answer 2

抱歉，Blazor 不支持此功能。 您最好的方法是為使用該庫的任何人記錄對外部依賴項的要求。

我要指出的是，並不是每個人都使用 NPM（我像避免瘟疫一樣避免使用它）並且對客戶端包有不同的方法，所以如果這是一個“公共”包，那么需要 NPM 的方法可能過於規范。 如果它只是內部使用，那很好，但是您自己決定如何處理捆綁和包裝。

有一個問題跟蹤靜態資源是如何處理的