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
Changes from 20 commits
01626b1
46c00aa
802522d
66571ff
11ef7c9
ec81d20
fcf58e5
d1de2cd
716c7c2
e2d3e35
edfb3dd
264f23e
accd45a
8b00fce
ee0899f
73755af
0a0ba7b
f23a19f
b4eed25
ef7cb6e
10c9213
4a1b498
ed994fa
7b12521
63f4232
7f0f797
97922ad
99968e1
d14647f
1931a7c
01b53c2
5dc1e54
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,4 +1,4 @@ | ||
node_modules | ||
build | ||
dist | ||
coverage | ||
__mocks__ |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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'], | ||
}], | ||
], | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -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", | ||
"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", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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:*'", | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe 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", | ||
|
@@ -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", | ||
|
@@ -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", | ||
|
@@ -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", | ||
|
@@ -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" | ||
} | ||
} |
This file was deleted.
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more.
|
||
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', | ||
}], | ||
}), | ||
]) |
There was a problem hiding this comment.
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 패키지에도 마찬가지로 적용되어 있습니다.