Fork me on GitHub

2019-08-20: Parcel 2.0.0 α, npm의 로드맵, 새로운 React DevTools

Translator: U-Yeong Ju Edit on GitHub See Revisions

JSer.info #449 - Bundler인 Parcel 2.0.0 α 버전이 공개됐습니다.

Parcel 2에서는 플러그인 및 설정을 이용한 확장을 유연하게 할 수 있도록 개선됐습니다.
다음과 같은 처리를 플러그인으로 할 수 있습니다.

  • Resolvers
  • Transformers
  • Bundlers
  • Namers
  • Runtimes
  • Packagers
  • Optimizers
  • Validators
  • Reporters

기본적인 설정은 @parcel/config-default라는 패키지에서 관리되며
설정을 변경하고 싶을 경우 .parcelrc 파일에 플러그인에 대한 설정을 작성합니다.

{
  "extends": ["@parcel/config-default"],
  "transforms": {
    "*.dart": ["parcel-transform-dart"],
  }
}

또, multiple targets과 bundle splitting 등도 지원합니다.


React DevTools v4가 릴리스 돼 관련해 새로워진 기능 소개 문서가 함께 공개됐습니다.

성능 개선, 컴포넌트 스택, 필터, 컴포넌트의 프로파일, 렌더링 관계 시각화, Hooks 지원 개선 등이 이뤄졌습니다.
FirefoxChrome에서 각 확장 프로그램으로 이용할 수 있습니다.

또, React DevTools는 독립된 라이브러리(확장 프로그램이 아닌)로 사용할 수도 있습니다.
아래 독립 버전을 기반으로 개발된 React DevTools 튜토리얼 문서가 있으니 참고하시길 바랍니다.


npm 로드맵이 The npm Blog — npm CLI Roadmap - Summer 2019를 통해 공개됐습니다.

v6에서는 자잘한 버그를 중점으로 수정하며 v7에서는 설치 로직을 크게 변경할 예정이라고 합니다.
v7에서는 yarn과 같은 workspaces 지원, peerDependencies를 설치하도록 변경, yarn의 resolutions과 비슷한 시스템 지원, yarn.lock 호환 등이 이뤄질 전망입니다.

yarn.lock 호환과 관련한 아키텍처 변경에 대해서는 다음 이슈에 정리돼 있습니다.

또, v8에서는 tink와의 병합을 검토할 것이라고 합니다.


헤드라인


V8 release v7.7 · V8

v8.dev/blog/v8-release-77

V8 ReleaseNote

V8 v7.7이 릴리스됐습니다.
메모리 사용량 최적화, WebAssembly의 백그라운드 컴파일의 병렬화 개선, Error#stack 작성 관련 성능 개선 등이 이뤄졌습니다.
또, Intl.NumberFormat API를 지원합니다.


Release v2.0.0 · typescript-eslint/typescript-eslint

github.com/typescript-eslint/typescript-eslint/releases/tag/v2.0.0

TypeScript ESLint ReleaseNote

typescript-eslint v2.0.0이 릴리스됐습니다.
Node.js 6의 지원 죵료, 비권장 됐던 prefer-interfaceno-triple-slash-reference 삭제, recommended 설정이 변경됐습니다.


🚀 Parcel 2.0.0-alpha.1 is here! 📦 - devongovett - Medium

medium.com/@devongovett/parcel-2-0-0-alpha-1-is-here-8b160c6e3f7e

bundler ReleaseNote

Parcel 2.0.0-alpha.1이 릴리스됐습니다.
.parcelrc에서 플러그인에 대한 옵션을 설정할 수 있도록 개선됐으며 multiple targets와 bundle splitting를 지원합니다.
또, 브라우저의 실행 등을 고려해 파일 시스템 추상 레이어를 추가 했습니다.


August 2019 Security Releases | Node.js

nodejs.org/en/blog/vulnerability/aug-2019-security-releases/

node.js ReleaseNote

HTTP/2 구현과 관련된 DoS 공격 취약점 수정 버전이 각 Node.js 버전에 릴리스 됐습니다.


Announcing TypeScript 3.6 RC | TypeScript

devblogs.microsoft.com/typescript/announcing-typescript-3-6-rc/

TypeScript ReleaseNote

TypeScript 3.6 RC가 릴리스 됐습니다.
Generators의 타입과 관련한 기능이 개선됐고 Array Spread의 동작이 사양에 맞춰 개선됐습니다. 그리고 Promise 관련한 타입 에러가 개선됐습니다.
또, --target es2015 이상에서 Unicode 변수명 지원하며 Ambient Classes와 Function이 병합 가능하도록 변경됐습니다.


Release 2.3.0 · avajs/ava

github.com/avajs/ava/releases/tag/v2.3.0

JavaScript testing node.js ReleaseNote

AVA 2.3.0이 릴리스됐습니다.
ECMAScript Proposal의 Stage 3와 4 구문을 포함한 코드를 인식할 수 있도록 개선됐으며 TypeScript 타입 정의 관련 Generics 타입 매개변수의 초기값이 {}에서 unknown로 변경됐습니다.


ESLint v6.2.0 released - ESLint - Pluggable JavaScript linter

eslint.org/blog/2019/08/eslint-v6.2.0-released

ESLint ReleaseNote

ESLint v6.2.0이 릴리스됐습니다.
ECMAScript 2020에 도입될 예정인 Dynamic Import와 BigInt를 지원하며 function-call-argument-newline 규칙이 추가 됐습니다.


아티클


The npm Blog — npm CLI Roadmap - Summer 2019

blog.npmjs.org/post/186983646370/npm-cli-roadmap-summer-2019

npm article

npm cli의 로드맵에 대한 글입니다.
v6에서는 자잘한 버그를 중점으로 수정하며 v7에서는 설치 로직을 크게 변경할 예정이라고 합니다.
v7에서는 yarn과 같은 workspaces를 지원하며 peerDependencies를 설치하도록 변경합니다. 그리고 resolutions 지원, yarn.lock 호환이 예정돼 있습니다.
v8에서는 tink와의 병합이 진행될 것으로 보입니다.


Nullish Coalescing과 Optional Chaining | blog.jxck.io(일본어)

blog.jxck.io/entries/2019-08-14/nullish-coalescing-optional-chaining.html

ECMAScript JavaScript article

ECMAScript Proposal Stage 3의 Nullish Coalescing과 Optional Chaining를 소개합니다.


Largest Contentful Paint  |  web.dev

web.dev/largest-contentful-paint/

Chrome performance article

Chrome77에서 사용할 수 있는 Largest Contentful Paint (LCP) API를 소개하는 글입니다. Viewport 내에서 큰 컨텐츠가 표시되기 까지의 시간을 나타내는 지표와 함께 PerformanceObserver나 Element Timing API를 사용해 값을 취득하는 방법에 대해 이야기합니다.


Introducing the New React DevTools – React Blog

reactjs.org/blog/2019/08/15/new-react-devtools.html

React article debug

React의 새로운 개발자 도구를 튜토리얼과 함께 소개합니다.
React DevTools 4.0.0에서는 성능 개선, 컴포넌트 스택, 필터, 렌더링 관계 시각화, Hooks 지원 개선 등이 이뤄졌습니다.
또, Suspense 지원이나 "Why did this render?" 기능이 추가 됐습니다.


Introduction to Svelte

daveceddia.com/svelte-intro/

JavaScript UI library article

UI 프레임워크인 Svelte를 소개합니다.
Svelte의 특징이 정리돼 있습니다.
컴파일, 리액티브한 변경, 이벤트 헨들러 작성법, 미사용 CSS에 관한 경고 출력 기능 등에 대해서 정리 돼 있습니다.


사이트, 서비스, 문서


Divjoy - The React Codebase Generator

divjoy.com/

CSS JavaScript Tools webservice

CSS 프레임워크, JavaScript 프레임워크, 인증 기반, Mail, 폼, 접근 해석 등의 조합을 선택해 웹 사이트 개발 템플릿을 생성할 수 있는 제너레이터 도구입니다.


goldbergyoni/javascript-testing-best-practices: 📗🌐 🚢 Comprehensive and exhaustive JavaScript & Node.js testing best practices (August 2019)

github.com/goldbergyoni/javascript-testing-best-practices

JavaScript testing document

JavaScript 테스트에 관한 문서입니다.
테스트의 구조, 백엔드, 프런트엔드, CI 등에 대해서 작성돼 있습니다.


ai/size-limit: Calculate the real cost to run your JS app or lib to keep good performance. Show error in pull request if the cost exceeds the limit.

github.com/ai/size-limit/

JavaScript Tools library

파일 크기의 한계를 지정해 그 크기를 넘었는지 테스트할 수 있는 도구입니다.
애플리케이션, 큰 라이브러리, 작은 라이브러리 전용의 프리셋을 제공합니다.
파일 크기와 불러오는데 걸리는 시간을 테스트 할 수 있습니다.


소프트웨어, 도구, 라이브러리


ehmicky/nve: Run any Node.js version

github.com/ehmicky/nve

node.js Tools

Node.js의 버전을 지정해 스크립트를 실행할 수 있는 명령줄 도구입니다.


도서


Announcing meSpeak.js 2.0

www.masswerk.at/nowgobang/2019/mespeak_2_0

audio JavaScript library C++

Text to Speech 라이브러리 meSpeak.js 2.0이 릴리스됐습니다.
Emscripten를 사용해 C++에서 JavaScript로 컴파일한 speak.js를 기반으로 모듈러 설계가 돼 있습니다.
WebWorker를 대응하며 음성 / 언어 정의 불러오기 기능을 지원합니다.


Pull Request to this article
JSer.info Slackに参加する