Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhance build time for bezier-react #1424

Merged
merged 32 commits into from Jun 20, 2023
Merged
Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
01626b1
chore(deps): remove unused package
sungik-choi Jun 15, 2023
46c00aa
chore(deps): update react-textarea-autosize
sungik-choi Jun 15, 2023
802522d
chore(deps): update rollup
sungik-choi Jun 15, 2023
66571ff
chore(deps): update '@rollup/*' packages
sungik-choi Jun 15, 2023
11ef7c9
build(bezier-react): change build dir from build to dist
sungik-choi Jun 15, 2023
ec81d20
build(babel): use preset-react useBuildtIns option
sungik-choi Jun 15, 2023
fcf58e5
build(babel): remove cross-env package and change babel config
sungik-choi Jun 15, 2023
d1de2cd
chore(rollup): change from .js to .mjs
sungik-choi Jun 15, 2023
716c7c2
chore(deps): update rollup-plugin-visualizer
sungik-choi Jun 15, 2023
e2d3e35
chore(deps): update '@babel/*' packages
sungik-choi Jun 15, 2023
edfb3dd
chore(tsconfig): change declarationDir from build to dist
sungik-choi Jun 15, 2023
264f23e
chore(gitignore): add rollup cache
sungik-choi Jun 15, 2023
accd45a
build(rollup): change to using the rollup plugin typescript to genera…
sungik-choi Jun 15, 2023
8b00fce
fix(textarea): remove unnecessary bypass code due to rollup commonjs …
sungik-choi Jun 15, 2023
ee0899f
build(rollup): remove unnecessary nodeResolve options and unify rollu…
sungik-choi Jun 15, 2023
73755af
build(rollup): changes to rollup settings and TypeScript type generat…
sungik-choi Jun 15, 2023
0a0ba7b
build(tsc): enhance build command and type declaration build setting
sungik-choi Jun 15, 2023
f23a19f
build: remove unused package and add ttypescript to resolve alias pat…
sungik-choi Jun 15, 2023
b4eed25
chore(scripts): change dir of clean:build
sungik-choi Jun 15, 2023
ef7cb6e
chore(yarn): install
sungik-choi Jun 19, 2023
10c9213
chore(tsconfig): delete json comments
sungik-choi Jun 19, 2023
4a1b498
chore(deps): update babel-* packages
sungik-choi Jun 19, 2023
ed994fa
build(babel): remove unnecessary plugins embedded in preset-env
sungik-choi Jun 19, 2023
7b12521
build(rollup): use skipPreflightCheck's default option and add commen…
sungik-choi Jun 19, 2023
63f4232
build(rollup): change the peerDeps package to the maintained node ext…
sungik-choi Jun 19, 2023
7f0f797
build(package): add bezier-icons to peerDeps and peerDepsMeta
sungik-choi Jun 19, 2023
97922ad
build(tsconfig): change to support es2020
sungik-choi Jun 19, 2023
99968e1
test(jest): add a temp solution of type error of react-textarea-autosize
sungik-choi Jun 19, 2023
d14647f
chore(scripts): revert
sungik-choi Jun 19, 2023
1931a7c
chore(bezier-react): remove ununsed package
sungik-choi Jun 19, 2023
01b53c2
build(bezier-icons): change to using the node resolve plugin to resol…
sungik-choi Jun 19, 2023
5dc1e54
chore(changeset): add changeset
sungik-choi Jun 20, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
5 changes: 4 additions & 1 deletion .gitignore
Expand Up @@ -196,7 +196,7 @@ $RECYCLE.BIN/
*.lnk

# Build files
build/
dist/

# Story book
storybook-static/
Expand All @@ -212,3 +212,6 @@ stats.html

# Stylelint cache
.stylelintcache

# Rollup cache
.rollup.cache
10 changes: 5 additions & 5 deletions packages/bezier-icons/package.json
Expand Up @@ -43,9 +43,9 @@
"author": "Channel Corp.",
"license": "Apache-2.0",
"devDependencies": {
"@babel/preset-env": "^7.21.5",
"@babel/preset-react": "^7.18.6",
"@babel/preset-typescript": "^7.21.5",
"@babel/preset-env": "^7.22.5",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@rollup/plugin-alias": "^5.0.0",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-terser": "^0.4.3",
Expand All @@ -56,8 +56,8 @@
"@svgr/plugin-jsx": "^8.0.1",
"eslint-config-bezier": "workspace:^",
"jest": "^29.5.0",
"rollup": "^3.22.0",
"rollup-plugin-visualizer": "^5.9.0",
"rollup": "^3.25.1",
"rollup-plugin-visualizer": "^5.9.2",
"svgo": "^3.0.2",
"tsconfig": "workspace:^"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/bezier-react/.eslintignore
@@ -1,4 +1,4 @@
node_modules
build
dist
coverage
__mocks__
39 changes: 20 additions & 19 deletions packages/bezier-react/babel.config.js
@@ -1,21 +1,22 @@
module.exports = {
env: {
build: {
presets: [
['@babel/preset-env'],
'@babel/preset-react',
['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
],
plugins: [
'@babel/plugin-transform-runtime',
['@babel/plugin-proposal-private-property-in-object', { loose: false }],
['@babel/plugin-proposal-class-properties', { loose: false }],
['babel-plugin-styled-components', {
minify: true,
pure: true,
topLevelImportPaths: ['~/src/foundation'],
}],
],
},
},
presets: [
'@babel/preset-env',
/**
* Will use the native built-in instead of trying to polyfill behavior for any plugins that require one.
* Remove the helper function for Object.assign.
* @see https://babeljs.io/docs/babel-preset-react#usebuiltins
*/
['@babel/preset-react', { useBuiltIns: true }],
['@babel/preset-typescript', { isTSX: true, allExtensions: true }],
],
plugins: [
'@babel/plugin-transform-runtime',
['@babel/plugin-proposal-private-property-in-object', { loose: false }],
['@babel/plugin-proposal-class-properties', { loose: false }],
['babel-plugin-styled-components', {
minify: true,
pure: true,
topLevelImportPaths: ['~/src/foundation'],
}],
],
}
62 changes: 35 additions & 27 deletions packages/bezier-react/package.json
Expand Up @@ -7,28 +7,38 @@
"url": "https://github.com/channel-io/bezier-react",
"directory": "packages/bezier-react"
},
"main": "build/index.cjs.js",
"module": "build/src/index.js",
"types": "build/src/index.d.ts",
"main": "dist/cjs/index.js",
"module": "dist/esm/index.mjs",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

type="module" 이 아니라면, 즉, CJS 패키지라면 ESM 모듈엔 mjs 로 분명하게 확장자를 명시해주어야합니다. bezier-icons 패키지에도 마찬가지로 적용되어 있습니다.

"types": "dist/types/index.d.ts",
"exports": {
".": {
"types": "./dist/types/index.d.ts",
"require": "./dist/cjs/index.js",
"import": "./dist/esm/index.mjs"
}
},
"sideEffects": false,
"files": [
"build",
"dist",
"!dist/*.tsbuildinfo",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

dist 내부에 포함되어있는 ts build log는 파일에 포함하지 않습니다.

"src"
],
"scripts": {
"build": "cross-env BABEL_ENV=production rollup -c",
"build": "run-p 'build:*'",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

rollup을 통한 자바스크립트 번들링, ttsc(ttypescript)를 통한 타입 생성을 병렬로 수행합니다.

"build:js": "rollup -c",
"build:types": "ttsc --build --verbose ./tsconfig.build.json",
"dev": "yarn storybook",
"lint": "run-p 'lint:*'",
"lint:js": "TIMING=1 eslint --cache .",
"lint:style": "stylelint --cache '**/*.styled.{js,ts}'",
"typecheck": "yarn find-deadcode && tsc --build --verbose",
"find-deadcode": "ts-prune -e -p ./tsconfig.prune.json",
"test": "jest --onlyChanged",
"test": "jest",
"test:ci": "jest --ci --coverage",
"test:watch": "jest --watch",
"update-snapshot": "jest --updateSnapshot",
"clean": "run-s 'clean:*'",
"clean:build": "rm -rf build",
"clean:build": "rm -rf dist",
"clean:cache": "rm -rf node_modules .turbo .eslintcache .stylelintcache tsconfig.tsbuildinfo coverage",
"prebuild": "yarn clean:build",
"storybook": "start-storybook -p 4101",
Expand All @@ -49,18 +59,20 @@
"not ie <= 11"
],
"devDependencies": {
"@babel/core": "^7.20.2",
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-transform-runtime": "^7.12.15",
"@babel/preset-env": "^7.14.2",
"@babel/preset-react": "^7.12.10",
"@babel/preset-typescript": "^7.12.7",
"@babel/core": "^7.22.5",
"@babel/plugin-proposal-class-properties": "^7.18.6",
"@babel/plugin-transform-runtime": "^7.22.5",
"@babel/preset-env": "^7.22.5",
"@babel/preset-react": "^7.22.5",
"@babel/preset-typescript": "^7.22.5",
"@channel.io/react-docgen-typescript-plugin": "^1.0.0",
"@mdx-js/react": "^1.6.22",
"@rollup/plugin-babel": "^5.3.0",
"@rollup/plugin-commonjs": "^19.0.0",
"@rollup/plugin-node-resolve": "^13.0.0",
"@rollup/plugin-url": "^6.0.0",
"@rollup/plugin-alias": "^5.0.0",
"@rollup/plugin-babel": "^6.0.3",
"@rollup/plugin-commonjs": "^25.0.1",
"@rollup/plugin-node-resolve": "^15.1.0",
"@rollup/plugin-typescript": "^11.1.1",
"@rollup/plugin-url": "^8.0.1",
"@storybook/addon-a11y": "^6.5.0",
"@storybook/addon-actions": "^6.5.13",
"@storybook/addon-backgrounds": "^6.5.13",
Expand All @@ -87,7 +99,6 @@
"babel-preset-react-app": "^10.0.0",
"chromatic": "^6.11.4",
"core-js": "^3.8.1",
"cross-env": "^7.0.3",
"eslint-config-bezier": "workspace:*",
"eslint-plugin-storybook": "^0.6.0",
"identity-obj-proxy": "^3.0.0",
Expand All @@ -97,25 +108,23 @@
"react": "^18.1.0",
"react-dom": "^18.1.0",
"regenerator-runtime": "^0.13.11",
"rollup": "^2.50.5",
"rollup": "^3.25.1",
"rollup-plugin-peer-deps-external": "^2.2.4",
"rollup-plugin-typescript2": "^0.31.1",
"rollup-plugin-visualizer": "^5.8.3",
"rollup-plugin-visualizer": "^5.9.2",
"styled-components": "^5.3.5",
"ts-prune": "^0.10.3",
"tsconfig": "workspace:*",
"tsconfig-paths-webpack-plugin": "^3.5.2",
"tslib": "^2.3.1",
"ttypescript": "^1.5.13",
"typescript-transform-paths": "^3.3.1"
"ttypescript": "^1.5.15",
"typescript-transform-paths": "^3.4.6"
},
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0",
"react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0",
"styled-components": ">=5"
},
"dependencies": {
"@babel/runtime": "^7.12.13",
"@babel/runtime": "^7.22.5",
"@channel.io/bezier-icons": "^0.2.0",
"@radix-ui/react-checkbox": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.2",
Expand All @@ -129,9 +138,8 @@
"@radix-ui/react-visually-hidden": "^1.0.2",
"classnames": "^2.3.2",
"react-resize-detector": "^7.1.1",
"react-textarea-autosize": "^8.3.4",
"react-textarea-autosize": "^8.4.1",
"ssr-window": "^3.0.0",
"typesafe-actions": "^5.1.0",
"uuid": "^9.0.0"
}
}
105 changes: 0 additions & 105 deletions packages/bezier-react/rollup.config.js

This file was deleted.

72 changes: 72 additions & 0 deletions packages/bezier-react/rollup.config.mjs
@@ -0,0 +1,72 @@
import { readFileSync } from 'fs'
import * as path from 'path'
import { fileURLToPath } from 'url'

import { DEFAULT_EXTENSIONS } from '@babel/core'
import alias from '@rollup/plugin-alias'
import babel from '@rollup/plugin-babel'
import commonjs from '@rollup/plugin-commonjs'
import { nodeResolve } from '@rollup/plugin-node-resolve'
import url from '@rollup/plugin-url'
import { defineConfig } from 'rollup'
import peerDepsExternal from 'rollup-plugin-peer-deps-external'
import { visualizer } from 'rollup-plugin-visualizer'

const pkg = JSON.parse(
readFileSync(fileURLToPath(new URL('./package.json', import.meta.url))),
)

const rootDir = fileURLToPath(new URL('.', import.meta.url))

const extensions = [...DEFAULT_EXTENSIONS, '.ts', '.tsx']

const generateConfig = ({
output = [],
plugins = [],
}) => defineConfig({
input: 'src/index.ts',
output,
external: [/@babel\/runtime/],
plugins: [
alias({
entries: [{
find: '~',
replacement: rootDir,
}],
}),
Comment on lines +31 to +36
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

  • AS-IS: rollup typescript plugin + ttypescript & typescript-transform-paths 를 사용하여 자바스크립트 + 타입 선언의 절대 경로를 resolve
  • TO-BE: rollup alias plugin 을 통해 자바스크립트의 절대 경로를 resolve 하고, ttypescript & typescript-transform-paths 를 사용하여 타입 선언의 절대 경로를 resolve

peerDepsExternal(),
nodeResolve({ extensions }),
commonjs(),
babel({
babelHelpers: 'runtime',
skipPreflightCheck: true,
exclude: 'node_modules/**',
extensions,
}),
url(),
visualizer({ filename: 'stats.html' }),
...plugins,
],
})

export default defineConfig([
generateConfig({
output: [{
format: 'cjs',
dir: path.dirname(pkg.main),
sourcemap: true,
preserveModules: true,
preserveModulesRoot: 'src',
entryFileNames: '[name].js',
exports: 'named',
},
{
format: 'esm',
dir: path.dirname(pkg.module),
sourcemap: true,
preserveModules: true,
preserveModulesRoot: 'src',
entryFileNames: '[name].mjs',
}],
}),
])