microbundle icon indicating copy to clipboard operation
microbundle copied to clipboard

why esmodule set to false?

Open hardfist opened this issue 5 years ago • 10 comments

export const a = 10;
export const b = 10;

will generates following in microbundle, which missing __esModule flag 1.

// lib1.js
exports.a=10,exports.b=10;
//# sourceMappingURL=index.js.map

while using rollup generates the folloing code,which seems more accurate 2.

// lib2.js
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const a = 10;
const b = 10;

exports.a = a;
exports.b = b;

which both works fine in the following

const { a,b } =require('lib')
console.log(a,b);

but behaves differently in the following code

import lib1 from "./lib1";
import lib2 from "./lib2";

console.log("lib1:", lib1); // lib1: { a:1,b:2}
console.log('lib2:',lib2); // lib2: undefiend

which lib2 seems more accurate

hardfist avatar Dec 02 '19 03:12 hardfist

The CommonJS output is CommonJS, not ES Modules. ES Modules consumers should use the ES Modules output. Microbundle tells you to set up your package.json so that this is the default in all bundlers:

{
  "main": "dist/lib.js",
  "module": "dist/lib.module.js"
}

developit avatar Jan 17 '20 03:01 developit

It works for project using webpack or rollup, but seems doesn't work for node typescript project which only use tsc and doesn't consume module field

hardfist avatar Jan 17 '20 05:01 hardfist

@hardfist Indeed! I followed this workaround but this causes my library to not work in TypeScript environments...

DaniAkash avatar Mar 07 '20 15:03 DaniAkash

FWIW Microbundle used to detect name-only and default-only exports and remove __esModule only in those cases. It's possible we need to provide an option to bring that behavior back.

developit avatar Jun 19 '20 16:06 developit

FWIW Microbundle used to detect name-only and default-only exports and remove __esModule only in those cases. It's possible we need to provide an option to bring that behavior back.

why remove __emModule

hardfist avatar Jun 24 '20 03:06 hardfist

consider make esModule as an option or param in CLI?

huozhi avatar Jul 02 '20 15:07 huozhi

@huozhi Could you explain a little bit more about the use case? Are you targeting node 14?

wardpeet avatar Jul 04 '20 19:07 wardpeet

@wardpeet the purpose is to use esmodule syntax import with cjs bundles. usually cjs assets define a property __esModule to work compatiable with interpolate import. but pure cjs (disable esModule config) will erase property __esModule that breaks import on cjs files.

import defaultExportLib from 'lib' // this won't import the default export variable from 'lib' when use pure commonjs format

typescript has an option esModuleInterop to enable this module transform behavior, which define __esModule property on the target modules. the generated assets will look like following:

function __export(m) {
    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
}
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
__export(require("./use-swr"));
var use_swr_1 = __importDefault(require("./use-swr"));

I also saw tsdx has used the similar approach that when compilerOptions.esModuleInterop is set to true it will turn on esModule flag on rollup side. https://github.com/formium/tsdx/blob/462af2d002987f985695b98400e0344b8f2754b7/src/createRollupConfig.ts#L102

I feel this will be a lovely feature that microbundle could have. not for ts only, js assets can also could adopt this by CLI command like microbundle --esmodule-interop

huozhi avatar Jul 05 '20 03:07 huozhi

The options for this changed dramatically in recent @rollup/plugin-commonjs versions. There are some new ones that are perhaps more reasonable generated output that we could consider. The reason we have had this disabled is because a blanket assumption that all CJS modules are in fact compiled ESM produces suboptimal output to fix a tiny percentage of modules/usage patterns.

developit avatar Dec 18 '20 20:12 developit

@developit for ts assets, @rollup/plugin-commonjs won't be applied to them. since the compilation process is almost fully relied on ts compiler, wonder if microbundle support ts to respect tsconfig.compilerOptions.esModuleInterop?

huozhi avatar Jan 13 '21 15:01 huozhi