Rollup-plugin-typescript2: async/await ꡬ문이 ν¬ν•¨λœ ν”ŒλŸ¬κ·ΈμΈμ—μ„œλŠ” μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

에 λ§Œλ“  2018λ…„ 08μ›” 14일  Β·  15μ½”λ©˜νŠΈ  Β·  좜처: ezolenko/rollup-plugin-typescript2

무슨 일이 μΌμ–΄λ‚˜κ³  μ™œ 그것이 잘λͺ»λœ 것인가

이 ν”ŒλŸ¬κ·ΈμΈμ€ object-hash 문제 및 tscache.ts둜 μΈν•œ async/await ꡬ문이 ν¬ν•¨λœ ν”ŒλŸ¬κ·ΈμΈμ—μ„œλŠ” μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. μ§€κΈˆμ€ 비동기 ν•¨μˆ˜λ₯Ό 감지할 방법이 μ—†κΈ° λ•Œλ¬Έμ— 이것이 객체 ν•΄μ‹œλ₯Ό μˆ˜μ •ν•˜κΈ° μ–΄λ ΅λ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. κ·Έλž˜μ„œ 객체 ν•΄μ‹œκ°€ μ—†λŠ” λŒ€μ•ˆμ΄ μžˆμŠ΅λ‹ˆκΉŒ?

ν™˜κ²½

버전

  • νƒ€μ΄ν”„μŠ€ν¬λ¦½νŠΈ: 2.8.3
  • λ‘€μ—…: 2.1.1
  • λ‘€μ—… ν”ŒλŸ¬κ·ΈμΈ μœ ν˜• 슀크립트2: 0.14.0

λ‘€μ—….config.js

import svgr from '@svgr/rollup';
import typescript from 'rollup-plugin-typescript2';

export default {
  ...
  plugins: [
    replace({ 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV) }),
    svgr(),
    typescript({
      useTsconfigDeclarationDir: true,
    })
  ],
  ...
};

tsconfig.json

κ΄€λ ¨ μ—†μŒ.

νŒ¨ν‚€μ§€.json

κ΄€λ ¨ μ—†μŒ.

μžμ„Έν•œ ν‘œμ‹œκ°€ 3인 ν”ŒλŸ¬κ·ΈμΈ 좜λ ₯

[!] (rpt2 plugin) Error: Unknown object type "asyncfunction"
src/components/atoms/Icon/index.ts
Error: Unknown object type "asyncfunction"
    at Object._object (/Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:218:17)
    at Object._function (/Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:319:14)
    at Object.dispatch (/Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
    at /Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:246:18
    at Array.forEach (<anonymous>)
    at Object._object (/Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:242:21)
    at Object.dispatch (/Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:185:30)
    at /Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:260:23
    at Array.forEach (<anonymous>)
    at Object._array (/Users/vwxyutarooo/Projects/kouzoh/mercari-web-jp-component/node_modules/rollup-plugin-typescript2/node_modules/object-hash/index.js:259:20)

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

비동기 κΈ°λŠ₯이 μ§€κΈˆκΉŒμ§€ 맀우 일반적이기 λ•Œλ¬Έμ— 이것이 μ§€κΈˆκΉŒμ§€ 더 λ§Žμ€ λ¬Έμ œκ°€ λ˜μ§€ μ•Šμ•˜λ‹€λŠ” 사싀에 λ†€λžμŠ΅λ‹ˆλ‹€ πŸ˜€. κ·Έλ ‡κΈ° λ•Œλ¬Έμ— λ‹¨μˆœνžˆ λ¬΄μ‹œν•˜λ©΄ λ§Žμ€ μΊμ‹œ λ¬Έμ œκ°€ λ°œμƒν•  것이라고 μƒκ°ν•©λ‹ˆλ‹€. μ–Όλ§ˆ 전에 λ‚΄κ°€ object-hash에 μ œμΆœν•œ PR은 λ°”λ‘œ 이 문제의 κ²°κ³Όμ˜€μœΌλ©° object-hash에 λŒ€ν•œ 쒅속성을 μ œκ±°ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. μ–Όλ§ˆ 전에 μ œμΆœν•œ PR이 였λ₯˜ λ©”μ‹œμ§€μ— 제곡된 것과 λ™μΌν•œ κ°’κ³Ό μΌμΉ˜ν•˜κ³  두 λ‹¨μœ„ ν…ŒμŠ€νŠΈλ₯Ό λͺ¨λ‘ ν†΅κ³Όν•˜κ³  이 ν”ŒλŸ¬κ·ΈμΈμ˜ 문제λ₯Ό ν•΄κ²°ν–ˆκΈ° λ•Œλ¬Έμ— 잘 μž‘λ™ν•  것이라고 ν™•μ‹ ν•©λ‹ˆλ‹€. NPM νŒ¨ν‚€μ§€κ°€ μ•„λ‹Œ 여기에 μžˆμŠ΅λ‹ˆλ‹€.

@vwxyutarooo , 즉각적인 ν•΄κ²° 방법은 κ΅¬μ„±μ—μ„œ clean: true λ₯Ό μ„€μ •ν•˜μ—¬ μΊμ‹œλ₯Ό μ™„μ „νžˆ μš°νšŒν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. λ˜λŠ” (ν”ŒλŸ¬κ·Έμ— λŒ€ν•΄ μ£„μ†‘ν•©λ‹ˆλ‹€) 잘 μž‘λ™ν•˜λŠ” https://github.com/wessberg/rollup-plugin-ts λ₯Ό κ΅¬μΆ•ν–ˆμŠ΅λ‹ˆλ‹€.

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

object-hashκ°€ μ²˜λ¦¬ν•  수 μ—†λŠ” λͺ¨λ“  것을 λ¬΄μ‹œν•˜λŠ” ν•΄κ²° 방법을 μΆ”κ°€ν–ˆμŠ΅λ‹ˆλ‹€(objecthash λΆ„κΈ°, objectHashIgnoreUnknownHack μ˜΅μ…˜ μ°Έμ‘°). 이것은 잠재적으둜 μΊμ‹œλ₯Ό λΆ€μ‹€ν•˜κ²Œ λ§Œλ“€ 수 μžˆμœΌλ―€λ‘œ 쒋은 μž₯기적 μ†”λ£¨μ…˜μ΄ μ•„λ‹™λ‹ˆλ‹€.

@wessberg

비동기 κΈ°λŠ₯이 μ§€κΈˆκΉŒμ§€ 맀우 일반적이기 λ•Œλ¬Έμ— 이것이 μ§€κΈˆκΉŒμ§€ 더 λ§Žμ€ λ¬Έμ œκ°€ λ˜μ§€ μ•Šμ•˜λ‹€λŠ” 사싀에 λ†€λžμŠ΅λ‹ˆλ‹€ πŸ˜€. κ·Έλ ‡κΈ° λ•Œλ¬Έμ— λ‹¨μˆœνžˆ λ¬΄μ‹œν•˜λ©΄ λ§Žμ€ μΊμ‹œ λ¬Έμ œκ°€ λ°œμƒν•  것이라고 μƒκ°ν•©λ‹ˆλ‹€. μ–Όλ§ˆ 전에 λ‚΄κ°€ object-hash에 μ œμΆœν•œ PR은 λ°”λ‘œ 이 문제의 κ²°κ³Όμ˜€μœΌλ©° object-hash에 λŒ€ν•œ 쒅속성을 μ œκ±°ν•˜λŠ” 것이 μ’‹μŠ΅λ‹ˆλ‹€. μ–Όλ§ˆ 전에 μ œμΆœν•œ PR이 였λ₯˜ λ©”μ‹œμ§€μ— 제곡된 것과 λ™μΌν•œ κ°’κ³Ό μΌμΉ˜ν•˜κ³  두 λ‹¨μœ„ ν…ŒμŠ€νŠΈλ₯Ό λͺ¨λ‘ ν†΅κ³Όν•˜κ³  이 ν”ŒλŸ¬κ·ΈμΈμ˜ 문제λ₯Ό ν•΄κ²°ν–ˆκΈ° λ•Œλ¬Έμ— 잘 μž‘λ™ν•  것이라고 ν™•μ‹ ν•©λ‹ˆλ‹€. NPM νŒ¨ν‚€μ§€κ°€ μ•„λ‹Œ 여기에 μžˆμŠ΅λ‹ˆλ‹€.

@vwxyutarooo , 즉각적인 ν•΄κ²° 방법은 κ΅¬μ„±μ—μ„œ clean: true λ₯Ό μ„€μ •ν•˜μ—¬ μΊμ‹œλ₯Ό μ™„μ „νžˆ μš°νšŒν•˜λŠ” κ²ƒμž…λ‹ˆλ‹€. λ˜λŠ” (ν”ŒλŸ¬κ·Έμ— λŒ€ν•΄ μ£„μ†‘ν•©λ‹ˆλ‹€) 잘 μž‘λ™ν•˜λŠ” https://github.com/wessberg/rollup-plugin-ts λ₯Ό κ΅¬μΆ•ν–ˆμŠ΅λ‹ˆλ‹€.

@wessberg 예, 아직 μΈν„°νŽ˜μ΄μŠ€μ— 비동기식 λ‘€μ—… ν”ŒλŸ¬κ·ΈμΈμ΄ λ§Žμ§€ μ•Šμ€ 것 κ°™μŠ΅λ‹ˆλ‹€.

객체λ₯Ό ν•΄μ‹±ν•˜λŠ” 더 쒋은 방법을 μ•Œκ³  μžˆμŠ΅λ‹ˆκΉŒ? μ‹œμž‘ μ‹œ μ „λ‹¬λ˜λŠ” λ‘€μ—… ꡬ성 개체(λ”°λΌμ„œ μ‚¬μš©λœ λͺ¨λ“  ν”ŒλŸ¬κ·ΈμΈμ˜ μ†ŒμŠ€ 포함)λ₯Ό λΆ€λΆ„μ μœΌλ‘œ 기반으둜 μΊμ‹œ ν‚€λ₯Ό λ§Œλ“€μ–΄μ•Ό ν•©λ‹ˆλ‹€.

btw, λͺ…ν™•νžˆν•˜κΈ° μœ„ν•΄ - λ¬Έμ œλŠ” λ‘€μ—… ꡬ성 자체의 비동기 ν•­λͺ©μ— μ μš©λ©λ‹ˆλ‹€. μ½”λ“œκ°€ μ†ŒμŠ€ ν…μŠ€νŠΈλ₯Ό 기반으둜 ν•΄μ‹œλ˜κΈ° λ•Œλ¬Έμ— νŠΈλžœμŠ€νŒŒμΌλ˜λŠ” μ½”λ“œμ˜ λΉ„λ™κΈ°λŠ” λ¬Έμ œκ°€ λ˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€.

음, ν”ŒλŸ¬κ·ΈμΈμ„ name 속성에 λ§€ν•‘ν•˜λŠ” μ‚¬μš©μž 지정 ꡐ체기둜 전체 ꡬ성을 JSON.stringifyν•œ 결과에 sha1을 μ μš©ν•  수 μžˆμŠ΅λ‹ˆλ‹€.
예λ₯Ό λ“€μ–΄ λ‹€μŒ λ‘€μ—… ꡬ성:

{
  // ...
  treeshake: true,
  plugins: [
    myPlugin1(),
    myPlugin2()
  ],
  // ...
}

λ‹€μŒ JSON ν‘œν˜„μœΌλ‘œ λ³€ν™˜ν•  수 μžˆμŠ΅λ‹ˆλ‹€.

{
  "treeshake": true,
  "plugins": [
    "name-of-my-plugin-1",
    "name-of-my-plugin-2"
  ]
}

그런 λ‹€μŒ sha1을 μ μš©ν•˜κ³  base64 λ¬Έμžμ—΄μ„ μ–»κ±°λ‚˜ μΊμ‹œ ν‚€λ‘œ μ‚¬μš©ν•  수 μžˆλŠ” 것과 μœ μ‚¬ν•œ 것을 얻을 수 μžˆμŠ΅λ‹ˆκΉŒ?

λ‚˜λŠ” κ·Έ 라인을 따라 μƒκ°ν•˜κ³  μžˆμ—ˆμ§€λ§Œ μΊμ‹œμ— λŒ€ν•œ κ³ λ € μ‚¬ν•­μ—μ„œ 더 λ§Žμ€ 것을 μ œκ±°ν•˜μ§€ μ•Šμ„κΉŒμš”? object-hash λŠ” JSON.stringify κ°€ 일반 κ°’ 속성, λ°°μ—΄ λ˜λŠ” 사전이 μ•„λ‹Œ λͺ¨λ“  것을 버리기 λ•Œλ¬Έμ— νŠΉλ³„νžˆ λ§Œλ“€μ–΄μ‘Œλ‹€κ³  μƒκ°ν•©λ‹ˆλ‹€. json μ‚¬μ–‘μ—λŠ” λ‹€λ₯Έ 것이 μ—†μŠ΅λ‹ˆλ‹€.

μ‹ λ’°ν•  수 μžˆλŠ” 방법이 μžˆλ‹€λ©΄ package-lock,json ν•΄μ‹œμ™€ 이에 μƒμ‘ν•˜λŠ” 원사λ₯Ό 톡합할 수 μžˆλ‹€κ³  κ°€μ •ν•©λ‹ˆλ‹€. ( objectHashIgnoreUnknownHack μ˜΅μ…˜μ˜ 영ν–₯을 μ™„ν™”ν•˜κΈ° μœ„ν•΄)

이 λ¬Έμ œμ— λŒ€ν•΄ λ…Όμ˜ν•΄ μ£Όμ…”μ„œ κ°μ‚¬ν•©λ‹ˆλ‹€. μ‹€μ œλ‘œ clean: true μ˜΅μ…˜μ€ μΊμ‹œ ν”„λ‘œμ„ΈμŠ€λ₯Ό μš°νšŒν•˜μ§€ μ•ŠμœΌλ―€λ‘œ μž μ‹œλΌλ„ μž‘λ™ν•˜μ§€ μ•ŠμŠ΅λ‹ˆλ‹€. κ·ΈλŸ¬λ‚˜ ignoreUnknown λŠ” @ezolenkoκ°€ λ§ν•œ λŒ€λ‘œ 이 문제λ₯Ό ν•΄κ²°ν•˜λŠ” 방법일 수 μžˆμŠ΅λ‹ˆλ‹€. μ–΄μ¨Œλ“  0.16.2λ₯Ό κΈ°λ‹€λ¦¬κ² μŠ΅λ‹ˆλ‹€!

@vwxyutarooo , λ‚˜λŠ” clean: true κ°€ noop μΊμ‹œ μ „λž΅μ„ μ‚¬μš©ν•œλ‹€κ³  κ°€μ •ν–ˆμŠ΅λ‹ˆλ‹€. 그것이 λ‚΄κ°€ @ezolenko κ°€ μ–Όλ§ˆ 전에 κ΅¬ν˜„ν•œ 것을 κΈ°μ–΅ν•˜λŠ”

이것이 객체 ν•΄μ‹œ 결과에 μ–΄λ–€ 영ν–₯을 λ―ΈμΉ˜λŠ”μ§€ λͺ¨λ₯΄κ² μ§€λ§Œ objecthash λΆ„κΈ°μ˜ objectHashIgnoreUnknownHack μ˜΅μ…˜μ΄ μ €μ—κ²Œ νš¨κ³Όμ μž…λ‹ˆλ‹€.

clean: true κ°€ 객체 ν•΄μ‹œλ₯Ό ν˜ΈμΆœν•˜μ§€ μ•Šκ³  λͺ¨λ“  것을 λ§ˆμŠ€ν„°μ— λ³‘ν•©ν•˜λ„λ‘ μΊμ‹œλ₯Ό μ•½κ°„ μž¬μž‘μ—…ν–ˆμŠ΅λ‹ˆλ‹€. λ©°μΉ  λ‚΄λ‘œ ν’€μ–΄μ€„κ²Œ

ν˜„μž¬ 0.17.0μ—μ„œ

objectHashIgnoreUnknownHack 해킹을 μ‚¬μš©ν•˜μ§€ μ•ŠλŠ” λ‹€λ₯Έ ν•΄κ²° λ°©λ²•μ˜ 경우 rollup-plugin-require-context μ‚¬μš©ν•˜μ—¬ 이 λ¬Έμ œμ— λΆ€λ”ͺμ³€κ³  λ‹€μŒ μŠ€λ‹ˆνŽ«μ΄ μž‘λ™ν•˜λŠ” 것 κ°™μŠ΅λ‹ˆλ‹€.

import requireContextORIGINAL from 'rollup-plugin-require-context'

const requireContext = (options) => {
  const plugin = requireContextORIGINAL(options)
  return {
    name: plugin.name,
    transform(code, id) {
      return plugin.transform(code, id)
    }
  }
}

즉, transform 약속을 λ°˜ν™˜ν•˜λŠ” 일반 ν•¨μˆ˜λ‘œ λ§Œλ“­λ‹ˆλ‹€.

여기에 κ·Όλ³Έ 원인이 λ§ˆμΉ¨λ‚΄ https://github.com/puleos/object-hash/pull/90(https://github.com/puleos/ 와 맀우 μœ μ‚¬)μ—μ„œ μˆ˜μ •λ˜μ—ˆλ‹€λŠ” μ—…λ°μ΄νŠΈλ₯Ό μΆ”κ°€ν•  것이라고 μƒκ°ν–ˆμŠ΅λ‹ˆλ‹€. μœ„μ—μ„œ μ°Έμ‘°ν•œ object-hash/pull/68) 및 μ—¬κΈ° #203에 μžˆμŠ΅λ‹ˆλ‹€. 비동기 ν”ŒλŸ¬κ·ΈμΈμ„ μ§€μ›ν•˜κΈ° μœ„ν•΄ objectHashIgnoreUnknownHack λ₯Ό μ‚¬μš©ν•  ν•„μš”κ°€ μ—†κ³  더 이상 μΊμ‹œ λ¬Έμ œκ°€ μ—†μŠ΅λ‹ˆλ‹€ -- v0.26.0으둜 방금 μΆœμ‹œλ˜μ—ˆμŠ΅λ‹ˆλ‹€ πŸŽ‰ πŸ˜„

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