Use Parcel instead of Webpack #6597
Conversation
|
It's very very likely I'm setting myself up for future pain with Parcel, but every time I do this I'm able to extract something good out of it anyway. Advantages of Parcel are a more inclusive pipeline, which enables things like validating the manifest (Parcel native) and adding CSS transforms. Our build has also for a long time suffered when adding new features: a restart was necessary or else the feature would just not appear in the browser. Past:
Next:
Future:
|
| uses: relative-ci/agent-action@v2 | ||
| with: | ||
| webpackStatsFile: ./webpack-stats.json | ||
| key: ${{ secrets.RELATIVE_CI_KEY }} |
There was a problem hiding this comment.
We lose relative-ci though 🥲 It'll come "soon"
| @@ -0,0 +1,7 @@ | |||
| { | |||
| "mangle": false, | |||
There was a problem hiding this comment.
false ironically triggers "obfucation" warning in the Chrome store, so I'll have to undo it
| async transform({asset}) { | ||
| const code = ` | ||
| module.exports.importedFeatures = ${JSON.stringify(getImportedFeatures())}; | ||
| module.exports.featuresMeta = ${JSON.stringify(getFeaturesMeta())}; |
There was a problem hiding this comment.
Don't ask me why export const importedFeatures doesn't work. It says it's "not exported".
| "main": "dist/index.js", | ||
| "source": "index.ts", | ||
| "scripts": { | ||
| "prepare": "esbuild ./index.ts --bundle --outdir=dist --platform=node" |
There was a problem hiding this comment.
🤫 I'm using esbuild to build a Parcel plugin because Parcel breaks things (ERR_REQUIRE_ESM and all that jazz, including issues if I try to make it bundle Node modules 🤷♂️)
Maybe it'll be fixed in the next version
| }, | ||
| "options_ui": { | ||
| "chrome_style": true, |
There was a problem hiding this comment.
We might have to wait for the next version before shipping because this should be undone. See:
| }, | ||
| "background": { | ||
| "persistent": false, | ||
| "scripts": [ | ||
| "background.js" | ||
| "npm:webextension-polyfill-global", |
There was a problem hiding this comment.
I ended up publishing /~https://github.com/fregante/webextension-polyfill-global because Mozilla keeps dragging their feet…
| @@ -20,22 +20,23 @@ | |||
| "https://api.github.com/*" | |||
| ], | |||
| "browser_action": { | |||
| "default_icon": "icon.png" | |||
| "default_icon": "source/icon.png" | |||
There was a problem hiding this comment.
I moved manifest.json out of source because it's the only way to create an extension that looks like:
- ./manifest.json
- ./assets/*
Due to dynamic filenames and the lack of their support by Xcode, we needed a way just have 2/3 static entry points.
| @@ -1,3 +1,26 @@ | |||
| @import './refined-github.css'; | |||
There was a problem hiding this comment.
Oops. Recursive import
I also need to think of a way to extract the raw CSS below into another file because this change changes the cascade order.
Will revert because the content script nearly triples in size
This reverts commit 743cd64.
|
This isn't a big deal to Parcel devs, but it renders our builds unreadable. The solution is to either disable scope hosting, which balloons the bundle to 1.2MB or to mangle the names, which means our clean I can try again in 2024, but at this point the output is subpar. I'll extract some improvements from this PR though. |
It builds.