Blazor使用npm软件包

最新推荐文章于 2025-01-05 13:11:35 发布

deng-peng

最新推荐文章于 2025-01-05 13:11:35 发布

阅读量1.2k

点赞数 1

分类专栏： dotnet core Blazor 文章标签： c# Blazor

本文链接：https://blog.csdn.net/u010279498/article/details/110806555

版权

本文详述了如何在Blazor项目中使用npm包，包括新建Blazor项目，创建JsLib文件夹，安装和配置webpack，使用babel处理ES6语法，通过npm run build构建库，并将构建过程集成到dotnet构建中，确保发布时库被正确复制到wwwroot/js。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习如何在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"

最低0.47元/天解锁文章