Make parcel ignore...

[akrizs]

Trying to include socket.io js file/link that is served by the server, how would i write it in the file and let parcel just include the script tag and not try to bundle the file ?

script(src="/socket.io/socket.io.js")

**Using PUG

Originally posted by @AntonEdvard in #144 (comment)

[DeMoorJasper]

Host it on a cdn or some kind of server and use the full url.
Parcel ignores paths that are urls

[akrizs]

is it not possible to add somekind of flag to make parcel ignore that line? i dont think its a good idea to host my socket connection on a cdn :/

Can i skip it somehow with a plugin or a middleware ? tried bundler.on('bundleStart') but that obviously just gave me an array with the input.

Would be nice to be able to do

bundler.on('file', (file, skip) => {
  if(file.name === 'socket.io.js') {
    skip()
  }
});

Or something similar; Would do it but my skills aren't there yet, have been scratching my head on this for 3 days now, really halting my working process :/

[DeMoorJasper]

What you are proposing is currently impossible. As urls are being rewritten in the htmlasset which can't be acessed from outside.

Perhaps you can use an environment variable in pug with the url of the server, this way parcel knows it's a hosted asset by a server and should ignore it...

[akrizs]

what is the order of the bundler? does it parse the pug file to html and then fetches the assets from the compiled html file or does it fetch the assets before it is compiled to html ?

sounds like that should work if the pug isn't compiled and then the assets fetched from the compiled html file...

[DeMoorJasper]

@AntonEdvard not sure what you mean, but most deps are extracted by html, after compiling pug.

[akrizs]

well you got it right :D then i guess the "string/path" would be considered a path and therefore fetched in to the bundler even if i used an env-var, but i'll try it out, give me couple of mins ;D

[akrizs]

do i need to set the variable as an environment variable? isn't it enough to set it in the input file?

[akrizs]

didn't work either... it fetches the dep after the file is compiled which gives the bundler the same thing as setting it in the file.. :/

[akrizs]

is there no way to get passed this? parcel is such an amazing tool, don't want to go back to the all too complicated webpack 😢

[DeMoorJasper]

Got any code snippet of what you tried?

It should work, I've done it multiple times in various projects.

[akrizs]

well i just kept the same thing
script(src=process.env.SOCK)

Except i put the string in the .env
SOCK=/socket.io/socket.io.js

[DeMoorJasper]

Yeah that won't work.

I meant something like this:

.env.development

SERVER_URL=http://localhost:1234/

.env.production

SERVER_URL=https://someserver.com/

index.pug

script(src=process.env.SERVER_URL + '/socket.io/socket.io.js')

[akrizs]

ah i see, so i basicly have to have the server url in... which won't work i think, i'll try it, worst case scenario i could just remove the url part from the compiled html before adding to server, the only issue would be to do it after every compile while working on it...
Hope "ignore" option is an upcoming feature in parcel, perhaps the only thing i see missing, else i could almost call it a perfect tool! 😄 could perhaps write a random thing and then create another watcher on the compile folder that finds that scrambled url text and removes it, leaving only the wanted part... ;D hehe! hack upon hack upon hack... hackception... 🙄

[akrizs]

Hope that this will be a future feature in parcel, really should be.

meanwhile i built a tool that monitors the dist folder and modifies all html that include a certain string to the correct socket.io script tag.

[mischnic]

Closing as duplicate of #1186

[scottlaplante]

We have been using Parcel for less than a year. One of the biggest and pretty much only struggle we have had with parcel led me to this ticket. It also led me to #3137 and #144 and #1379 and possibly even others.

Our use case is that we have index.html and app.js, straightforward. Within a given release/version those files are static across environments (dev, uat, prod) as well as across clients (we are saas). On top of those two files there is an additional file, env.js, which contains important differences at both a client and an environment level.

index.html looks like this:

    <div id="root">loading</div>
    <script src="./env.js"></script> <!-- this file wants to be ignored -->
    <script src="./app.js"></script>

In each particular deployment, env.js WILL be there, in the right place. But it's not parcel's job to put it there, it's the job of the deployment code.

I can't use a fully qualified URL here because that would require a priori knowledge of where this build will be deployed. I tried two different parcel plugins that claimed to fix this very issue, by either putting a special comment structure into index.html or otherwise indicating ignored files in package.json. Neither of these plugins worked for me, and/or I don't know how to use them or plugins in general. I thought about fixing this with a hack in the deployment, finding and symlinking over the generated env.hash.js file. I was considering writing my own plugin and trying to understand the innards of Parcel, but this seemed a waste when Parcel 2 is really where attention is and should be.

This morning, I stumbled on a stupidly simply workaround that works perfectly for my needs and I thought I'd share the aha moment. I might go so far as to not call it a workaround but a solution: I told parcel that env.js was an entry point file!

Conceptually, this makes sense. If it's an entry file that means the URL in the output directory can't be renamed since others depend on it. Parcel DOES take my copy of env.js during the build step and re-write its contents to include the parcel.require scaffolding, but it leaves index.html with src="env.js", and now my deployment-time volume mapping onto env.js works like a charm.

Thanks to the parcel team! Even with this particular frustration, this tool is amazing and very appreciated.

[vicmosin]

@scottlaplante Could you please post the full example i.e. how commands look like? Thank you in advance

[minecrawler]

@vicmosin you can specify more than one entry files, for example:

$ parcel build app.js env.js --out-dir public --public-url=./

Unfortunately this only solves the problem when the other file already exists, however it does not solve the problem of generated files or files, which are accessed by using a proxy to route requests...

[GimpMaster]

I have the same issue. In a cordova / phonegap app. The cordova tools insert a cordova.js file which index.html includes. parcel chokes if you pass it index.html since the file doesn't exist (however it will when deployed).

Anyone using cordova solve this issue?

[minecrawler]

By now, I decided to move away from Parcel even for simple static websites, because the only solution I found was to write an actual script, which cleans up after Parcel and does all the things Parcel won't do. If that's what I have to do, I can just use WebPack.

@GimpMaster If you want to stick to Parcel, I would write a script, which starts Parcel using its API and after Parcel is finished injects the required script tag into the generated html file (for example by searching for the </head> tag and replacing it with <script src="cordova.js"></script></head>). It's not nice, but it gets the job done.

[GimpMaster]

@minecrawler - I was able to use this parcel plugin: parcel-plugin-html-externals

and then define in my package.json external files to have parcel ignore. For example:

"externals": {
"cordova.js": false
}

This solved it for me. It would be great if parcel did this by default. I think I saw somebody even had a merge request for parcel2.

If you do use that plugin it seems newer versions of parcel require that you also npm install parcel-bundler

[VladimirMikulic]

I've made a plugin that excludes assets from bundling in Parcel 2.
Check it out https://www.npmjs.com/package/parcel-resolver-ignore

1. npm i parcel-resolver-ignore -D
2. .parcelrc

{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-ignore", "..."]
}

3. package.json

{
  "parcelIgnore": [
    "socket.io.js"
  ]
}

Good to go! No need to modify source files!
Let me all know what you think!

[kayomarz]

@VladimirMikulic thanks for the solution.

My project uses parcel-resolver-ignore to ignores /css/foo.css because its available in production. However when developing with parcel serve, the ignored files are not available with parcel's development server on port :1234 because they are not copied to the dist.

Is there a way to make copy the ignored file to the output when using parcel serve?

I tried giving multiple entry points to parcel serve but it doesn't work out.

[VladimirMikulic]

@kayomarz what you are looking for is likely this: https://github.com/elwin013/parcel-reporter-static-files-cop
Great plugin by @elwin013

[kayomarz]

@VladimirMikulic Your parcel-resolver-ignore and @elwin013's parcel-reporter-static-files-copy have helped me out. Thank you!

[Mouradif]

@kayomarz I'm also trying to use both these packages but for parcel-resolver-ignore I have the following problem:

    5 |   "reporters": [
  > 6 |     "parcel-resolver-ignore",
  >   |     ^^^^^^^^^^^^^^^^^^^^^^^^ Parcel reporter packages must be named according to "parcel-reporter-{name}"
    7 |     "...",
    8 |     "parcel-reporter-static-files-copy"

were you able to work around it?

[mischnic]

@Mouradif

{
  "extends": "@parcel/config-default",
  "resolvers": ["parcel-resolver-ignore", "..."],
  "reporters":  ["...", "parcel-reporter-static-files-copy"]
}

[Mouradif]

Thanks @mischnic I didn't read carefully, I just added the resolver in the reporters array