build: use cjs/mjs extensions for cjs/esm builds (#1157)

Co-authored-by: Eduardo San Martin Morote <posva13@gmail.com>

Author: danielroe

docs/installation.md

@@ -6,7 +6,7 @@
 
 <!--email_off-->
 
-[Unpkg.com](https://unpkg.com) provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like `https://unpkg.com/vue-router@4.0.5/dist/vue-router.global.js`.
+[Unpkg.com](https://unpkg.com) provides npm-based CDN links. The above link will always point to the latest release on npm. You can also use a specific version/tag via URLs like `https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js`.
 
 <!--/email_off-->
 

docs/zh/installation.md

@@ -6,7 +6,7 @@
 
 <!--email_off-->
 
-[Unpkg.com](https://unpkg.com) 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 `https://unpkg.com/vue-router@3.0.0/dist/vue-router.js` 这样的 URL 来使用特定的版本或 Tag。
+[Unpkg.com](https://unpkg.com) 提供了基于 npm 的 CDN 链接。上述链接将始终指向 npm 上的最新版本。 你也可以通过像 `https://unpkg.com/vue-router@4.0.15/dist/vue-router.global.js` 这样的 URL 来使用特定的版本或 Tag。
 
 <!--/email_off-->
 

index.js

@@ -0,0 +1,7 @@
+'use strict'
+
+if (process.env.NODE_ENV === 'production') {
+  module.exports = require('./dist/vue-router.prod.cjs')
+} else {
+  module.exports = require('./dist/vue-router.cjs')
+}

package.json

@@ -1,11 +1,32 @@
 {
   "name": "vue-router",
   "version": "4.0.15",
-  "main": "dist/vue-router.cjs.js",
+  "main": "index.js",
   "unpkg": "dist/vue-router.global.js",
   "jsdelivr": "dist/vue-router.global.js",
-  "module": "dist/vue-router.esm-bundler.js",
+  "module": "dist/vue-router.mjs",
   "types": "dist/vue-router.d.ts",
+  "exports": {
+    ".": {
+      "browser": "./dist/vue-router.esm-browser.js",
+      "node": {
+        "import": {
+          "production": "./dist/vue-router.prod.cjs",
+          "development": "./dist/vue-router.mjs",
+          "default": "./dist/vue-router.mjs"
+        },
+        "require": {
+          "production": "./dist/vue-router.prod.cjs",
+          "development": "./dist/vue-router.cjs",
+          "default": "./index.js"
+        }
+      },
+      "import": "./dist/vue-router.mjs"
+    },
+    "./dist/*": "./dist/*",
+    "./vetur/*": "./vetur/*",
+    "./package.json": "./package.json"
+  },
   "sideEffects": false,
   "funding": "https://github.com/sponsors/posva",
   "license": "MIT",
@@ -18,7 +39,8 @@
   },
   "homepage": "https://github.com/vuejs/router#readme",
   "files": [
-    "dist/*.js",
+    "index.js",
+    "dist/*.{js,cjs,mjs}",
     "dist/vue-router.d.ts",
     "vetur/tags.json",
     "vetur/attributes.json",
@@ -28,7 +50,7 @@
     "dev": "vite --config playground/vite.config.js",
     "release": "bash scripts/release.sh",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 1",
-    "build": "rollup -c rollup.config.js",
+    "build": "rimraf dist && rollup -c rollup.config.js",
     "build:dts": "api-extractor run --local --verbose && tail -n +9 src/globalExtensions.ts >> dist/vue-router.d.ts",
     "build:playground": "vue-tsc --noEmit && vite build --config playground/vite.config.js",
     "build:e2e": "vue-tsc --noEmit && vite build --config e2e/vite.config.js",
@@ -104,6 +126,7 @@
     "nightwatch": "^1.7.11",
     "nightwatch-helpers": "^1.2.0",
     "prettier": "^2.4.1",
+    "rimraf": "^3.0.2",
     "rollup": "^2.68.0",
     "rollup-plugin-analyzer": "^4.0.0",
     "rollup-plugin-terser": "^7.0.2",

rollup.config.js

@@ -1,4 +1,5 @@
 import path from 'path'
+import { promises as fsp } from 'fs'
 import ts from 'rollup-plugin-typescript2'
 import replace from '@rollup/plugin-replace'
 import resolve from '@rollup/plugin-node-resolve'
@@ -17,47 +18,52 @@ const banner = `/*!
 let hasTSChecked = false
 
 const outputConfigs = {
-  // each file name has the format: `dist/${name}.${format}.js`
+  // each file name has the format: `dist/${name}.${format}.${ext}`
   // format being a key of this object
-  'esm-bundler': {
+  mjs: {
     file: pkg.module,
     format: `es`,
   },
   cjs: {
-    file: pkg.main,
+    file: 'dist/vue-router.cjs',
     format: `cjs`,
   },
   global: {
     file: pkg.unpkg,
     format: `iife`,
   },
-  esm: {
-    file: pkg.browser || pkg.module.replace('bundler', 'browser'),
+  browser: {
+    file: 'dist/vue-router.esm-browser.js',
     format: `es`,
   },
 }
 
-const allFormats = Object.keys(outputConfigs)
+const stubs = {
+  'dist/vue-router.cjs': 'vue-router.cjs.js',
+  'dist/vue-router.mjs': 'vue-router.esm-bundler.js',
+  'dist/vue-router.prod.cjs': 'vue-router.cjs.prod.js',
+}
+
+const packageBuilds = Object.keys(outputConfigs)
 // in vue-router there are not that many
-const packageFormats = allFormats
-const packageConfigs = packageFormats.map(format =>
-  createConfig(format, outputConfigs[format])
+const packageConfigs = packageBuilds.map(buildName =>
+  createConfig(buildName, outputConfigs[buildName])
 )
 
 // only add the production ready if we are bundling the options
-packageFormats.forEach(format => {
-  if (format === 'cjs') {
-    packageConfigs.push(createProductionConfig(format))
-  } else if (format === 'global') {
-    packageConfigs.push(createMinifiedConfig(format))
+packageBuilds.forEach(buildName => {
+  if (buildName === 'cjs') {
+    packageConfigs.push(createProductionConfig(buildName))
+  } else if (buildName === 'global') {
+    packageConfigs.push(createMinifiedConfig(buildName))
   }
 })
 
 export default packageConfigs
 
-function createConfig(format, output, plugins = []) {
+function createConfig(buildName, output, plugins = []) {
   if (!output) {
-    console.log(require('chalk').yellow(`invalid format: "${format}"`))
+    console.log(require('chalk').yellow(`invalid format: "${buildName}"`))
     process.exit(1)
   }
 
@@ -70,11 +76,11 @@ function createConfig(format, output, plugins = []) {
     // '@vue/devtools-api': 'VueDevtoolsApi',
   }
 
-  const isProductionBuild = /\.prod\.js$/.test(output.file)
-  const isGlobalBuild = format === 'global'
-  const isRawESMBuild = format === 'esm'
-  const isNodeBuild = format === 'cjs'
-  const isBundlerESMBuild = /esm-bundler/.test(format)
+  const isProductionBuild = /\.prod\.[cm]?js$/.test(output.file)
+  const isGlobalBuild = buildName === 'global'
+  const isRawESMBuild = buildName === 'browser'
+  const isNodeBuild = buildName === 'cjs'
+  const isBundlerESMBuild = buildName === 'mjs'
 
   if (isGlobalBuild) output.name = 'VueRouter'
 
@@ -122,6 +128,20 @@ function createConfig(format, output, plugins = []) {
       ),
       ...nodePlugins,
       ...plugins,
+      {
+        async writeBundle() {
+          const stub = stubs[output.file]
+          if (!stub) return
+
+          const contents =
+            buildName === 'cjs'
+              ? `module.exports = require('../${output.file}')`
+              : `export * from '../${output.file}'`
+
+          await fsp.writeFile(path.resolve(__dirname, `dist/${stub}`), contents)
+          console.log(`created stub ${require('chalk').bold(`dist/${stub}`)}`)
+        },
+      },
     ],
     output,
     // onwarn: (msg, warn) => {
@@ -174,8 +194,10 @@ function createReplacePlugin(
 }
 
 function createProductionConfig(format) {
+  const extension = format === 'cjs' ? 'cjs' : 'js'
+  const descriptor = format === 'cjs' ? '' : `.${format}`
   return createConfig(format, {
-    file: `dist/${name}.${format}.prod.js`,
+    file: `dist/${name}${descriptor}.prod.${extension}`,
     format: outputConfigs[format].format,
   })
 }