天天看點

Blazor使用npm軟體包學習如何在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軟體包

一、準備工作

宿主開發環境如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

二、步驟

1.建立一個Blazor項目

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

2.在目前項目裡建立一個JsLib檔案夾

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

3.進入檔案夾JsLib , 運作 npm init

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

4.在檔案夾JsLib裡 ,建立src 檔案夾,并在src檔案裡建立index.js 檔案

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

5.現在将 moment 通過npm添加進來,運作 npm install moment,此時package.json 裡含有

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

6.接下來在src檔案夾裡建立一個time_lib.js的新檔案

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

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快

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

npm install webpack webpack-cli

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

10.在JsLib檔案夾裡建立 webpack.config.js 進行配置

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

如下代碼:

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。
    Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝
  • 将捆綁的庫放置到 wwwroot/js。

11. 修改package.json ,

"build": "webpack --mode production"

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

12.因為我們使用ES6文法,是以需要添加babel依賴關系。在JsLib檔案夾上運作此指令

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

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

13. 現在,可以通過 npm run build 建構我們的庫了,可以看到

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

14.接下來,在Pages裡添加一個

time.razor

的檔案

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝
@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.運作

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

16.最後,我們将npm run建構內建到dotnet建構,修改.csproj檔案

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝
<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

就好啦

如下圖:

Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝
Blazor使用npm軟體包學習如何在Blazor裡使用npm軟體包一、準備工作二、步驟總結學習來源,及感謝

總結

  1. 主要是 npm run建構內建到dotnet建構

學習來源,及感謝

學習于 Using npm packages with Blazor

感謝 作者