Rollup-plugin-typescript2: tsconfig์˜ "target": "esnext"๋กœ ์ธํ•œ ์„ ํƒ์  ์—ฐ๊ฒฐ ์‹คํŒจ

์— ๋งŒ๋“  2019๋…„ 11์›” 15์ผ  ยท  7์ฝ”๋ฉ˜ํŠธ  ยท  ์ถœ์ฒ˜: ezolenko/rollup-plugin-typescript2

๋ฌด์Šจ ์ผ์ด ์ผ์–ด๋‚˜๊ณ  ์™œ ๊ทธ๊ฒƒ์ด ์ž˜๋ชป ๋˜์—ˆ์Šต๋‹ˆ๊นŒ?

https://github.com/brandon-leapyear/rollup-optional-chaining-repro

README์—์„œ ๋ณต์‚ฌ:

yarn rollup -c

์ฃผ์„ "target": "esnext" ๋ผ์ธ tsconfig.json ์˜ค๋ฅ˜๋ฅผ ํ‘œ์‹œํ•ฉ๋‹ˆ๋‹ค :

index.ts: (3:57)
[!] Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
index.ts (3:57)
1: import React from 'react'
2: 
3: const a: { b?: string } = {}
                               ^
4: 
5: export default () => <span>{a?.b}</span>
Error: Unexpected token (Note that you need plugins to import files that are not JavaScript)
    at error (/Users/bchinn/Desktop/rollup-example/node_modules/rollup/dist/rollup.js:5351:30)
    at Module.error (/Users/bchinn/Desktop/rollup-example/node_modules/rollup/dist/rollup.js:9643:9)
    at tryParse (/Users/bchinn/Desktop/rollup-example/node_modules/rollup/dist/rollup.js:9552:16)
    at Module.setSource (/Users/bchinn/Desktop/rollup-example/node_modules/rollup/dist/rollup.js:9868:33)
    at /Users/bchinn/Desktop/rollup-example/node_modules/rollup/dist/rollup.js:12148:20
    at async Promise.all (index 0)
    at async Promise.all (index 0)
    at async Promise.all (index 0)

"target": "esnext" ์ธํ•ด rollup-plugin-typescript2 ๋ฒ„๊ทธ์ธ ๊ฒƒ ๊ฐ™์Šต๋‹ˆ๋‹ค.
์ฃผ์„ ์ฒ˜๋ฆฌ๋˜์ง€ ์•Š์€ yarn tsc --noEmit ์—ฌ์ „ํžˆ ์ž‘๋™ํ•ฉ๋‹ˆ๋‹ค(์˜ˆ: Typescript๊ฐ€ ์ž˜ ๊ตฌ๋ฌธ ๋ถ„์„ํ•จ).

ํ™˜๊ฒฝ

๊ด€๋ จ์ด ์—†์–ด์•ผ ํ•จ

๋ฒ„์ „

  • ํƒ€์ดํ”„์Šคํฌ๋ฆฝํŠธ: ์ตœ์‹ 
  • ๋กค์—…: ์ตœ์‹ 
  • rollup-plugin-typescript2: ์ตœ์‹ 

๋กค์—….config.js

import typescript from 'rollup-plugin-typescript2'

export default {
  input: 'index.ts',
  output: [
    {
      file: 'dist/index.js',
      format: 'es',
    },
  ],
  plugins: [
    typescript({
      typescript: require('typescript'),
    })
  ],
}

tsconfig.json

{
  "compilerOptions": {
    "allowSyntheticDefaultImports": true,
    "jsx": "react",

    // Uncomment to break:
    // "target": "esnext",
  }
}

ํŒจํ‚ค์ง€.json

{
    "name": "rollup-optional-chaining-repro",
    "version": "0.0.1",
    "private": true,
    "devDependencies": {
        "rollup": "^1.27.0",
        "rollup-plugin-typescript2": "^0.25.2"
    },
    "dependencies": {
        "typescript": "^3.7.2"
    }
}

์ž์„ธํ•œ ํ‘œ์‹œ๊ฐ€ 3์ธ ํ”Œ๋Ÿฌ๊ทธ์ธ ์ถœ๋ ฅ

ํ”Œ๋Ÿฌ๊ทธ์ธ ๋””๋ฒ„๊ทธ.txt

๋ชจ๋“  7 ๋Œ“๊ธ€

Typescript๋Š” es2015 (๊ธฐ๋ณธ๊ฐ’)๊ฐ€ ์‚ฌ์šฉ๋  ๋•Œ a?.b ๋ฅผ (_a = a) === null || _a === void 0 ? void 0 : _a.b ํ•ฉ๋‹ˆ๋‹ค.

esnext ๊ฐ€ ์‚ฌ์šฉ๋  ๋•Œ a?.b ๋ฅผ a?.b ํ•ฉ๋‹ˆ๋‹ค. ๋‚˜๋Š” ์ด๊ฒƒ์ด esnext์˜ ๊ธฐ๋ณธ JS ๊ธฐ๋Šฅ์ด๋ผ๊ณ  ์ƒ๊ฐํ•ฉ๋‹ˆ๋‹ค.

ํ‘œ์‹œ๋˜๋Š” ์˜ค๋ฅ˜๋Š” ๋กค์—…์ด ์ด๋ฅผ ๊ตฌ๋ฌธ ๋ถ„์„ํ•˜์ง€ ๋ชปํ•˜๋Š” ๊ฒƒ์ž…๋‹ˆ๋‹ค. (์ง€์›ํ•ด์•ผ ํ•˜๋Š”์ง€ ์•„๋‹Œ์ง€ ํ™•์‹คํ•˜์ง€ ์•Š์Œ).

tsc ๋ฅผ ์‹คํ–‰ํ•˜์—ฌ index.js๋ฅผ ๋‚ด๋ณด๋‚ด๋„๋ก ํ•œ ๋‹ค์Œ js ํŒŒ์ผ์„ ๋กค์—… ์ž…๋ ฅ์œผ๋กœ ์‚ฌ์šฉํ•˜์—ฌ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. ๊ฐ™์€ ์˜ค๋ฅ˜๊ฐ€ ๋ฐœ์ƒํ•ด์•ผ ํ•ฉ๋‹ˆ๋‹ค.

๋‚˜๋Š” ๊ทธ๊ฒƒ์ด ์‚ฌ์‹ค์ด๋ผ๊ณ  ์ƒ๊ฐํ•˜์ง€ ์•Š๋Š”๋‹ค. ์ฃผ์„์„ ํ•ด์ œ ํ•œ ํ›„ "target": "esnext" ์‹คํ–‰ yarn tsc index.ts , index.js ํฌํ•จ :

var _a;
var a = {};
console.log((_a = a) === null || _a === void 0 ? void 0 : _a.b);

( yarn rollup -c ์—ฌ์ „ํžˆ ์‹คํŒจ)

ํ , ๋‚˜์—๊ฒŒ๋Š” ์ผ์–ด๋‚˜์ง€ ์•Š์Šต๋‹ˆ๋‹ค.

const a = {};
console.log(a?.b);

๋‹น์‹ ์˜ ํƒ€์ดํ”„์Šคํฌ๋ฆฝํŠธ ๋ฒ„์ „์ด ๋‹น์‹ ์ด ์ƒ๊ฐํ•˜๋Š” ๊ฒƒ๊ณผ ๊ฐ™์€์ง€ ํ™•์ธํ•˜์‹ญ์‹œ์˜ค(์–€์ด ๊ธ€๋กœ๋ฒŒ ๋ฒ„์ „์„ ์‹œ์ž‘ํ• ๊นŒ์š”?):

.\node_modules\.bin\tsc --version
Version 3.7.2

๋Œ€์ƒ "esnext" ๋ฐ ์„ ํƒ์  ์—ฐ๊ฒฐ์— ๋Œ€ํ•ด ๋™์ผํ•œ ๋ฌธ์ œ๊ฐ€ ์žˆ์Šต๋‹ˆ๋‹ค. ์•„์ง ์ˆ˜์ • ์‚ฌํ•ญ์ด ์žˆ์Šต๋‹ˆ๊นŒ? ๋ชจ๋“  ๊ฒƒ์ด tsc ์ปดํŒŒ์ผ๋ฉ๋‹ˆ๋‹ค.

@dagda1 ์ด๊ฒƒ์€ ๋ฒ„๊ทธ๊ฐ€ ์•„๋‹™๋‹ˆ๋‹ค. ์ด๊ฒƒ์€ ๋กค์—…์ด ์†Œ๋น„ํ•  ์ˆ˜ ์—†๋Š” ์˜ฌ๋ฐ”๋ฅธ ์ฝ”๋“œ(esnext ๋Œ€์ƒ์šฉ)๋ฅผ ์ƒ์„ฑํ•˜๋Š” typescript์ž…๋‹ˆ๋‹ค. esnext๊ฐ€ ์žˆ์–ด์•ผ ํ•œ๋‹ค๋ฉด babel ํ”Œ๋Ÿฌ๊ทธ์ธ์„ ์ฒด์ธ์— ์ถ”๊ฐ€ํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค.

@ezolenko ๋Š” ์—ฌ์ „ํžˆ ๋กค์—… ๋ฐ ์„ ํƒ์  ์—ฐ๊ฒฐ์— ์ถ”๊ฐ€ babel ํ”Œ๋Ÿฌ๊ทธ์ธ์ด ํ•„์š”ํ•œ ๊ฒฝ์šฐ์ž…๋‹ˆ๊นŒ?

๋‚ด๊ฐ€ ์•„๋Š” ํ•œ ์ตœ์‹  ๋กค์—… ๋ฒ„์ „์œผ๋กœ ์‹œ๋„ํ•˜๊ณ  ์ž‘๋™ํ•˜๋Š”์ง€ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค(๋ฌธ์ œ๊ฐ€ ํ•ด๊ฒฐ๋˜๋ฉด ๋กค์—… ์ธก์ด๋‚˜ ์ข…์†์„ฑ ์ค‘ ํ•˜๋‚˜์— ์žˆ์Œ).

์ด ํŽ˜์ด์ง€๊ฐ€ ๋„์›€์ด ๋˜์—ˆ๋‚˜์š”?
0 / 5 - 0 ๋“ฑ๊ธ‰