:
`lint`, `build`, `run`
2020-11-17
( )

• :
1. ?
2. ?
• !
• React, Redux, styled-components
• (👀)

• `lint`
• `build`
• `run`

`lint`
• eslint
• prettier
• lint-staged + husky

“ !”

`lint`: eslint

`lint`: eslint –
• rule
•
• plugins
• ,
• extends
• (`.eslintrc`)
• overrides
•
• 👀

“
!”

`lint`: tslint

“eslint tslint
!”

`lint`: eslint – typescript-eslint

“
!”

`lint`: prettier
• “ !”
•
•

`lint`: prettier –
• “Prettier has a few options because of
history. But we don’t want more of them.
(…) By far the biggest reason for adopting
Prettier is to stop all the on-going debates
over styles.”
•
•

“eslint prettier
!”

`lint`: eslint + prettier

“ ,
!”
“CI
!”

`lint`: lint-staged + husky
• husky
• “Git hooks made easy”
• lint-staged
• “Run linters against staged git
files and don't let 💩 slip into
your code base!”

`build`
• babel
• webpack
• Sentry

“
ECMAScript
!”

`build`: babel
• ES6 ➡ ES5 (6to5)
• babel
•
ES5

`build`: babel –
•
• plugin:
• preset:
•
• polyfill:
/
• 👀 : Babel

“ / ,
!”

`build`: babel – preset-env
• “@babel/preset-env is a smart preset that
allows you to use the latest JavaScript
without needing to micromanage
which syntax transforms (and
optionally, browser polyfills) are
needed by your target environment(s).
• (browserslist)

“
!”
“ ,
!”

`build`: webpack

`build`: webpack –
• ( ) =
•
• babel-loader:
JS
JS
• ts-loader:
TS
JS

`build`: webpack –
•
• ts-loader + babel-loader:
TS
JS
JS
• JS / JSON

`build`: webpack –
• test:
• use:
• :
• .css
sass-loader, css-loader, style-
loader

`build`: webpack –
•
•
• fork-ts-checker-plugin:
• terser-webpack-plugin: Minification
• sentry-webpack-plugin: Sentry CLI
• antd-dayjs-webpack-plugin: antd moment.js day.js

`build`: webpack –
• entry / output
• ,
• resolve
• require import
• mode
• ( , )
• 👀 ( )

“
!”

`build`: Sentry
•
• flex 3
•
• express (requestHandler / errorHandler)
•
• axios error interceptor ( )
• React ErrorBoundary ( )

“
!”

`build`: Sentry (Release)
• Sentry Release API
• Sentry
• SDK
• with-sourcemap, sentry-webpack-plugin
• Release API
• CI/CD ( AWS CodeBuild)
•

`run`
• Next.js
• swr
• openapi-generator

“ React
!”
, , , …

`run`: Next.js
• “The React Framework for Production”
• SSR, , ,
• out-of-box
• : Next.js 10 next/image

`run`: Next.js – SSR
• SSR ,
• ,
• ,
DOM React (hydration)
•
• ,
• /

`run`: Next.js –
• env
•
• assetPrefix
• CDN
• webpack
• Next.js
• 👀

“
!”
, UX, …

`run`: swr
• = +
•
• stale-while-revalidate
•
UX
• (Redux )

`run`: swr
• key:
•
• fetcher:
• data: fetcher ( await )
• error:
• 👀 Redux SWR 1 2

“API Swagger
, !”

`run`: openapi-generator
• OpenAPI
• ,
URL, /
• 👀 OpenAPI Specification -
API : VS

What’s next?
• Rome Toolchain
• Webpack 5 (module federation)
• GraphQL, Relay

…
What’s next?
• Rome Toolchain
• Webpack 5 (module federation)
• GraphQL, Relay