akjfal

Options allowImportExportEverywhere : import와 export 선언을 최상단 이외에도 할 수 있도록 한다. allowAwaitOutsideFunction : topLevelAwait 플러그인 때문에 권장되지 않지만, 최상위 스크립트 이외에서도 사용가능 하도록 한다. allowReturnOutsideFunction : 최상위 return은 오류를 발생시키는데 이를 허용한다. allowSuperOutsideMethod : 클래스 외부에서는 사용 못하는데 이를 허용한다. allowUndeclaredExports : 기본적으로 현재 모듈 범위에서 선언되지 않은 식별자는 에러가 발생한다. 하지만 파이프 라인으로 추가되는 것은 알 수 없기 때문에 이를 true 해줘야 하는 경우도 있..

바벨에 추가된 코드를 재사용해서 코드 크기를 줄일 수 있는 플러그인이다. Installation 개발용을 설치해주자. npm install --save-dev @babel/plugin-transform-runtime pr용이 필요하다면 이것도 설치해주자. npm install --save @babel/runtime Why? Babel에서 사용되는 중복코드들이 @babel/plugin-transform-runtime 플러그인이 @babel/runtime 모듈을 참조해서 중복되지 않도록 처리해준다. Usage With a configuration file(추천) - 옵션은 기본 값이다. { "plugins": [ [ "@babel/plugin-transform-runtime", { "absoluteRunti..

더보기 Babel 7.4.0부터 core-js/stable, regenerator-runtime/runtime을 사용하기 위해서는 사용되지 않습니다. 위 말에서 알 수 있듯이 이전 버전에선 core-js/stable, regenerator-runtime/runtime 이것들을 포함하고 있다. - Promise, Object.assign 등을 빌드하기 위해서 polyfill을 사용합니다. Size preset/env와 useBuiltIns를 같이 사용해야 하기때문에, 사이즈가 크다. 따라서 개별 옵션을 사용하는 것을 추천한다. TC39 Proposals Stag4가 아닌 다른 것들을 사용할 때, @babel/polyfill은 자동적으로 추가되지 않는다. 그러므로 core-js같은 다른 polyfill들을 ..

CLI를 통해서 바벨을 컴파일 할 때 사용한다. 설치 전역으로 설치하기 보다 로컬로 설치해줘야 한다. 1. 하나의 컴퓨터 안에서 각 프로젝트마다 바벨의 버전이 다를 수 있다. 2. 암시적 종속성이 없다면, 프로젝트 설정이 더 쉬워진다. 즉 각 프로젝트 설정의 난이도를 낮출 수 있다. npm install --save-dev @babel/core @babel/cli 더보기 Note: 설치하기 전에 package.json을 생성하세요. 이래야 npx로 제대로 작동합니다. 설치가 끝난 후 cli와 core를 반드시 추가해줘야 한다. 사용 더보기 Note: npx babel을 하기전에 cli와 core를 먼저 설치하지 않으면 오래된 버전의 babel을 설치 할 수 있다. npx를 사용하지 않는 다면 상대 경로 ..

https://babeljs.io/docs/en/roadmap Babel · The compiler for next generation JavaScript The compiler for next generation JavaScript babeljs.io Babel 8 몇가지 이슈가 남아있음 - Node.js 10 제거하기 중단 - 순수 ESM으로 전환을 진행중이다. - Ts AST를 ts-eslint를 이용해서 하려고 시도중이다. - 다중 메인 프렌치 사용과 pre-release를 아직 하지 못한다. - babel7에 대한 유지보수 정책을 정하지 못했다. 새로운 TC39에 대한 제안 각 Stage들에서 부족한 사항들 보안 @babel/preset-envfmf @babel/core로 이동 바벨을 사용하기 ..

[ "@babel/preset-typescript", // babel/cli와 babel/node 할 땐, --extensions ".ts"가 필요하다 // ex)babel --extensions .ts,.tsx ./src -d ./dist { "isTSX": false, // jsx 파싱을 강제로 한다. 안그러면 제네릭이 이상하게 들어간다. allExtensions: true 도 같이 실행해줘야한다. "jsxPragma": "React", // JSX expressions 를 변환해준다. 이러면 type import가 아니므로 제거하지 않게된다. "jsxPragmaFrag": "React.Fragment", // JSX fragments ~(Pragma 와 동일) "allExtesions": false..

{ "presets": [ [ "@babel/preset-react", { // Both Runtimes "runtime": "classic", // runtime에 사용 할 것을 결정합니다. // automatic : jsx가 변환된 함수를 자동적으로 import합니다 // classic : 아무런 자동 import를 진행하지 않습니다. "development": false, // development시 __source나 __self 추가 등에 유용하며, env option ,js config files등에 결합해서 사용 할 수 있다. "throwIfNamespace": true, // XML 태그 이름에서 오류 발생 여부를 결정합니다. // React Automatic Runtime // "impor..

{ "presets": [ [ "@babel/preset-env", { "targets": { /** * default : oldest browsers - 명식적으로 작성 필요 * 명시적으로 작성하는 것을 추천한다. */ "esmodules": true, // es모듈을 지원하는 브라우저를 대상으로 하며, browsers와 교집합이 설정된다. "node": true, // node의 특정 버전을 지정할 수 있다. 높은 버전 지정시 에러를 뱉을 확률이 높으니 낮을 버전을 지정하자. // "safari": string | "tp" // 사파리의 technology preview 버전을 원한다면 "tp"를 해준다. "browsers": ["~last 2 versions", ">= 5% in KR"] // 브라..