Parcel 2 how can I produce both module and html at the same time? #5033

dgkimpton · 2020-08-18T08:13:33Z

dgkimpton
Aug 18, 2020

I have a project that has the main html file, some js code, and some js modules that will be loaded later dynamically (but which are not directly referenced in the main code).

I assumed I could just tell Parcel2 about these module files and they would get optimised and added to the output folder, but that appears not to be the case.

Given a simple sample project with three files like below:

package.json

{
 "name": "parcel-test",
 "version": "1.0.0",
 "scripts": {
  "assemble": "parcel build --no-source-maps src/**/*.html src/**/*.mjs"
 },
 "devDependencies": {
  "parcel": "^2.0.0-beta.1"
 }
}

src/index.html

<!DOCTYPE html>
<html lang="en">
<body>
	<script type="module">
		window.addEventListener('load', () => {
			alert('loaded');
		}, false)
	</script>
</body>
</html>

src/test.mjs

export default function () {
	alert('test');
}

When I run npm run assemble the ./dist folder gets two files added ['index.html','test.js']. The index.html is processed as expected, the test.js is empty.

What I want to happen is the test.mjs to get minimised but still contain the export function.

Does anyone have a suggestion on how I can get Parcel2 to do this? (or am I trying to do the impossible?)

dgkimpton · 2020-08-19T11:25:19Z

dgkimpton
Aug 19, 2020
Author

So it seems I can configure Parcel to do one or the other.

If I add

"module": "dist/test.js",

to my package.json and call parcel build src/test.js I get a nicely bundled test.js in the dist folder containing the code I expected.

If instead, I add

"main": "dist/index.html",

to my package.json and call parcel build src/index.html I get a nicely bundled index.html in the dist folder containing the code I expected.

But, I can't find any way to combine these. Even calling Parcel twice with different input files doesn't work because it pulls the main/module definition out of the package.json which is a shared resource :(

It seems I need a way to tell Parcel about the structure of my project in package.json, like:

"bundles": [
  "index": {
      "main": "dist/index.html",
      "source": "src/index.html"
  },
  "test": {
      "module": "dist/test.js",
      "source": "src/test.mjs"
  }
],

And then be able to call Parcel without the explicit list of source files.

This feels like something that probably already exists, but I haven't been able to find it.
Does anyone have any suggestions?

1 reply

dgkimpton Aug 19, 2020
Author

I found this ticket: #3583

Using that I've created a subfolder and a separate package.json for each file I want in my distribution.

dist
packages
|-- index-html
|-- |-- package.json
|-- test-js
|-- |-- package.json
|-- test-html
|-- |-- package.json
src
|-- index-html
|-- test-js
|-- test-html
package.json

with each package.json containing (for example)

{
	"name": "index-html",
	"source": "../../src/index.html",
	"browser": "../../dist/index.html"
}

and then in the top-level package.json:

"scripts": {
		"assemble": "parcel build packages/*",

Would love to know if there is a better way, but at least for now it works and I'm unblocked 😀

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

Parcel 2 how can I produce both module and html at the same time? #5033

Uh oh!

{{title}}

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Uh oh!

Parcel 2 how can I produce both module and html at the same time? #5033

Uh oh!

dgkimpton Aug 18, 2020

Replies: 1 comment · 1 reply

Uh oh!

dgkimpton Aug 19, 2020 Author

Uh oh!

dgkimpton Aug 19, 2020 Author

dgkimpton
Aug 18, 2020

Replies: 1 comment 1 reply

dgkimpton
Aug 19, 2020
Author

dgkimpton Aug 19, 2020
Author