Peerjs: Angular 8 μ•±μ—μ„œ Peer 1.0.1을 κ°€μ Έμ˜¬ 수 μ—†μŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2019λ…„ 07μ›” 10일  Β·  9μ½”λ©˜νŠΈ  Β·  좜처: peers/peerjs

μ•ˆλ…•ν•˜μ„Έμš”!
각도 8κ³Ό ν•¨κ»˜ peerJλ₯Ό μ‚¬μš©ν•˜λ €κ³  μ‹œλ„ν–ˆμ§€λ§Œ μ‹€νŒ¨ν–ˆμŠ΅λ‹ˆλ‹€.
μ•±μœΌλ‘œ κ°€μ Έμ˜¬ 수 μ—†μŠ΅λ‹ˆλ‹€.

이 문제λ₯Ό 보여주기 μœ„ν•΄ μž‘μ€ ν”„λ‘œμ νŠΈ (https://github.com/furozen/PeerJs-example)λ₯Ό λ§Œλ“€μ—ˆμŠ΅λ‹ˆλ‹€.

1

import * as Peer from 'peerjs';

컴파일 였λ₯˜ :

ERROR in src/app/app.component.ts:14:16 - error TS2351: Cannot use 'new' with an expression whose type lacks a call or construct signature.

14     let peer = new Peer();
                  ~~~~~~~~~~

  src/app/app.component.ts:3:1
    3 import * as Peer from 'peerjs';
      ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    Type originates at this import. A namespace-style import cannot be called or constructed, and will cause a failure at runtime. Consider using a default import or import require here instead.

2

import { Peer } from 'peerjs'

컴파일 였λ₯˜ :

ERROR in src/app/app.component.ts:3:10 - error TS2305: Module '"../../node_modules/peerjs"' has no exported member 'Peer'.

3 import { Peer } from 'peerjs'
         ~~~~

μ‚Ό

import Peer from 'peerjs'

컴파일 였λ₯˜ :

WARNING in ./node_modules/peerjs/dist/peerjs.min.js 1:292-296
Critical dependency: the request of a dependency is an expression

μ‹€ν–‰ μ‹œκ°„:

Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.vHo1 (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js (peerjs.min.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (main.js:112)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:11)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

4

import Peer = require('peerjs');

컴파일 였λ₯˜ :

    ERROR in src/app/app.component.ts(3,1): error TS1202: Import assignment cannot be used when targeting ECMAScript modules. Consider using 'import * as ns from "mod"', 'import {a} from "mod"', 'import d from "mod"', or another module format instead

μ‹€ν–‰ μ‹œκ°„:

AppComponent_Host.ngfactory.js? [sm]:1 ERROR ReferenceError: Peer is not defined
    at new AppComponent (app.component.ts:15)
    at createClass (core.js:27863)
    at createDirectiveInstance (core.js:27685)
    at createViewNodes (core.js:38315)
    at createRootView (core.js:38187)
    at callWithDebugContext (core.js:39716)
    at Object.debugCreateRootView [as createRootView] (core.js:38953)
    at ComponentFactory_.create (core.js:26827)
    at ComponentFactoryBoundToModule.create (core.js:22791)
    at ApplicationRef.bootstrap (core.js:35343)

κ°€μž₯ μœ μš©ν•œ λŒ“κΈ€

μ£„μ†‘ν•©λ‹ˆλ‹€! λ‚΄κ°€ μΆ”κ°€ν•˜κ³  μ œκ±°ν•˜λŠ” 것을 μžŠμ€ index.html의 νŒ¨μΉ˜μ˜€μŠ΅λ‹ˆλ‹€.

  <script>
    window.global  = window;
    var parcelRequire;
  </script>

이 νŒ¨μΉ˜μ—†μ΄ λ‚˜λŠ” μ–»μ—ˆλ‹€ :

Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.vHo1 (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js (peerjs.min.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (main.js:112)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:12)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

λŸ°νƒ€μž„μ—.

https://github.com/furozen/PeerJs-example μ—μ„œ 였λ₯˜λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

λͺ¨λ“  9 λŒ“κΈ€

λͺ¨λ“ˆμ„ "CommonJs"둜 λ³€κ²½ν•˜λ©΄ 컴파일 였λ₯˜λ₯Ό μ œκ±°ν•˜λŠ” 데 λ„μ›€μ΄λ˜μ§€λ§Œ λŸ°νƒ€μž„ 였λ₯˜λ₯Ό μˆ˜μ •ν•˜μ§€λŠ” μ•ŠμŠ΅λ‹ˆλ‹€. μ—¬μ „νžˆ # 3 μ‚¬λ‘€μž…λ‹ˆλ‹€.

그만큼

ReferenceError: parcelRequire is not defined

이 λ¬Έμ œμ™€ 연결될 수 μžˆμŠ΅λ‹ˆλ‹€ : https://github.com/parcel-bundler/parcel/issues/1401

μ˜¬λ°”λ₯Έ 방법은 import Peer from "peerjs" 이며 μ›ΉνŒ© κ²½κ³ κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.

./node_modules/peerjs/dist/peerjs.min.js 1 : 292-296의 경고
μ€‘μš” 쒅속성 : 쒅속성 μš”μ²­μ€ ν‘œν˜„μ‹μž…λ‹ˆλ‹€.

이것은 라이브러리 λ‚˜ 컴파일 ν”„λ‘œμ„ΈμŠ€μ— 영ν–₯을주지 μ•Šμ•„μ•Όν•©λ‹ˆλ‹€.

https://github.com/parcel-bundler/parcel/issues/2883

μ˜¬λ°”λ₯Έ 방법은 import Peer from "peerjs" 이며 μ›ΉνŒ© κ²½κ³ κ°€ ν‘œμ‹œλ©λ‹ˆλ‹€.

./node_modules/peerjs/dist/peerjs.min.js 1 : 292-296의 경고
μ€‘μš” 쒅속성 : 쒅속성 μš”μ²­μ€ ν‘œν˜„μ‹μž…λ‹ˆλ‹€.

이것은 라이브러리 λ‚˜ 컴파일 ν”„λ‘œμ„ΈμŠ€μ— 영ν–₯을주지 μ•Šμ•„μ•Όν•©λ‹ˆλ‹€.

parcel-bundler / parcel # 2883

λ„€, μž‘μ—… μ ‘κ·Ό 방식 κ°μ‚¬ν•©λ‹ˆλ‹€.
결둠적으둜:
tsconfig.json에 "esModuleInterop": trueκ°€ μžˆμ–΄μ•Όν•©λ‹ˆλ‹€.
lib κ°€μ Έ 였기 : "peerjs"μ—μ„œ Peer κ°€μ Έ 였기

μ£„μ†‘ν•©λ‹ˆλ‹€! λ‚΄κ°€ μΆ”κ°€ν•˜κ³  μ œκ±°ν•˜λŠ” 것을 μžŠμ€ index.html의 νŒ¨μΉ˜μ˜€μŠ΅λ‹ˆλ‹€.

  <script>
    window.global  = window;
    var parcelRequire;
  </script>

이 νŒ¨μΉ˜μ—†μ΄ λ‚˜λŠ” μ–»μ—ˆλ‹€ :

Uncaught ReferenceError: parcelRequire is not defined
    at push../node_modules/peerjs/dist/peerjs.min.js.parcelRequire.vHo1 (peerjs.min.js:1)
    at Object../node_modules/peerjs/dist/peerjs.min.js (peerjs.min.js:1)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.component.ts (main.js:112)
    at __webpack_require__ (bootstrap:79)
    at Module../src/app/app.module.ts (app.component.ts:12)
    at __webpack_require__ (bootstrap:79)
    at Module../src/main.ts (main.ts:1)
    at __webpack_require__ (bootstrap:79)
    at Object.0 (main.ts:12)

λŸ°νƒ€μž„μ—.

https://github.com/furozen/PeerJs-example μ—μ„œ 였λ₯˜λ₯Ό 확인할 수 μžˆμŠ΅λ‹ˆλ‹€.

λ‚˜λŠ” 그것이 버그가 μ•„λ‹ˆλΌκ³  μƒκ°ν•©λ‹ˆλ‹€. 그것은 λ‚΄ 각도 8 ν”„λ‘œμ νŠΈμ—μ„œ μž‘λ™ν•©λ‹ˆλ‹€.
index.d.ts νŒŒμΌμ„ ν”„λ‘œμ νŠΈμ— μΆ”κ°€ν•΄μ•Όν•©λ‹ˆλ‹€. 이 νŒŒμΌμ€ 루트 λ””λ ‰ν† λ¦¬μ—μ„œ 찾을 수 μžˆμŠ΅λ‹ˆλ‹€.
import peerjsκ°€ ν•„μš”ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€! index.d.ts νŒŒμΌμ—μ„œ μ„ μ–Έλ˜μ—ˆμœΌλ―€λ‘œ Peer 클래슀λ₯Ό μ‚¬μš©ν•˜μ‹­μ‹œμ˜€.

κ·Έλž˜μ„œ Angular 앱에 peerjs (v1.1.0)λ₯Ό μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€. μ²˜μŒμ—λŠ” 문제 λ‚˜ 였λ₯˜κ°€ μ—†μ—ˆμŠ΅λ‹ˆλ‹€. PeerjsλŠ” 2-3 단계λ₯Ό 거치기 μ „κΉŒμ§€λŠ” μ‹€μ œλ‘œ ν™œμš©λ˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€. λ‚˜λŠ” 앱에 또 λ‹€λ₯Έ 뢀뢄을 μΆ”κ°€ν–ˆλŠ”λ°, μ°©λ₯™μ‹œ peerjsλ₯Ό μ‹œμž‘ν–ˆκ³  κ·Έλ•ŒλΆ€ν„° parcelRequire 였λ₯˜κ°€ 보이기 μ‹œμž‘ν–ˆμŠ΅λ‹ˆλ‹€. https://github.com/peers/peerjs/issues/552#issuecomment -510976519μ—μ„œ parcelRequire μ΄ˆκΈ°ν™”λ₯Ό μΆ”κ°€ν–ˆλŠ”λ° μ§€κΈˆμ€ μ œλŒ€λ‘œ μž‘λ™ν•˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€. μ–΄λ”˜κ°€μ— 경쟁 쑰건이 μžˆλ‹€κ³  μƒκ°ν•˜μ§€λ§Œ 더 μžμ„Ένžˆ μ‘°μ‚¬ν•˜λŠ” 데 μ‹œκ°„μ„ μ†ŒλΉ„ν•˜μ§€ μ•Šμ•˜μŠ΅λ‹ˆλ‹€.

Angular 9μ—μ„œλ„ λ™μΌν•œ λ¬Έμ œκ°€ λ°œμƒν–ˆμŠ΅λ‹ˆλ‹€. esModuleInterop: true 및 allowSyntheticDefaultImports: true λ₯Ό tsconfig.json에 μΆ”κ°€ν–ˆμ§€λ§Œ μ„±κ³΅ν•˜μ§€ λͺ»ν–ˆμŠ΅λ‹ˆλ‹€. μ–΄λ–€ μ†Œμ‹μ΄λΌλ„?

이것은 @furozen κ²Œμ‹œλ¬Όμ— 따라 index.html의 μž„μ‹œ μˆ˜μ •μœΌλ‘œ λ‚˜λ₯Ό μœ„ν•΄ μž‘λ™ν•©λ‹ˆλ‹€.

<script>
    var parcelRequire;
  </script>

μ΄λŠ” μ‘°λͺ… μš”μ†Œ ν”„λ‘œμ νŠΈλ‘œ peerjsλ₯Ό κ°€μ Έμ˜¬ λ•Œ 2021 년에 문제둜 남아 μžˆμŠ΅λ‹ˆλ‹€.
λ¬Έμ œλŠ” peerjs의 λΉŒλ“œ 된 좜λ ₯이 λ‹€μŒμœΌλ‘œ μ‹œμž‘ν•œλ‹€λŠ” μ‚¬μ‹€μ—μ„œ λΉ„λ‘―λœ κ²ƒμœΌλ‘œ λ³΄μž…λ‹ˆλ‹€.

parcelRequire=

μ•„μ‹œλ‹€μ‹œν”Ό λ³€μˆ˜λ₯Ό μ„ μ–Έν•˜λŠ” 것보닀

var parcelRequire=

결과적으둜 λ‚΄ μ‘°λͺ… μš”μ†Œ ν”„λ‘œμ νŠΈμ—μ„œ λ¬Έμ œκ°€ λ°œμƒν•˜λŠ” 반면 λΈŒλΌμš°μ €λŠ”μ΄ λ³€μˆ˜λ₯Ό μ „μ—­ λ²”μœ„λ‘œ 기꺼이 λŒμ–΄ 올렀 μž‘μ—…μ„ μ§„ν–‰ν•©λ‹ˆλ‹€.

이 νŽ˜μ΄μ§€κ°€ 도움이 λ˜μ—ˆλ‚˜μš”?
0 / 5 - 0 λ“±κΈ‰