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

感謝 作者