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的文件里添加

如下代码：

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