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๊ฐ ์ ๊ตฌ๋ฌธ ๋ถ์ํจ).
๊ด๋ จ์ด ์์ด์ผ ํจ
import typescript from 'rollup-plugin-typescript2'
export default {
input: 'index.ts',
output: [
{
file: 'dist/index.js',
format: 'es',
},
],
plugins: [
typescript({
typescript: require('typescript'),
})
],
}
{
"compilerOptions": {
"allowSyntheticDefaultImports": true,
"jsx": "react",
// Uncomment to break:
// "target": "esnext",
}
}
{
"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"
}
}
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 ํ๋ฌ๊ทธ์ธ์ด ํ์ํ ๊ฒฝ์ฐ์ ๋๊น?
๋ด๊ฐ ์๋ ํ ์ต์ ๋กค์ ๋ฒ์ ์ผ๋ก ์๋ํ๊ณ ์๋ํ๋์ง ํ์ธํ ์ ์์ต๋๋ค(๋ฌธ์ ๊ฐ ํด๊ฒฐ๋๋ฉด ๋กค์ ์ธก์ด๋ ์ข ์์ฑ ์ค ํ๋์ ์์).