Change Bundler, Code Refactoring, Retry when Fetch Failed, Action-Release CD #5
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
I assume that most of this project are inherited from
lxieyang/chrome-extension-boilerplate-react
.And there are many things that we don't need.
Replace
Webpack
withesbuild
+ scriptI think it is not necessary to use fat
webpack
as the bundler. And thewebpack.config.js
is hard to read.I replaced it with
esbuild
, which is faster, and a short and readable build script that does the same thing aswebpack
.Code Standards and Refactoring
I noticed that some sources use
import * as React from "react"
and the others useimport React from "react"
.I replaced them all with the latter.
For type declarations, I moved all of them into
types.ts
, and import them in other files when using.I believe it is more easier to manage them and people working on other projects like
vite
andslidev
are doing the same thing.I also use
import type
to replaceimport
when importingtype
s andinterface
s.The order of import statements:
I also update the prettier rules:
tabWidth
:2 -> 4
singleQuote
:true -> false
printWidth
:90 -> 120
My reason is: The screen should wide enough although in the portrait mode and double quote make strings string.
Make Eslint Work
I notice that the eslint did not work properly so I add
typescript
plugin andprettier
plugin.I also add a
lint
npm script inpackage.json
.Retry on Fetch Failed
Add Feature: #4
If the fetch response is not ok (2XX), then it will be rejected and trigger retry handler. (up to 3 times, can be modified)
Tested. Works when I turned off my network, it behaves as expected. (Failed three times)
GitHub Action That Generate Release Asset
Add Feature: #3
Not Tested. It should be triggered when the tag exists.
Some of the changes are just "my opinion" so feel free to discuss.