In my package.json:
"dev": "parcel parcel/index.scss parcel/index.js --dist-dir assets --no-source-maps",
"build": "parcel build parcel/index.scss parcel/index.js --dist-dir assets --no-source-maps"
dev works. I get the expected results, which is my two index files are dropped into the root of my assets folder and both are populated with code. I can see my Sass and JS coming in from the separate files.
build will also output both index files, however, the js file is empty. The css file is populated.
No errors. Build completes.
All other settings are default.
I'm on a Win10 laptop running the latest node and npm.
Any ideas?
Here's a simplified version of what's happening:
Your parcel/index.js file has lines like this:
import './scripts/global/global';
...
And the ./scripts/global/global file has items that look like this:
function globalTest1() {
console.log('testing from global.js function 1');
}
...
It looks like you are trying to build a bundle that exposes a bunch of functions in the global namespace.
That's not happening here because, by default, parcel is going to try to build a modern ESModule-based bundle (e.g. something that could be imported into an <html> file with <script type="module>"). Variables declared in these kinds of scripts are, by default, not part of the global namespace (see mozilla docs). Furthermore, in production mode (e.g. when you run parcel build) parcel tries to be smart to remove things that it can tell are not used within the bundle (see parcel scope-hosting docs). Since you aren't using any of the imports, they all get removed.
Parcel v1 used to support this scenario with a --global flag that hasn't been carried over to v2. There is a near-term roadmap item to support this scenario through a "UMD output format" - it's not fully implemented yet, but when it is, you should be able to define some global variable that will contain all the top-level exports from your bundle (see PR #7240, PR #7381, and Issue #7312).
In the meantime, you should be able to solve this scenario by explicitly assigning the things you want to be the global namespace to the globalThis variable in the entry script. Parcel will see that these items are used -- and therefore won't tree-shake them. Unfortunately, the process would involve a bit of manual boilerplate, but you should unblock you for now. For example, you could change your parcel/index.js file to expose all the exports from the global.js file in a global variable called myGlobalFunctions:
import * as myGlobalFunctions from './scripts/global/global';
globalThis.myGlobalFunctions = myGlobalFunctions;
.....
(It would be up to you to choose a name and structure for these export(s), based on your scenario).
Although your issue seems to be solved, I had a similar issue with building a JS library with Parcel 2 (empty compiled module), I’m just noting it here.
This entry in package.json fixed it: "main": "dist/index.js" (specify the path to the compiled module)
My module contains export statements.
One nuisance arising from this is that when you run parcel with a different target, you need to change or delete this entry. You can also let parcel ignore it (following the docs) by adding "targets": {"main": false}, but then the above-mentioned hack for the index.js target doesn’t work either.