首页 > 其他分享 >一步一步在 Blazor 里使用 npm

一步一步在 Blazor 里使用 npm

时间:2024-11-06 15:20:54浏览次数:1  
标签:npm node 封装 一步 js webpack Blazor interactjs

Blazor 目前不支持 node 语法,所以无法直接使用 node 包;所以需要再用 js 封装一层。

 

1,先给 npm 建个目录 “NpmJS” ,因为 node 无法直接当作 js 使用,所以这个目录不需要建在 wwwroot 下,反而方便 csproj 管理

  

 2,创建 node 项目,建议直接用 npm init 命令创建, vs 自带的管理器并不好用

  

  build 命令把入口文件输出到 wwwroot 下

 

3,打包需要 webpack,如果没装就装一下  

npm install webpack webpack-cli --save-dev

再配置一下 webpack.config.js

module.exports = {
    mode: 'none' // 设置mode   development为开发环境,production为生产环境
}

 

4,封装 node 包,给 blazor 使用

import interactjs from "@interactjs/interactjs"

window.helloword = () => {
    console.info("helloword", interactjs);
    prompt("wow");
}

环境都配置完后,可以在入口文件里封装 node 方法了。

因为 webpack 打包出来的 js 都是闭包,所以封装的方法要被 blazor 使用,必须把 blazor 挂在 window 下。export 的写法在这里无效

 

5,配置 csproj ,如果你希望编译项目时自动打包 node,就需要在 csproj  里配置编译事件

    <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
        <Exec Command="npm run build" WorkingDirectory="NpmJS" />
    </Target>
    <Target Name="PostBuild" AfterTargets="PostBuildEvent">
        <Exec Condition="$(Configuration) == 'Debug'" Command="npm run build" WorkingDirectory="NpmJS" />
        <Exec Condition="$(Configuration) == 'Release'" Command="npm run build" WorkingDirectory="NpmJS" />
    </Target>

 

这样每次编译时,NpmJS 下的 App.js 就会被打包到 wwwroot/js 下;使用时,在 razor 里直接按正常的 js 引入即可

 

标签:npm,node,封装,一步,js,webpack,Blazor,interactjs
From: https://www.cnblogs.com/cchong005/p/18530212

相关文章

  • Bootstrap Blazor自定义图片预览组件
            BootstrapBlazor的官方虽然有提供图片预览组件ImagePreviewer,但是,它是置于窗口顶层的,而且是全屏显示,如果业务中有在预览组件中添加其它功能的需求,它是不支持扩展的。    为此,我参考官方的源码,自己写了一个自定义图片预览组件,文件的源码在下面,可自行......
  • Blazor 使用 npm 依赖包
    使用node包时,经常会有 importinteractjsfrom'@interactjs/interactjs';这样类似的引用;这是node的语法,非node环境都不支持这种写法。所以Blazor要用node包,需要再用js封装一层。示例项目下面是一个node项目{"name":"test","version":"1.0.0","de......
  • npm&pnpm
    npm与pnpm磁盘效率:pnpm更高效,节省磁盘空间。安装速度:pnpm通常更快,尤其是多项目环境下。依赖管理:pnpm更严格的依赖隔离,减少冲突。Monorepo支持:pnpm支持更好,尤其是大型项目中。Monorepo支持是指在一个代码仓库(repository)中管理多个项目或软件包的技术支持和实践。安装pn......
  • 小程序使用npm
    TDesign第一步:npminstall第二步:npmitdesign-miniprogram-S--omit=dev第三步:修改project.config.json文件,然后工具栏中项目---》重新打开此项目 第四步:构建成功后勾选, 将JS编译成ES5         构建:工具--》构建npm 第五步:修改配置信息 第......
  • 初探Java:掌握基础语法的第一步
    大家好,我是一位正在学习Java编程的初学者。在这篇博文中,我想和大家分享我在掌握Java基础语法过程中的学习体会和一些实用的建议。希望我的经历能够帮助那些刚开始接触Java的朋友找到正确的学习路径。首先,为什么选择Java?Java作为一种广泛使用的编程语言,因其跨平台性、健壮性和......
  • blazor after visual studio update throws some strange JS warnings
    题意:Blazor在VisualStudio更新后出现一些奇怪的JS警告。问题背景:Afterupdatevisualstudioto17.11.3,inalmosteveryfilethatiopenedwithvisualstudiothrewsomewarning:在将VisualStudio更新到17.11.3后,几乎每个我用VisualStudio打开的文......
  • .NET云原生应用实践(五):使用Blazor WebAssembly实现前端页面
    本章目标使用BlazorWebAssembly实现管理“贴纸”页面集成认证与授权机制如果你对BlazorWebAssembly的使用不感兴趣,可以跳过本章的阅读。你也可以使用自己熟悉的前端技术完成案例的界面部分,之前我们开发的后端API比较简单,所以自己实现一套前端界面并不会是一个困难的事情。......
  • 找不到msvcp120.dll,无法继续执行代码的五种解决方法一步一步指南
    msvcp120.dll是MicrosoftVisualC++2013运行时库的一部分,属于动态链接库(DLL)文件的一种。这个文件是MicrosoftVisualC++RedistributablePackage的一个组件,对于许多基于Windows操作系统的应用程序正常运行至关重要。msvcp120.dll包含了C++标准库的实现,使得开发者......
  • NPM 国内源
    查看当前源npmconfiggetregistry切换国内源腾讯云npmconfigsetregistryhttps://mirrors.cloud.tencent.com/npm淘宝npmconfigsetregistryhttp://registry.npmmirror.com阿里云npmconfigsetregistryhttps://npm.aliyun.com华为云npmconfig......
  • 一步步教你部署网络唤醒服务器,轻松搞定设备睡眠、开机、关机与服务器端口检测
    文章目录......