Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add support for excluding specific node_modules #4072

Merged
merged 3 commits into from Feb 3, 2020

Conversation

devongovett
Copy link
Member

Related: #144, #3305, #3753.

This adds support for excluding specific node_modules from a bundle. The inverse was already possible via includeNodeModules using the array syntax, but now it's possible to use object syntax to exclude specific node_modules in a certain target.

{
  "targets": {
    "library": {
      "includeNodeModules": {
        "react": false
      }
    }
  }
}

#3753 proposed doing this via peerDependencies, but that doesn't allow specifying node modules to include/exclude per target. We may want to support it as a shortcut for includeNodeModules across all targets, however.

@parcel-benchmark
Copy link

parcel-benchmark commented Feb 3, 2020

Benchmark Results

packages/benchmarks/kitchen-sink ✅

Timings

Description Time Difference
Cold 6.71s +1.30s ⚠️
Cached 3.24s -12.00ms

Cold Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.ff215454.webp 102.94kb +0.00b 185.00ms -44.00ms 🚀
dist/modern/parcel.76ee4591.webp 102.94kb +0.00b 183.00ms -45.00ms 🚀
dist/legacy/index.js 460.00b +0.00b 485.00ms +25.00ms ⚠️
dist/modern/index.js 452.00b +0.00b 480.00ms +24.00ms
dist/legacy/index.css 29.00b +0.00b 1.35s +182.00ms ⚠️
dist/modern/index.css 29.00b +0.00b 1.21s +270.00ms ⚠️

Cached Bundles

Bundle Size Difference Time Difference
dist/legacy/parcel.ff215454.webp 102.94kb +0.00b 54.00ms -15.00ms 🚀
dist/modern/parcel.76ee4591.webp 102.94kb +0.00b 53.00ms -14.00ms 🚀
dist/legacy/index.js 460.00b +0.00b 58.00ms -280.00ms 🚀
dist/modern/index.js 452.00b +0.00b 53.00ms -278.00ms 🚀
dist/legacy/index.css 29.00b +0.00b 54.00ms +42.00ms ⚠️
dist/modern/index.css 29.00b +0.00b 53.00ms +42.00ms ⚠️

packages/benchmarks/react-hn ✅

Timings

Description Time Difference
Cold 7.98s -1.00ms
Cached 3.02s +25.00ms

Cold Bundles

No bundle changes detected.

Cached Bundles

Bundle Size Difference Time Difference
dist/module/index.js 34.33kb +0.00b 223.00ms +214.00ms ⚠️
dist/main/index.js 34.08kb +0.00b 226.00ms +213.00ms ⚠️

packages/benchmarks/ak-editor ✅

Timings

Description Time Difference
Cold 2.48m -3.56s
Cached 4.95s -921.00ms 🚀

Cold Bundles

Bundle Size Difference Time Difference
dist/index.js 2.33mb +4.00b ⚠️ 1.42m -2.50s
dist/pdfRenderer.85e56a51.js 1.11mb +0.00b 29.80s +2.34s ⚠️
dist/smartMediaEditor.678dca17.js 602.09kb +0.00b 58.47s +3.30s ⚠️
dist/Toolbar.1699663e.js 105.85kb +0.00b 58.41s +3.25s ⚠️
dist/ui.c85d9c1b.js 73.77kb +0.00b 47.16s +3.23s ⚠️
dist/smartMediaEditor.25b0ed57.js 67.38kb +0.00b 47.16s +3.23s ⚠️
dist/component.10b390dc.js 46.04kb +0.00b 31.63s +1.60s ⚠️
dist/popup.b8e50b5b.js 22.04kb +0.00b 31.03s +2.27s ⚠️
dist/popup.8dca552f.js 21.51kb +0.00b 31.04s +2.27s ⚠️
dist/popup.8d8f40ed.js 20.52kb +0.00b 31.04s +2.27s ⚠️
dist/popup.26e30eb7.js 12.70kb +0.00b 31.03s +2.27s ⚠️
dist/card.f99e1597.js 5.92kb +0.00b 11.54s +1.43s ⚠️
dist/index.css 3.38kb +0.00b 59.70s +3.57s ⚠️
dist/media-picker-analytics-error-boundary.0f11d632.js 1.85kb +0.00b 31.38s +1.82s ⚠️
dist/card.2c902906.js 1.73kb +0.00b 11.54s +1.43s ⚠️
dist/component.8351f228.js 1.23kb +0.00b 31.38s +1.82s ⚠️
dist/card.aae6ebb9.js 1.04kb +0.00b 11.54s +1.43s ⚠️
dist/media-viewer-analytics-error-boundary.dd752a9e.js 779.00b +0.00b 11.54s +1.43s ⚠️
dist/dropzone.976debcc.js 179.00b +1.00b ⚠️ 56.26s +27.14s ⚠️
dist/clipboard.976debcc.js 179.00b +1.00b ⚠️ 31.38s +1.82s ⚠️
dist/browser.976debcc.js 179.00b +1.00b ⚠️ 47.96s +18.40s ⚠️
dist/editorView.976debcc.js 179.00b -1.00b 🚀 31.05s -24.11s 🚀
dist/media-card-analytics-error-boundary.976debcc.js 178.00b -5.00b 🚀 32.08s -24.27s 🚀
dist/16.976debcc.js 176.00b -5.00b 🚀 31.38s +646.00ms

Cached Bundles

Bundle Size Difference Time Difference
dist/index.js 2.34mb +4.00b ⚠️ 241.00ms -25.00ms 🚀
dist/smartMediaEditor.678dca17.js 602.09kb +0.00b 109.00ms -8.00ms 🚀
dist/EmojiPickerComponent.6fc09ddc.js 105.94kb +0.00b 115.00ms +6.00ms ⚠️
dist/DatePicker.0242ec52.js 27.54kb +0.00b 113.00ms +6.00ms ⚠️
dist/EmojiPickerComponent.bcce358c.js 24.31kb +0.00b 114.00ms +7.00ms ⚠️
dist/workerHasher.d7e20c98.js 11.57kb +0.00b 112.00ms +6.00ms ⚠️
dist/EmojiTypeAheadComponent.1c09c30d.js 10.44kb +0.00b 113.00ms +6.00ms ⚠️
dist/EmojiUploadComponent.0460cc59.js 2.92kb +0.00b 113.00ms +6.00ms ⚠️
dist/workerHasher.854262ce.js 1.49kb +0.00b 113.00ms +6.00ms ⚠️
dist/status.e3ed4764.js 1.35kb +0.00b 117.00ms +6.00ms ⚠️
dist/heading6.3996fe48.js 1.19kb +0.00b 114.00ms +6.00ms ⚠️
dist/heading3.9fea5413.js 1.18kb +0.00b 115.00ms +6.00ms ⚠️
dist/heading5.2f045997.js 1.07kb +0.00b 114.00ms +6.00ms ⚠️
dist/expand.13380081.js 1.05kb +0.00b 114.00ms +7.00ms ⚠️
dist/heading2.2194210a.js 1.00kb +0.00b 116.00ms +6.00ms ⚠️
dist/fallback.305c8864.js 982.00b +0.00b 116.00ms +6.00ms ⚠️
dist/quote.88bfdca4.js 938.00b +0.00b 117.00ms +6.00ms ⚠️
dist/heading1.65fb8482.js 866.00b +0.00b 116.00ms +6.00ms ⚠️
dist/esm.976debcc.js 178.00b +2.00b ⚠️ 133.00ms -0.00ms
dist/media-card-analytics-error-boundary.976debcc.js 178.00b +2.00b ⚠️ 132.00ms +2.00ms
dist/dropzone.976debcc.js 178.00b +2.00b ⚠️ 129.00ms +2.00ms
dist/clipboard.976debcc.js 178.00b +2.00b ⚠️ 130.00ms +4.00ms
dist/browser.976debcc.js 178.00b +2.00b ⚠️ 128.00ms +2.00ms
dist/16.976debcc.js 178.00b +2.00b ⚠️ 122.00ms +5.00ms
dist/editorView.976debcc.js 178.00b +2.00b ⚠️ 101.00ms -4.00ms

Click here to view a detailed benchmark overview.

@DeMoorJasper
Copy link
Member

I do think we should have a general exclude as well, with either a custom or peerDependency field.

@maximal
Copy link

maximal commented May 12, 2020

How is this supposed to work for browser builds?

I’m using:

{
	"browser": "web/dist/app.js",
	"source": "frontend/js/app.js",
	"targets": {
		"browser": {
			"includeNodeModules": {
				"jquery": false
			}
		}
	}
}

It builds web/dist/app.js with require()s.

But if I do (see #3963):

{
	"default": "web/dist/app.js",
	"source": "frontend/js/app.js",
	"targets": {
		"default": {}
	},
}

Then it builds without require()s but fully ioncludes jQuery library.

How can I setup Parcel 2 to build for browser (without require()s) and without bundling external libraries simultaneously?


Combination of:

{
	"default": "web/dist/app.js",
	"source": "frontend/js/app.js",
	"targets": {
		"default": {
			"includeNodeModules": {
				"jquery": false
			}
		}
	}
}

yields:

yarn run v1.22.4
$ yarn run parcel build frontend/js/app.js
$ /home/maximal/project/project-name/node_modules/.bin/parcel build frontend/js/app.js
🚨 Build failed.
@parcel/packager-js: External modules are not supported when building for browser
/home/maximal/project/project-name/frontend/js/common.jquery.js:10:1
  9  | 
> 10 | import $ from 'jquery';
>    | ^^^^^^^^^^^^^^^^^^^^^^^
  11 | 
  12 | export function jQueryRun(document, window) {
⠸ Optimizing app.css...
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

@mischnic
Copy link
Member

@maximal

How can I setup Parcel 2 to build for browser (without require()s) and without bundling external libraries simultaneously?

How else? How do you access the libraries then?

Do you want "globals"? #3305

@maximal
Copy link

maximal commented May 12, 2020

@mischnic

I wish to use it like with an old v1 Parcel and its parcel-plugin-externals:

{
	"dependencies": {
		"bootstrap": "^4.4.1",
		"jquery": "^3.3.1",
		"popper.js": "^1.15.0"
	},
	"devDependencies": {
		"less": "^3.11.1",
		"parcel-bundler": "^1.12.4",
		"parcel-plugin-externals": "^0.2.0"
	},
	"browserslist": [
		"> 1%",
		"not dead"
	],
	"main": "web/dist/app.js",
	"source": "frontend/js/app.js",
	"externals": {
		"jquery": "jQuery",
		"bootstrap": true,
		"popper.js": true
	}
}

In my code I use import $ from 'jquery', but it is not bundled when I build.

It works in v1, so I’m just wondering if this is possible in Parcel v2.

Otherwise, what’s the profit of using external React or something if output code is not runnable in browsers?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

5 participants