Skip to content

pite에서 사용중인 caniuse-lite버전을 빌드시 로그에 보여주도록 수정 #50

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.

Sign up for GitHub

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

Draft
keemhyunseok wants to merge 7 commits into
base: main
Choose a base branch
from
Draft

pite에서 사용중인 caniuse-lite버전을 빌드시 로그에 보여주도록 수정 #50

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
fb74e52
[#26] browserslist에서 caniuse-lite 버전을 가져오는 유틸 추가
keemhyunseok Feb 26, 2025
d9909bc
[#26] 브라우저 리스트 최신화
keemhyunseok Feb 26, 2025
dc6ff8d
[#26] chalk 적용
keemhyunseok Feb 27, 2025
a0eec6c
[#26] 파일명 printCaniuseLiteVersion 변경, browserslistConfig 변경
keemhyunseok Feb 27, 2025
9658fa9
[#26] import 방식 수정
keemhyunseok Feb 27, 2025
8a61b4a
[#26] @babel/plugin-syntax-import-attributes 설치
keemhyunseok Feb 27, 2025
63bfb2a
Create mighty-buckets-throw.md
keemhyunseok Feb 27, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/mighty-buckets-throw.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@naverpay/pite": patch
---

pite에서 사용중인 caniuse-lite버전을 빌드시 로그에 보여주도록 수정

PR: [pite에서 사용중인 caniuse-lite버전을 빌드시 로그에 보여주도록 수정](https://github.com/NaverPayDev/pite/pull/50)
3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,12 +52,13 @@
"**/*.{ts,tsx,js,jsx}": "eslint"
},
"dependencies": {
"@babel/plugin-syntax-import-attributes": "^7.26.0",
"@babel/plugin-transform-runtime": "^7.25.9",
"@naverpay/browserslist-config": "^2.0.0",
"@naverpay/publint": "^0.0.5",
"@rollup/plugin-babel": "^6.0.4",
"babel-plugin-polyfill-corejs3": "^0.11.0",
"browserslist": "^4.24.2",
"browserslist": "4.24.4",
Copy link
Contributor

@yujeong-jeon yujeong-jeon Feb 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

혹시 요거 궁금한게 있는데 사용처의 pkg 내부의 browserslist가 아니라 pite의 browserslist/caniuse-lite 의 버전을 바라보는걸까요~?

궁금했던 게 만약 outdated되면 pite를 주기적으로 업데이트해줘야 하는 구조인가 싶어서 여쭙습니다..!

Copy link
Contributor Author

@keemhyunseok keemhyunseok Feb 27, 2025

Choose a reason for hiding this comment

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

원래 의도했던건 pite 빌드시 참고하는 caniuse-lite버전을 알려주고, 사용처에서는 사용처가 참고하는 버전을 알아서 획득(?)해 버전을 맞추는 것을 생각했습니다. 제작자(우리)의 타겟과 사용처의 타겟이 다를 수 있으니 우리가 작업하며 의도했던 타겟에 대한 힌트를 제공하는 정도의 기능을 생각했습니다.

궁금했던 게 만약 outdated되면 pite를 주기적으로 업데이트해줘야 하는 구조인가 싶어서 여쭙습니다..!

그래서 꼭 주기적으로 업데이트할 필요는 없고 지금 설치한 pite가 어떤 버전을 타겟으로 작업되었나 참고하고 필요하다면 업데이트 하는 그림을 생각했습니다. 어차피 사용처의 caniuse-lite버전 따라서 빌드될테니 크게 중요한 정보가 아니기도 하구요..!

그런데 말씀주신거 생각해보니 뭔가 로그가 사용처의 caniuse-lite버전을 알려주는 것으로 보일 것 같아서,, 사용처의 정보도 함께 로그에 보여주는 식으로 방향을 조금 바꿔야하나 고민이 되는군요..

Copy link
Contributor

@yujeong-jeon yujeong-jeon Feb 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

아하 그러면 pite로 코드를 빌드하는 시점에는 pite > browserslist > caniuse-lite 버전을 쓰는 게 아니라 사용처에 browerslist가 따로 설치되어 있다면 그 버전을 쓰는거죠~?? (즉, 사용처의 caniuse-lite 버전에 따라 browserslistToEsbuild(browserslist)로 타겟 결정됨)
뭔가 browserslist가 peerDeps가 아니라 deps라서 제가 햇갈렸던거 같습니다 😅

"browserslist-to-esbuild": "^2.1.1",
"chalk": "^5.4.1",
"cosmiconfig": "^9.0.0",
Expand Down
105 changes: 100 additions & 5 deletions pnpm-lock.yaml
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 src/browserslist.ts → src/browserslistConfig.ts
View file
Open in desktop
File renamed without changes.
14 changes: 14 additions & 0 deletions src/caniuse.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
/* eslint-disable no-console */
import packageJsonContent from 'browserslist/package.json' with {type: 'json'}
Copy link
Contributor

@yceffort-naver yceffort-naver Feb 27, 2025

Choose a reason for hiding this comment

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

요거 버전 지원만 한번 확인 부탁드립니다

Copy link
Contributor Author

@keemhyunseok keemhyunseok Feb 27, 2025

Choose a reason for hiding this comment

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

image

파폭에서는 불가능하고,, node는 20.10.0 부터 사용가능합니다

Copy link
Contributor Author

@keemhyunseok keemhyunseok Feb 27, 2025 •
edited
Loading

Choose a reason for hiding this comment

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

TypeError [ERR_IMPORT_ATTRIBUTE_MISSING]: Module "file:///Users/USER/Workspace/npay/pie/node_modules/.pnpm/browserslist@4.24.4/node_modules/browserslist/package.json" needs an import attribute of "type: json"

으음.. 지금 방식으로는 이 에러가 발생하네요

정식으로(?) import하는게 아니라 강제로 파일을 읽어와 파싱하는 형태로 해야할 것 같습니다

import chalk from 'chalk'

export async function printCaniuseLiteVersion() {
try {
const caniuseVersion = packageJsonContent.dependencies['caniuse-lite'].replace('^', '')
const caniuseUrl = `https://unpkg.com/browse/caniuse-lite@${caniuseVersion}/`

console.log(chalk.magenta(`\ncurrent caniuse-lite version : ${caniuseVersion}\n${caniuseUrl}\n`))
} catch (error) {
console.error('cannot found browserslist version', error)
}
}
11 changes: 10 additions & 1 deletion src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import browserslistToEsbuild from 'browserslist-to-esbuild'
import preserveDirectives from 'rollup-plugin-preserve-directives'
import {BuildOptions, defineConfig, Plugin} from 'vite'

import {getBrowserslistConfig} from './browserslist'
import {getBrowserslistConfig} from './browserslistConfig'
import {printCaniuseLiteVersion} from './caniuse'
import {getExternalDependencies} from './dependencies'
import {getViteEntry} from './getViteEntry'
import publint from './plugins/rollup-plugin-publint'
Expand Down Expand Up @@ -59,6 +60,8 @@ export function createViteConfig({

const browserslist = isValidBrowserslistConfig(browserslistConfig) ? browserslistConfig : defaultBrowserslist

printCaniuseLiteVersion()

const build: BuildOptions = {
target: browserslistToEsbuild(browserslist),
lib: {
Expand Down Expand Up @@ -103,6 +106,7 @@ export function createViteConfig({
babel({
babelHelpers: 'runtime',
plugins: [
['@babel/plugin-syntax-import-attributes'],
['@babel/plugin-transform-runtime'],
[
'babel-plugin-polyfill-corejs3',
Expand Down Expand Up @@ -143,6 +147,11 @@ export function createViteConfig({
]

return defineConfig({
esbuild: {
supported: {
'import-assertions': true,
},
},
build,
plugins,
})
Expand Down