Merge pull request #271 from leezng/feat/esm

feat: support esm

Author: leezng

.gitignore

@@ -3,6 +3,7 @@ node_modules/
 example-dist/
 dist/
 lib/
+esm/
 types/
 npm-debug.log*
 yarn-debug.log*

build/build.js

@@ -2,15 +2,19 @@ require('./check-versions')();
 
 process.env.NODE_ENV = 'production';
 
-const fs = require('fs');
-const path = require('path');
 const chalk = require('chalk');
 const webpack = require('webpack');
-const { spawn } = require('child_process');
 const webpackConfig = require('./webpack.prod.conf');
 
+const isEsm = process.env.ESM;
 const isExampleEnv = process.env.EXAMPLE_ENV;
 
+const successText = {
+  main: 'Build main sources complete.',
+  esm: 'Build esm sources complete.',
+  example: 'Build example page complete.',
+};
+
 webpack(webpackConfig, (err, stats) => {
   if (err) throw err;
 
@@ -29,7 +33,8 @@ webpack(webpackConfig, (err, stats) => {
     process.exit(1);
   }
 
-  console.log(chalk.cyan('Build sources complete.\n'));
+  const text = isExampleEnv ? successText.example : isEsm ? successText.esm : successText.main;
+  console.log(chalk.cyan(`${text}\n`));
 
   if (isExampleEnv) {
     console.log(
@@ -38,13 +43,5 @@ webpack(webpackConfig, (err, stats) => {
           "Opening index.html over file:// won't work.\n",
       ),
     );
-  } else {
-    const buildTypesProcess = spawn('npm', ['run', 'build:dts'], {
-      stdio: 'inherit',
-    });
-
-    buildTypesProcess.on('close', () => {
-      console.log(chalk.cyan('Build types(.d.ts) complete.\n'));
-    });
   }
 });

build/webpack.prod.conf.js

@@ -10,8 +10,9 @@ const HtmlWebpackPlugin = require('html-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin');
 
+const isEsm = process.env.ESM;
 const isExampleEnv = process.env.EXAMPLE_ENV;
-const distPath = '../lib';
+const distPath = isEsm ? '../esm' : '../lib';
 
 const env = process.env.NODE_ENV === 'testing' ? require('../config/test.env') : config.build.env;
 
@@ -32,21 +33,35 @@ const webpackConfig = merge(baseWebpackConfig, {
 });
 
 if (!isExampleEnv) {
-  webpackConfig.entry = {
-    'vue-json-pretty': './src/index.ts',
-  };
   webpackConfig.output = {
     path: path.resolve(__dirname, distPath),
     filename: `${distPath}/[name].js`,
-    globalObject: 'this',
-    library: 'VueJsonPretty',
-    libraryTarget: 'umd',
   };
+  if (isEsm) {
+    webpackConfig.entry = {
+      'vue-json-pretty': './src/index.ts',
+    };
+    webpackConfig.experiments = {
+      outputModule: true,
+    };
+    webpackConfig.output.library = { type: 'module' };
+    webpackConfig.output.chunkFormat = 'module';
+    webpackConfig.target = 'es2019';
+  } else {
+    webpackConfig.entry = {
+      'vue-json-pretty': './src/index.ts',
+    };
+    webpackConfig.output.globalObject = 'this';
+    webpackConfig.output.library = 'VueJsonPretty';
+    webpackConfig.output.libraryTarget = 'umd';
+  }
   webpackConfig.externals = {
     vue: {
       root: 'Vue',
-      commonjs: 'vue',
       commonjs2: 'vue',
+      commonjs: 'vue',
+      amd: 'vue',
+      module: 'vue',
     },
   };
   webpackConfig.plugins.push(

package.json

@@ -4,9 +4,12 @@
   "description": "A JSON tree view component that is easy to use and also supports data selection.",
   "author": "leezng <im.leezng@gmail.com>",
   "main": "lib/vue-json-pretty.js",
+  "module": "esm/vue-json-pretty.js",
   "scripts": {
     "dev": "node build/dev-server.js",
-    "build": "node build/build.js",
+    "build": "npm run build:main && npm run build:esm && npm run build:dts",
+    "build:main": "node build/build.js",
+    "build:esm": "cross-env ESM=true node build/build.js",
     "build:example": "cross-env EXAMPLE_ENV=true node build/build.js",
     "build:dts": "tsc --p tsconfig.dts.json && tsc-alias -p ./tsconfig.dts.json",
     "test": "cypress open",
@@ -91,6 +94,7 @@
   ],
   "files": [
     "lib",
+    "esm",
     "types"
   ],
   "peerDependencies": {