Nuxt 라이브러리 적용

Nuxt에서 Brython을 적용하는 방법에 대해서 기술해본다. 

정확하게는 js 라이브러리 파일을 Nuxt에다 적용하는 방법이다. 

 

참고문서 

 

https://develop365.gitlab.io/nuxtjs-0.10.7-doc/ko/guide/plugins/

플러그인 - Nuxt.js

 

https://stackoverflow.com/questions/63190124/how-can-solve-the-error-babel-maximum-size-500kb-issue-in-server

How can solve the ERROR [BABEL] maximum size 500KB issue in server?

 

First,

static/vendor/brython-runnder.bundle.js에 파일 저장

 

1. vendor를 통한 적용방법 (라이브러리 용량이 적을경우)

 

  build: {
    vendor: ['vue-brython'],
    babel: {
      compact: true,
    },
  },

 

 

 

2. plugins 파일 생성 (라이브러리 용량이 크고 여러 곳에서 사용할 경우)

 

plugins/vue-brython.js

 

import Vue from 'vue'
import BrythonRunner from 'static/vendor/brython-runner.bundle'

Vue.use(BrythonRunner)

  plugins: [
    { src: '~/plugins/vue-brython', ssr: false },
  ],
  
  build: {
    babel: {
      compact: true,
    },
  },

 

 

3. 직접 적용 (한 곳에서만 사용할 경우)

 

<script>
import {BrythonRunner} from 'static/vendor/brython-runner.bundle';
</script>

다만 직접 가져오는 방식은 관리와 window 객체를 사용한 라이브러리일 경우 오류의 문제점이 발생한다.

 

 

 

Settings

 

코드 규칙을 위한 eslint는 까다롭기 때문에 형식에 조금이라도 벗어나면 발생하면 바로 오류를 발생시킨다. 

이미 plugins이나 vendor를 통해 전역으로 설정한 라이브러리라도 component나 page에 정의가 안되어 있을경우 오류를 발생시킨다.

 

 

.eslintrc.js

  globals: {
    BrythonRunner: true,
  },

위와 같이 BrythonRunner를 전역으로 설정해줘야한다. 

 

또한, 라이브러리에 eslint 적용을 제외하기 위해 .eslintignore 파일을 만든다. 

 

static/vendor/brython-runner.bundle.js