Nuxt3 Fontawesome 가져오기(2022/03/13)

Itso입니다.저는 유르메스트의 엔지니어입니다.
Nuxt3에Foontawesome를 사용하려면 좀 까다로워서 썼어요.
지금β판이라 변경 가능성 있음)
물론 사용할 수 없습니다@nuxtjs/fontawesome. 이번에는 제가 직접 준비할게요.

가져오기

우선 이쪽을 따라 필요한 창고에 넣으세요.
https://github.com/FortAwesome/vue-fontawesome

라이브러리 설치

$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons

Vue 3.x에 대해서 지금 프리랜서 버전이 있는 것 같아요.

$ npm i --save @fortawesome/vue-fontawesome@prerelease

플러그인 가져오기

이번에는 기본적으로 이쪽https://github.com/FortAwesome/vue-fontawesome#nuxtjs을 답습하여plugies 폴더에서 제작Fontawesome.ts하여 가져옵니다.
plugins/Fontawesome.ts

import { config, library } from '@fortawesome/fontawesome-svg-core'
import { fas } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'

export default defineNuxtPlugin((nuxtApp) => {
// This is important, we are going to let Nuxt.js worry about the CSS
  config.autoAddCss = false
// You can add your icons directly in this plugin. See other examples for how you
// can add other styles or just individual icons.
  library.add(fas)
  nuxtApp.vueApp.component('font-awesome-icon', FontAwesomeIcon)
})

plugens 내의 최고급 파일을 자동으로 읽을 수 있습니다. 이렇게 하면 완성됩니다.
nuxt.conf.ts에서 다음을 추가합니다.
nuxt.config.ts

css: [
  '@fortawesome/fontawesome-svg-core/styles.css'
]

app.vue에 구성 요소 추가하기
app.vue

<template>
   <font-awesome-icon icon="coffee" />
</template>

npm run dev

아이콘 표시 -
마지막에 끝날 줄 알았는데 잘 되지 않았다.

ES 모듈 문제

bulidnpm run start를 시도하면 대량의 오류가 발생할 수 있습니다.

Named export 'config' not found. The requested module '@fortawesome/fontawesome-svg-core' is a CommonJS module, which may not support all module.exports as named exports.
CommonJS modules can always be imported via the default export, for example using:

import pkg from '@fortawesome/fontawesome-svg-core';
const { config, library } = pkg;

  at ModuleJob._instantiate (node:internal/modules/esm/module_job:124:21)  
  at async ModuleJob.run (node:internal/modules/esm/module_job:181:5)  
  at async Promise.all (index 0)  
  at async ESMLoader.import (node:internal/modules/esm/loader:281:24)  
  at async file://./.output/server/chunks/app/render.mjs:523:24  
  at async renderMiddleware (file://./.output/server/chunks/app/render.mjs:578:20)  
  at async handle (file://./.output/server/node_modules/h3/dist/index.mjs:268:19)

아, 또 모조에 관한 일인데 요즘 속수무책이야.
Common 모듈도 import이 가능하지만 전부는 아닙니다. 그렇죠.
확실히@fontawesome/fontawesome-svg-core 폴더index.es.js index.js서류가 두 개 있어요.
이게 이유죠.
(자세한 내용은 아래에 설명되어 있지 않습니다.)
http://v3.nuxtjs.org/concepts/esm
대응 방법은
http://v3.nuxtjs.org/concepts/esm/#troubleshooting-esm-issues
다음 내용 추가
nuxt.config.ts

  build: {
    transpile: [
      '@fortawesome/fontawesome-svg-core',
      '@fortawesome/free-solid-svg-icons',
      '@fortawesome/vue-fontawesome',
    ],
  },

이렇게 하면build도 틀리지 않을 겁니다.
Common 모듈과 ES 모듈의 주제에 대해 깊은 논쟁이 벌어지고 있습니다.
(이전에는) Action Script를 사용할 때 ES라는 느낌을 받았습니다.
낡은 자원을 어떻게 처리합니까?그런 거죠?(깊이 들어가지 않았다.)
본편과 다르지만 Nuxt3은 베타인데 업데이트 때마다 ERR와 WARN이 나오니 번거롭네요.