Distribute ESM

[jimmywarting]

I'm looking in the dist folder but can't find any ESM module, so i can't use import in browsers...

whenever i try do use /+esm with jsdeliver then it tries to be a smartas and import everything that it needs... including Buffer which i do not want/need.

https://cdn.jsdelivr.net/npm/[email protected]/dist/index.js/+esm

I do not know if it's b/c you are using Buffer that makes it wanna import it.

I really dislike that NodeJS added buffer onto the global namespace in the first place instead of depending on it like everything else ppl should really be using import Buffer from 'node:buffer' or async import...

i think you maybe can circumvent this if you instead use: const Buffer = globalThis.Buffer at the very top... but i'm not sure... really wished you could just remove all of nodejs Buffer stuff...

[jimmywarting]

a fellow guy suggested to add:

"browser": {
    "node:buffer": false
}

into package.json

He also said that const Buffer = globalThis['Buf'+'fer] might work too.

[kriszyp]

This was addressed with #67, right?

[jimmywarting]

Maybe just partly...
there is two things in this issue:

• Attempt to avoid Buffer in browsers
• Distribute a ESM build version in the dist folder (without the need of having to add /+esm at the end of jsdeliver CDN to be able to get it as a ESM)

I guess it would be best if you added a ESM output target format as well to this build config?

cbor-x/rollup.config.js

Lines 5 to 16 in f0693d5

	export default [
	{
	input: "node-index.js",
	output: [
	{
	file: "dist/node.cjs",
	format: "cjs",
	sourcemap: true
	}
	]
	},
	{

ofc I can import('https://cdn.jsdelivr.net/npm/[email protected]/encode.js') and that work just fine as is.
it will load both original encode.js & decode.js source code without node:Buffer and without minification.

With jsdeliver you can also add .min.js at the end (if there aren't any minified file there already)
So it will load the minified encode.js but original decode.js (cuz it dose not add .min. to other sub dependencies
eg import('https://cdn.jsdelivr.net/npm/[email protected]/encode.min.js') (this is what i'm currently using)

---

Apparently when adding /+esm at the end of the url you will still get a node:buffer included either way, even if i added the

  "browser": {
    "node:buffer": false
  },

(it did not seem to help that i added this to package.json) 😕

In here you can still find things such as writeFloatLE in the source code:
https://cdn.jsdelivr.net/npm/[email protected]/encode.js/+esm

But it did seem to help that i added const Buffer = globalThis.Buffer i just forgot that decode.js also makes a references to node:buffer.concat here:

cbor-x/decode.js

Line 288 in f0693d5

return majorType == 4 ? array : majorType == 3 ? array.join('') : Buffer.concat(array)

when the Buffer polyfill gets included then it never tries to add Buffer to the global scope.
so in this minified file: https://cdn.jsdelivr.net/npm/[email protected]/encode.js/+esm
then encode.js pulls Buffer from globalThis and never from the the polyfill (so it dose not seem like it's dependent on node:buffer)
but decode.js seems to be dependent on node:Buffer so it adds the node:buffer polyfill either way?

that's what i think is happening.