Vue SSR 응용 프로그램에서 Paper.js 사용

Vue SSR 응용 프로그램에서 Paper.js 사용

공식 가이드의 예시와 거의 비슷한 맞춤형 Vue SSR 애플리케이션을 사용하고 있습니다.paper.js 를 인스톨 하려고 하면, 다음의 에러가 표시됩니다.이 에러는 Pastebin 링크로 모두 재생됩니다.

WARNING in ./node_modules/paper/dist/node/extend.js
48:32-39 Critical dependency: require function is used in a way in which dependencies cannot be statically extracted

WARNING in ./node_modules/paper/dist/node/canvas.js
Module not found: Error: Can't resolve 'canvas' in '/Users/chaseries/Desktop/ANIMATION_FINAL_2/node_modules/paper/dist/node'

WARNING in ./node_modules/paper/dist/node/self.js
Module not found: Error: Can't resolve 'jsdom' in '/Users/chaseries/Desktop/ANIMATION_FINAL_2/node_modules/paper/dist/node'

WARNING in ./node_modules/paper/dist/node/extend.js
require.extensions is not supported by webpack. Use a loader instead.

ERROR in ./node_modules/paper/dist/node/canvas.js
Module not found: Error: Can't resolve 
'jsdom/lib/jsdom/living/generated/utils' in 

이 문제의 코드는import paper from "paper";내 페이지 중 한 페이지의 최상위 레벨에 있는 설명입니다.앱이 전혀 실행되지 않습니다.

어느 정도 이해가 됩니다.서버측 코드가 paper.js 를 사용하려고 하고 있어, 의존 관계가 없어 장해가 발생하고 있습니다.그래서 나는 수입을 조건부로 옮기려고 했다.mounted다음과 같은 방법:

...
mounted () {
    let paper;
    if (process.browser) {
        paper = require("paper");
    }
...
}

웹 팩은 동일한 경고와 오류를 발생시키지만 실제로 컴파일되어 작동합니다.이런 질문들을 몇 가지 더 봤어요. 이런 질문들은 마치 이런 것 같죠."paper/dist/paper-full.js"뿐만 아니라"paper"하지만 그것이 경고와 오류를 잠재우는 데는 아무런 도움이 되지 않습니다.

이게 무슨 일이야?Import가 서버에서 사전 렌더링되지 않으면 왜 평가되고 있습니까?저는 관련 라이브러리를 설치함으로써 문제를 해결하려고 했지만, 그것은 전혀 '가시밭'입니다.웹팩은 노드 고유의 코드, 특히 노드 캔버스에서는 일부 코드를 평가할 수 없다고 불평하고 있습니다.또한 제가 시도했던 모든 솔루션이 실패했다고 생각합니다.(이 코드가 동일했으면 좋겠다고 생각합니다만, 솔직히 말씀드리지만, 이 코드로 넘어가는 것은 두렵습니다.rabbit hole, webpack에 대해 충분히 알지 못하고 노드 내 paper.displaces 실행 관련 문서가 부족하기 때문입니다.)

디버깅을 위한 작업 예는 Github에서 찾을 수 있습니다.

주의: 컴파일이 정상적으로 진행되면 열고 다시 저장하면 오류가 나타납니다.이것은 또 다른 이상한 현상입니다.가끔 웹 팩은 순수한 녹색을 내뿜으며 모든 것이 정상이라고 말하지만 다음 세이브에서는 당황하게 됩니다.

또, 다른 곳에서 읽은 것과 달리, 이 문제는 웹 팩 자체와는 관련이 없는 것 같습니다.왜냐하면 Import는paper클라이언트측만의 Web 팩프로젝트에는 문제가 없습니다.

언급URL : https://stackoverflow.com/questions/51119164/using-paper-js-in-a-vue-ssr-application