-
Notifications
You must be signed in to change notification settings - Fork 2
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
build: upgrade node to v20 #413
Conversation
@@ -5,3 +5,4 @@ es/ | |||
lib/ | |||
public/ | |||
!.storybook/ | |||
packages/core/src/icons/components |
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.
這邊的 components 是 generate-icon-components 產生的
upgrade webpack to v5 upgrade webpack loaders replace node-sass to sass
e41b9e2
to
319be27
Compare
@@ -1,21 +1,31 @@ | |||
/* eslint-disable import/no-extraneous-dependencies */ | |||
const path = require('path'); | |||
const autoprefixer = require('autoprefixer'); | |||
const ExtractTextPlugin = require('extract-text-webpack-plugin'); | |||
const MiniCssExtractPlugin = require('mini-css-extract-plugin'); |
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.
更新 webpack 到 v5 之後,原本的 extract-text-webpack-plugin 不能用了,換成 mini-css-extract-plugin
library: { | ||
name: toCamelCase(packageName), | ||
type: 'var', | ||
}, |
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.
這裡的 packageName 在新版的 webpack 會被當作變數名稱,原本的值 gypcrete-imageeditor' 會包含
-` 而不合法,所以這邊新增一個 toCamelCase 來轉格式
use: [ | ||
{ | ||
loader: MiniCssExtractPlugin.loader, | ||
}, | ||
{ | ||
loader: 'css-loader', | ||
options: { | ||
importLoaders: 1, | ||
}, | ||
{ | ||
loader: 'postcss-loader', | ||
options: { | ||
plugins: () => [autoprefixer], | ||
}, | ||
{ | ||
loader: 'postcss-loader', | ||
options: { | ||
postcssOptions: { | ||
plugins: [autoprefixer], | ||
}, | ||
}, | ||
{ | ||
loader: 'sass-loader', | ||
options: { | ||
}, | ||
{ | ||
loader: 'sass-loader', | ||
options: { | ||
sassOptions: { | ||
outputStyle: 'expanded', | ||
}, | ||
}, | ||
], | ||
}), | ||
}, | ||
], |
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.
loader 的 API 參數格式更新
postcssOptions: { | ||
plugins: [autoprefixer], | ||
}, | ||
}, | ||
}, | ||
{ | ||
loader: 'sass-loader', | ||
options: { | ||
outputStyle: 'expanded', | ||
sassOptions: { | ||
outputStyle: 'expanded', | ||
}, |
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.
loader 的 API 參數格式更新
Codecov Report
Additional details and impacted files@@ Coverage Diff @@
## project/upgrade-react-v18 #413 +/- ##
==========================================================
Coverage 88.47% 88.47%
==========================================================
Files 152 152
Lines 1544 1544
Branches 283 283
==========================================================
Hits 1366 1366
Misses 178 178 |
93a28dd
to
e6b8391
Compare
e6b8391
to
78ee27d
Compare
78ee27d
to
482afeb
Compare
482afeb
to
5ac8256
Compare
5ac8256
to
5dc9491
Compare
5dc9491
to
2a41302
Compare
2a41302
to
1ccf9e5
Compare
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.
讚 👍🏼
另外好奇會不會考慮加上 .nvmrc?
因為 package.json 的 engines.node
不是強制性的,且只會在安裝時吐警告,對安裝的人的才有提示作用
對開發 gypcrete 的人,如果 local machine 沒有切換到對的 Node version(比如預設是 cloud-frontend 的 v16,但臨時要開發 gypcrete)的話,他就會在 install 甚至 start 的時候才會發現問題
https://10up.github.io/Engineering-Best-Practices/nodejs/
Additionally, it is recommended to create a .nvmrc file with the officially supported node version of the project. This allows those using nvm to run nvm use to switch the node version. We also recommend setting up shell integration to automatically switch node versions when changing directories.
p.s. engine-strict
看起來已經被 npm, yarn 放生了,所以可能不用考慮
npm/cli#786
@@ -7,7 +7,7 @@ | |||
"repository": "iCHEF/gypcrete", | |||
"license": "Apache-2.0", | |||
"engines": { | |||
"node": ">= 8.2.1 <= 12", | |||
"node": ">= 20", |
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.
在想要不要指定 minor version
現在這樣好處是不用特別做事就能適用到最新的 minor verison
最近有遇到 cloud-frontend 的 Node 版本跟 lib requirement 差一個小版號,所以必須要人工再去處理升版的問題,這時候就覺得指定大版號為止就會省下這個工
雖然不知道會不會因為 minor 不同就有意外的行為不同,不過想像應該還好
Node 跟 Apollo 比起來應該有信用一點 XD
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.
因為滿長時間以來都是指定一個範圍,印象中是沒遇到什麼問題,我覺得應該可以先維持就好,不然升級版本要改很多地方也滿麻煩的
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.
同意
那應該是我那邊的調整要指定到大版號就好
@leannechen 感謝建議,我覺得如果新增 .nvmrc 可以搭配你上次分享的 shell script 自動切換 node 版本會滿讚的 Update: 我剛剛發現用 yarn 的話會阻擋,但用 npm run 就不會 😅 |
ee89e86
to
e068001
Compare
Quality Gate passedKudos, no new issues were introduced! 0 New issues |
@leannechen 感謝建議,已在 ee89e86 加上 .nvmrc 的 node 版本指定 |
Purpose
upgrade Node to v20
Changes