1. Blazor 에서 NPM 적용하기

1. Blazor Server 프로젝트 생성

2. 프로젝트에 Npm 생성

 - 프로젝트에 NpmJS 폴더 추가

 

- 생성한 폴더에 마우스 우클릭 - 터미널 열기 

> npm init -y

 

 -> 초기 설정하는  package.json file이 생성된다. 

- src 라는 새로운 폴더를 NpmJS 에 생성하고 src 파일안에 index.js 파일 생성

 

 

3. npm build script 추가 (javascript file을 bundle 하기 위한 webpack을 사용하려고)

- package.json 파일을 수정

"scripts": {
    "build": "webpack ./src/index.js --output-path ../wwwroot/js --output-filename index.bundle.js"
  },

-> 이 bulde script 우리가 만든 src 폴더에  index.js file을 가르킨다. 그리고 이것은 프로젝트의 wwwroot/js  위치되게 된다. 

 

4. npm packages in blazor

- 사용할 npm package를 선택해야한다. 

Radial Gauge Web Component from Infragistics.

 

- NpmJS 폴더의 터미널 열기 

> npm install igniteui-webcomponents-core igniteui-webcomponents-gauges

 

- index.js file 을 열고 아래 코드를 추가해서 radial gauge 를 초기화 시킨다. 

// Module Manager for registering the modules of the chart
import { ModuleManager } from 'igniteui-webcomponents-core';
// Bullet Graph Module
import { IgcRadialGaugeCoreModule  } from 'igniteui-webcomponents-gauges';
import { IgcRadialGaugeModule } from 'igniteui-webcomponents-gauges';

// register the modules
ModuleManager.register(
    IgcRadialGaugeCoreModule,
    IgcRadialGaugeModule
);

 

- index.razor 파일을 열고  igc-radial-gauge  컴포넌트 마크를 정의

<igc-radial-gauge id="rg" height="400px" width="400px" value="25" interval="5" minimum-value="0" maximum-value="100">
    <igc-radial-gauge-range start-value="0" end-value="30" brush="red"></igc-radial-gauge-range>
    <igc-radial-gauge-range start-value="30" end-value="60" brush="yellow"></igc-radial-gauge-range>
    <igc-radial-gauge-range start-value="60" end-value="100" brush="green"></igc-radial-gauge-range>
</igc-radial-gauge>

 

5. Build, Update, and Run

1. NpmJS 파일의 터미널을 열고 아래 명령어를 입력

> npm run build

 

<에러 발생>

_webpack_ WARNING in configuration

 

 

WARNING in configuration
The 'mode' option has not been set, webpack will fallback to 'production' for this value.
Set 'mode' option to 'development' or 'production' to enable defaults for each environment.
You can also set it to 'none' to disable any default behavior. Learn more:

 

 

 

-> mode 옵션 설정필요

package.json 수정

{
  "name": "NpmJS",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack ./src/index.js --output-path ../wwwroot/js --output-filename index.bundle.js --mode development"
  },

 

scripts > build 에 -- mode development 추가

 

<에러발생2>

can't resolve lit-html in package ....

 

이건 NpmJS 터미널 CMD 에서 npm i lit-html 명령어 입력 후 powersell 에서 npm run build 실행

 

 

성공

 

6. csproj 파일에서 pre-build 설정해준다.

  <Target Name="PreBuild" BeforeTargets="PreBuildEvent">
    <Exec Command="npm install" WorkingDirectory="NpmJS" />
    <Exec Command="npm run build" WorkingDirectory="NpmJS" />
  </Target>

 

- 이 설정은 애플리케이션 빌드 또는 디버그 수행시 호출된다.  먼저 npm install 실행해 모든 npm 패키지가 설치되어있는지 확인한 다음 npm 빌드 스크립트를 실행

 

- npm 빌드 스크립트가 실행되고 index.bundle.js 파일이 생성된 후 새로 생성된 index.bundle.js 파일을 wwwroot/index.html 파일에 업데이트.

<script src="js/index.bundle.js"></script>

 

 

 

참고사이트 : https://brianlagunas.com/using-npm-packages-in-blazor/