Blazor使用npm软件包

文章目录

• 学习如何在Blazor里使用npm软件包
• 一、准备工作
• 二、步骤
• • 1.新建一个Blazor项目
  • 2.在当前项目里创建一个JsLib文件夹
  • 3.进入文件夹JsLib , 运行 npm init
  • 4.在文件夹JsLib里 ,创建src 文件夹，并在src文件里创建index.js 文件
  • 5.现在将 moment 通过npm添加进来，运行 npm install moment,此时package.json 里含有
  • 6.接下来在src文件夹里创建一个time_lib.js的新文件
  • 7.在time_lib.js的文件里添加
  • 8.在index.js的文件里添加
  • 9.使用webpack 打包库，并将放入到当前程序的 wwwroot/js里；通过npm添加 webpack webpack-cli
  • 10.在JsLib文件夹里创建 webpack.config.js 进行配置
  • 11. 修改package.json ，
  • 12.因为我们使用ES6语法，所以需要添加babel依赖关系。在JsLib文件夹上运行此命令
  • 13. 现在，可以通过 npm run build 构建我们的库了，可以看到
  • 14.接下来，在Pages里添加一个`time.razor`的文件
  • 15.运行
  • 16.最后，我们将npm run构建集成到dotnet构建，修改.csproj文件
  • 17.发布 ，通过上面步骤，发布时，该库将复制到wwwroot / js文件夹，因此无需为发布配置任何内容；
• 总结
• 学习来源，及感谢

学习如何在Blazor里使用npm软件包

一、准备工作

宿主开发环境如下图：

二、步骤

1.新建一个Blazor项目

如下图：

2.在当前项目里创建一个JsLib文件夹

3.进入文件夹JsLib , 运行 npm init

如下图：

4.在文件夹JsLib里 ,创建src 文件夹，并在src文件里创建index.js 文件

如下图：

5.现在将 moment 通过npm添加进来，运行 npm install moment,此时package.json 里含有

如下图：

6.接下来在src文件夹里创建一个time_lib.js的新文件

如下图：

7.在time_lib.js的文件里添加

如下代码：

import moment from 'moment';

export function getCurrentTime() {
    return moment().format();
}
           

8.在index.js的文件里添加

如下代码：

import { getCurrentTime } from './time_lib';

export function GetCurrentTime() {
    return getCurrentTime();
}

           

9.使用webpack 打包库，并将放入到当前程序的 wwwroot/js里；通过npm添加 webpack webpack-cli

npm 太慢，还是用cnpm快

npm install webpack webpack-cli

如下图：

10.在JsLib文件夹里创建 webpack.config.js 进行配置

如下图：

如下代码：

const path = require("path");

module.exports = {
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader"
                }
            }
        ]
    },
    output: {
        path: path.resolve(__dirname, '../wwwroot/js'),
        filename: "my_lib.js",
        library: "MyLib"
    }
};
           

上面的配置将告诉webpack执行以下操作

• 使用babel-loader，因为我们使用的是ES6语法。
• 将绑定的库命名为my_lib.js，并将其命名为MyLib。

  

• 将捆绑的库放置到 wwwroot/js。

11. 修改package.json ，

"build": "webpack --mode production"

如下图：

12.因为我们使用ES6语法，所以需要添加babel依赖关系。在JsLib文件夹上运行此命令

npm install babel-loader @babel/core --save-dev

如下图：

13. 现在，可以通过 npm run build 构建我们的库了，可以看到

如下图：

14.接下来，在Pages里添加一个

time.razor

的文件

如下图：

@page "/time"
@inject IJSRuntime JsRunTime

<button class="btn btn-primary" @onclick="@GetCurrentTime">Get Current Time </button>

@CurrentTime

@code {
    private MarkupString CurrentTime = new MarkupString("");

    async void GetCurrentTime()
    {
        var dateTime = await JsRunTime.InvokeAsync<string>("MyLib.GetCurrentTime");
        CurrentTime = new MarkupString(dateTime);
        StateHasChanged();
    }
}

           

15.运行

如下图：

16.最后，我们将npm run构建集成到dotnet构建，修改.csproj文件

如下图：

<Project Sdk="Microsoft.NET.Sdk.Web">

	<PropertyGroup>
		<TargetFramework>net5.0</TargetFramework>
		<LangVersion>9.0</LangVersion>
		<!--<UserSecretsId>f89b740c-3f1f-4687-ae55-73f4388f93a9</UserSecretsId>-->
		<JsLibRoot>JsLib\</JsLibRoot>
		<DefaultItemExcludes>$(DefaultItmeExcludes);$(JsLibRoot)node_modules\**</DefaultItemExcludes>
	</PropertyGroup>

	<ItemGroup>
		<Compile Remove="disk\**" />
		<Compile Remove="dist\**" />
		<Content Remove="$(JsLibRoot)**" />
		<Content Remove="disk\**" />
		<Content Remove="dist\**" />
		<EmbeddedResource Remove="disk\**" />
		<EmbeddedResource Remove="dist\**" />
		<None Remove="$(JsLibRoot)**" />
		<None Remove="disk\**" />
		<None Remove="dist\**" />
		<None Include="$(JsLibRoot)**" Exclude="$(JsLibRoot)node_modules\**" />
	</ItemGroup>

	<Target Name="DebugEnsureNodeEnv" BeforeTargets="Build" Condition=" '$(Configuration)' == 'Debug' And !Exists('$(JsLibRoot)node_modules') ">
		<!-- Ensure Node.js is installed -->
		<Exec Command="node --version" ContinueOnError="true">
			<Output TaskParameter="ExitCode" PropertyName="ErrorCode" />
		</Exec>
		<Error Condition="'$(ErrorCode)' != '0'" Text="Node.js is required to build and run this project. To continue, please install Node.js from https://nodejs.org/, and then restart your command prompt or IDE." />
		<Message Importance="high" Text="Restoring dependencies using 'npm'. This may take several minutes..." />
		<Exec WorkingDirectory="$(JsLibRoot)" Command="npm install" />
		<Exec WorkingDirectory="$(JsLibRoot)" Command="npm run build" />
	</Target>

	<Target Name="PublishRunWebpack" AfterTargets="ComputeFilesToPublish">
		<!-- As part of publishing, ensure the JS resources are freshly built in production mode -->
		<Exec WorkingDirectory="$(JsLibRoot)" Command="npm install" />
		<Exec WorkingDirectory="$(JsLibRoot)" Command="npm run build" />
	</Target>

</Project>

           

17.发布 ，通过上面步骤，发布时，该库将复制到wwwroot / js文件夹，因此无需为发布配置任何内容；

运行

dotnet publish -o disk

就好啦

如下图：

总结

1. 主要是 npm run构建集成到dotnet构建

学习来源，及感谢

学习于 Using npm packages with Blazor

感谢 作者