feat: Add --global flag replacement to Parcel v2

[jhanke00]

↪️ Pull Request

This is a continuation of an existing PR: https://github.com/parcel-bundler/parcel/pull/4476

This aims to add a replacement for the --global option to Parcel v2 so that bundle exports are accessible in the global scope just like in Parcel v1.

Parcel v1: https://v1.parceljs.org/cli.html#expose-modules-as-umd Original v1 changes: https://github.com/parcel-bundler/parcel/pull/453/files

We did NOT solve for scope hoisting in this PR since our aim is to have this working with the same behavior as in Parcel v1. We currently need this functionality in our project and hope that this can be a starting point for future updates including scope hoisting.

💻 Examples

We added an example under packages/example/global-var.

Run the following commands to see how this is used:

yarn build-native
cd packages/example/global-var
npm run build
npm run serve

You should see that the bundle is set as the global variable ListChecker and the index.html is pulling down that object from the window and using the functions that have been exported.

🚨 Test instructions

Added new integration tests under packages/core/integration-tests/test/global-var.js. Run yarn test to run all of the tests including this one.

✔️ PR Todo

• [x] Added/updated unit tests for this change
• [x] Filled out test instructions (In case there aren't any unit tests)
• [x] Included links to related issues/PRs

[height[bot]]

Link Height tasks by mentioning a task ID in the pull request title or commit messages, or description and comments with the keyword link (e.g. "Link T-123").

💡Tip: You can also use "Close T-X" to automatically close a task when the pull request is merged.

[mischnic]

yarn lint as part of this PR so a lot of the files have been modified due to prettier.

We recently upgraded Prettier and a lot of your changes seem like they were done by Prettier 1 instead of 2. Maybe you merged upstream into your branch, didn't run yarn install and a subsequent yarn lint then used the old version?

[jhanke00]

That would do it. Should now be synced with Prettier 2.

[mischnic]

I think global should rather be on the Target object, rather than the options https://github.com/parcel-bundler/parcel/blob/d2a9b6bdd93855b468fa9911dad27a49e54e9557/packages/core/types/index.js#L133 because outputFormat is also per-target. (We could still have the CLI flag, but it would just behave like --no-optimize which also applies targets.*.optimize)

Also exposing the module only really makes sense with isLibrary. Otherwise Parcel would try to be smart and optimize the exports away (though currently this only happens if scope hoisting is enabled).

[thychamp]

I think global should rather be on the Target object, rather than the options

https://github.com/parcel-bundler/parcel/blob/d2a9b6bdd93855b468fa9911dad27a49e54e9557/packages/core/types/index.js#L133

because outputFormat is also per-target. (We could still have the CLI flag, but it would just behave like --no-optimize which also applies targets.*.optimize) Also exposing the module only really makes sense with isLibrary. Otherwise Parcel would try to be smart and optimize the exports away (though currently this only happens if scope hoisting is enabled).

@mischnic

We see the global flag as something that is optional and set only in cases where you need to access the module in the global scope. It is not like optimize where that is the default behavior. However, if you see it as part of the target we can make that change.

In our use case we need this feature because we are pulling modules from a CDN then accessing them from the global scope within a browser.

[devongovett]

Yeah it should be per target and possibly only supported with the "global" (iife) output format, and not commonjs or ESM. Since you can output multiple targets in Parcel 2, some might want a global and some might not. And IMO unless there's a real use case to change that global variable name on every build, I don't think it needs to be in the CLI. IMO it's clearer to read when it's explicit in the package.json rather than in a CLI command that could be omitted by accident.

[jhanke00]

Yeah it should be per target and possibly only supported with the "global" (iife) output format, and not commonjs or ESM. Since you can output multiple targets in Parcel 2, some might want a global and some might not. And IMO unless there's a real use case to change that global variable name on every build, I don't think it needs to be in the CLI. IMO it's clearer to read when it's explicit in the package.json rather than in a CLI command that could be omitted by accident.

@devongovett, I added the suggestions you had to the PR. Let me know if there is anything else that is needed before this can be merged.

[michox]

has there been any progress on this? I would like to migrate from parcel V1 but can't do so unless this is implemented

[lynnjosse]

My group would also like to implement this to get off v1. Is there anything we can do to help the review along?

[lfcgomes]

Any news on this?