I have a genuine question: Why would you even “pack” your code?
I don’t see an advantage, but a couple of disadvantages with that:
You cant load scripts on demand. By design, everything has to be loaded at once, blocking the extensions startup.
Debugging sucks. Stack traces are incorrect and you have to step through one very long file, which makes it harder to find the places to set breakpoints.
Source maps are quite big and if they need to be loaded quite defensively not good for performance. So would you include them in your final build? Not doing so means you need to manually translate any stack traces of reported errors. If you include it, browsers will need to load it as soon as an error is thrown. Also, form my experience, stepping through source-mapped code can sometimes be wired.
With extensions, many of the usual advantages of packing your files don’t really matter:
With modern browsers, you don’t need transpilers. Chrome, Edge and Firefox support ES6, (most of?) ES7 and async functions out of the box. The only thing you can’t do is export/import.
The files don’t need to be loaded over the network. The time it takes to load individual files is very, very short. Also, slicing the work up into multiple files should increase the responsiveness of the browser a bit, and bottom line shouldn’t make a difference especially if multiple extensions and other things are loaded in parallel.
So if the export/import is the only reason, why don’t you only transpile that into define/require calls? It’s what transpilers do with is anyway (and that is semantically wrong, by the way).
To answer your question: I would keep everything in separate files.
So if the export/import is the only reason, why don’t you only transpile that into define/require calls? It’s what transpilers do with is anyway (and that is semantically wrong, by the way).
I would still need a transpiler to convert the React/JSX code into something browsers can read. Example from the React website.
<div className="shopping-list">
<h1>Shopping List for {props.name}</h1>
<ul>
<li>Instagram</li>
<li>WhatsApp</li>
<li>Oculus</li>
</ul>
</div>
My extension got auto approved for update so it’s not really a concern now (Edit: just had to upload a patch, which means that version is in review now), but as a future reference, are these warnings fine if they are from established libraries(Redux/React-Redux)?
Also, another weird thing is the validator did not pick up react-dom.min.js, which has the same hash as this line: