[2023-05-31] Quasar + vite + vue 에서 raw-loader를 대체하기 vite-raw-plugin

안녕하세요. 클스 입니다.

오늘은 5월의 마지막 날이네요

Quasar는 vue3 + vite를 기반으로 합니다. 그런데 초반에 text 파일을 읽어서 처리하는데

raw-loader 를 사용했습니다. 이것은 webpack 기반이라 vite와는 맞지 않습니다.

그래서 yarn install 을 하면 아래와 같이 경고가 발생합니다.

yarn install v1.22.19

[1/5] 🔍  Validating package.json...

[2/5] 🔍  Resolving packages...

[3/5] 🚚  Fetching packages...

[4/5] 🔗  Linking dependencies...

warning " > raw-loader@4.0.2" has unmet peer dependency "webpack@^4.0.0 || ^5.0.0".

[5/5] 🔨  Building fresh packages...

✨  Done in 4.53s.

오늘은 똑 같은 기능을 하면서 vite 기반의 라이브러리로 대체해보고자 합니다.

먼저 raw-loader 삭제 합니다.

$ yarn remove raw-loader

그리고 vite-raw-plugin 을 설치합니다.
$ yarn add vite-raw-plugin

소스는 하나도 수정할 필요가 없습니다.

package.json 에 정상적으로 삭제되고 설치된 것을 확인 할 수 있습니다.

"vite-raw-plugin": "^1.0.1",

<script lang="ts">

import { useQuasar } from 'quasar';

import { defineComponent, defineAsyncComponent, ref } from 'vue';

import getVueTemplate from 'src/ztemplate/vue_gen_template.txt?raw';

... 생략 ...

export default defineComponent({

name: 'LoginPageEx',

components: {

    //TODO: Your components

},

setup() {

const $q = useQuasar();

return {

    //TODO:

};

},

data() {

return {

    //TODO:

};

},

methods: {

showFile() {

console.log('getVueTemplate > ', getVueTemplate);

this.$q

.dialog({

title: 'Source Code Here <클립보드로 들어가 있어요>!!!',

message: getVueTemplate,

style: 'min-width:50vw;min-height=50vh',

html: false,

})

.onOk(() => {

// console.log('OK')

})

.onCancel(() => {

// console.log('Cancel')

})

.onDismiss(() => {

// console.log('I am triggered on both OK and Cancel')

});

},

... 생략 ...

기존소스 변경없이 적용되니 좋네요~

이상입니다.