feat(build): enable named esm module import on node.js >= 14 (#1872)

Co-authored-by: Kia King Ishii <kia.king.08@gmail.com>

package.json

@@ -3,6 +3,13 @@
   "version": "3.5.1",
   "description": "state management for Vue.js",
   "main": "dist/vuex.common.js",
+  "exports": {
+    ".": {
+      "require": "./dist/vuex.common.js",
+      "import": "./dist/vuex.mjs"
+    },
+    "./": "./"
+  },
   "module": "dist/vuex.esm.js",
   "unpkg": "dist/vuex.js",
   "jsdelivr": "dist/vuex.js",
@@ -21,11 +28,12 @@
     "build:main": "node scripts/build-main.js",
     "build:logger": "node scripts/build-logger.js",
     "lint": "eslint src test",
-    "test": "npm run lint && npm run test:types && npm run test:unit && npm run test:ssr && npm run test:e2e",
+    "test": "npm run lint && npm run test:types && npm run test:unit && npm run test:ssr && npm run test:e2e && npm run test:esm",
     "test:unit": "jest --testPathIgnorePatterns test/e2e",
     "test:e2e": "start-server-and-test dev http://localhost:8080 'jest --testPathIgnorePatterns test/unit'",
     "test:ssr": "cross-env VUE_ENV=server jest --testPathIgnorePatterns test/e2e",
     "test:types": "tsc -p types/test",
+    "test:esm": "node test/esm/esm-test.js",
     "coverage": "jest --testPathIgnorePatterns test/e2e --coverage",
     "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s",
     "release": "node scripts/release.js",

scripts/build.js

@@ -5,14 +5,18 @@ const { gzipSync } = require('zlib')
 const { compress } = require('brotli')
 
 async function run(config, files) {
-  await build(config)
+  await Promise.all([build(config), copy()])
   checkAllSizes(files)
 }
 
 async function build(config) {
   await execa('rollup', ['-c', config], { stdio: 'inherit' })
 }
 
+async function copy() {
+  await fs.copy('src/index.mjs', 'dist/vuex.mjs')
+}
+
 function checkAllSizes(files) {
   console.log()
   files.map((f) => checkSize(f))

src/index.mjs

@@ -0,0 +1,26 @@
+import Vuex from '../dist/vuex.common.js'
+
+const {
+  Store,
+  install,
+  version,
+  mapState,
+  mapMutations,
+  mapGetters,
+  mapActions,
+  createNamespacedHelpers,
+  createLogger
+} = Vuex
+
+export {
+  Vuex as default,
+  Store,
+  install,
+  version,
+  mapState,
+  mapMutations,
+  mapGetters,
+  mapActions,
+  createNamespacedHelpers,
+  createLogger
+}

test/esm/esm-import.mjs

@@ -0,0 +1,30 @@
+import assert from 'assert'
+
+import { createRequire } from 'module'
+
+import Vuex, {
+  Store,
+  install,
+  version,
+  mapState,
+  mapMutations,
+  mapGetters,
+  mapActions,
+  createNamespacedHelpers,
+  createLogger
+} from 'vuex'
+
+const require = createRequire(import.meta.url)
+
+const cjs = require('vuex')
+
+assert.equal(Vuex, cjs)
+assert.equal(Store, cjs.Store)
+assert.equal(install, cjs.install)
+assert.equal(version, cjs.version)
+assert.equal(mapState, cjs.mapState)
+assert.equal(mapMutations, cjs.mapMutations)
+assert.equal(mapGetters, cjs.mapGetters)
+assert.equal(mapActions, cjs.mapActions)
+assert.equal(createNamespacedHelpers, cjs.createNamespacedHelpers)
+assert.equal(createLogger, cjs.createLogger)

test/esm/esm-test.js

@@ -0,0 +1,8 @@
+// only test esm entry points on Node.14 or higher
+const [major] = process.versions.node.split('.')
+
+if (+major >= 14) {
+  (async function () {
+    await import('./esm-import.mjs')
+  })().catch(console.error)
+}