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.

Sign up for GitHub

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

Jump to bottom

refactor: Output ESM files w/ .mjs when appropriate #950

Merged
merged 6 commits into from
Apr 25, 2022
Merged

refactor: Output ESM files w/ .mjs when appropriate #950

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
4ecabb4
fix: Output ESM w/ .mjs ext when pkg type is cjs
rschristian Apr 25, 2022
51ecb40
docs: Adding changeset
rschristian Apr 25, 2022
1c9f1ed
Update README.md
rschristian Apr 25, 2022
1811e41
Update README.md
rschristian Apr 25, 2022
573fef2
chore: Add warning for new ESM output extension behavior
rschristian Apr 25, 2022
c9a7e90
Update src/index.js
rschristian Apr 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/clean-ducks-push.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'microbundle': minor
---

Microbundle will now output ESM using `.mjs` as the file extension when the package type is CJS
24 changes: 12 additions & 12 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -120,8 +120,8 @@ export default function (e, t, r) {
```jsonc
{
"main": "./dist/foo.umd.js", // legacy UMD output (for Node & CDN use)
"module": "./dist/foo.module.js", // legacy ES Modules output (for bundlers)
"exports": "./dist/foo.modern.js", // modern ES2017 output
"module": "./dist/foo.module.mjs", // legacy ES Modules output (for bundlers)
"exports": "./dist/foo.modern.mjs", // modern ES2017 output
"scripts": {
"build": "microbundle src/foo.js"
}
Expand All @@ -134,9 +134,9 @@ The `"exports"` field can also be an object for packages with multiple entry mod
{
"name": "foo",
"exports": {
".": "./dist/foo.modern.js", // import "foo" (the default)
"./lite": "./dist/lite.modern.js", // import "foo/lite"
"./full": "./dist/full.modern.js" // import "foo/full"
".": "./dist/foo.modern.mjs", // import "foo" (the default)
"./lite": "./dist/lite.modern.mjs", // import "foo/lite"
"./full": "./dist/full.modern.mjs" // import "foo/full"
},
"scripts": {
"build": "microbundle src/*.js" // build foo.js, lite.js and full.js
Expand All @@ -163,15 +163,15 @@ The filenames and paths for generated bundles in each format are defined by the

```jsonc
{
"source": "src/index.js", // input
"main": "dist/foo.js", // CommonJS output bundle
"umd:main": "dist/foo.umd.js", // UMD output bundle
"module": "dist/foo.m.js", // ES Modules output bundle
"source": "src/index.js", // input
"main": "dist/foo.js", // CommonJS output bundle
"umd:main": "dist/foo.umd.js", // UMD output bundle
"module": "dist/foo.mjs", // ES Modules output bundle
"exports": {
"require": "./dist/foo.js", // CommonJS output bundle
"default": "./dist/foo.modern.js", // Modern ES Modules output bundle
"require": "./dist/foo.js", // CommonJS output bundle
"default": "./dist/foo.modern.mjs", // Modern ES Modules output bundle
},
"types": "dist/foo.d.ts" // TypeScript typings directory
"types": "dist/foo.d.ts" // TypeScript typings directory
}
```

Expand Down
25 changes: 20 additions & 5 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import fs from 'fs';
import { resolve, relative, dirname, basename, extname } from 'path';
import camelCase from 'camelcase';
import escapeStringRegexp from 'escape-string-regexp';
import { blue, red } from 'kleur';
import { blue, yellow, red } from 'kleur';
import { map, series } from 'asyncro';
import glob from 'tiny-glob/sync';
import autoprefixer from 'autoprefixer';
Expand Down Expand Up @@ -281,6 +281,7 @@ function walk(exports, includeDefault) {
function getMain({ options, entry, format }) {
const { pkg } = options;
const pkgMain = options['pkg-main'];
const pkgTypeModule = pkg.type === 'module';

if (!pkgMain) {
return options.output;
Expand All @@ -300,18 +301,23 @@ function getMain({ options, entry, format }) {
mainsByFormat.es = replaceName(
pkg.module && !pkg.module.match(/src\//)
? pkg.module
: pkg['jsnext:main'] || 'x.esm.js',
: pkg['jsnext:main'] || pkgTypeModule
? 'x.esm.js'
: 'x.esm.mjs',
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think .m.js and .esm.js were both poor approximations of .mjs, and we should be able to drop the infix.

Suggested change
: 'x.esm.mjs',
: 'x.mjs',

Copy link
Collaborator Author

@rschristian rschristian Apr 25, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, though I wonder if that will confuse some.

For users who might not be super familiar with module formats, Microbundle is quite easy to understand given the current names: esm -> x.esm.js, umd -> x.umd.js, etc. esm -> x.mjs might be harder to follow.

Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's a reasonable thought, yeah. I could go either way on this.

mainNoExtension,
);

mainsByFormat.modern = replaceName(
(pkg.exports && walk(pkg.exports, pkg.type === 'module')) ||
(pkg.exports && walk(pkg.exports, pkgTypeModule)) ||
(pkg.syntax && pkg.syntax.esmodules) ||
pkg.esmodule ||
'x.modern.js',
pkgTypeModule
? 'x.modern.js'
: 'x.modern.mjs',
mainNoExtension,
);
mainsByFormat.cjs = replaceName(
pkg['cjs:main'] || (pkg.type && pkg.type === 'module' ? 'x.cjs' : 'x.js'),
pkg['cjs:main'] || (pkgTypeModule ? 'x.cjs' : 'x.js'),
mainNoExtension,
);
mainsByFormat.umd = replaceName(
Expand Down Expand Up @@ -439,6 +445,15 @@ function createConfig(options, entry, format, writeMeta) {
const outputDir = dirname(absMain);
const outputEntryFileName = basename(absMain);

// Warn about the (somewhat) breaking change in #950
if (format === 'es' && !pkg.module && outputEntryFileName.endsWith('.mjs')) {
stdout(
yellow(
'Warning: If "module" is not specified in your package.json, Microbundle will now output the ESM format with ".mjs" as the file extension in CJS packages. If this is not the desired behavior, please specify "module".',
rschristian marked this conversation as resolved.
Show resolved Hide resolved
),
);
}

developit marked this conversation as resolved.
Show resolved Hide resolved
let config = {
/** @type {import('rollup').InputOptions} */
inputOptions: {
Expand Down
Loading