From e37573a0acae353c9719c2dbf1b16f2e27841cb6 Mon Sep 17 00:00:00 2001 From: leezng Date: Mon, 4 Mar 2024 22:42:49 +0800 Subject: [PATCH 1/3] feat: support esm --- build/webpack.prod.conf.js | 31 +++++++++++++++++++++++-------- package.json | 2 ++ 2 files changed, 25 insertions(+), 8 deletions(-) diff --git a/build/webpack.prod.conf.js b/build/webpack.prod.conf.js index 6067ec2..b1c81ff 100644 --- a/build/webpack.prod.conf.js +++ b/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( diff --git a/package.json b/package.json index 3336725..7b35be8 100644 --- a/package.json +++ b/package.json @@ -4,9 +4,11 @@ "description": "A JSON tree view component that is easy to use and also supports data selection.", "author": "leezng ", "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: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", From a32896a73b58c0e9d7cf69f962233e3903a4fc3d Mon Sep 17 00:00:00 2001 From: leezng Date: Mon, 4 Mar 2024 22:44:27 +0800 Subject: [PATCH 2/3] feat: use spawn to build esm --- .gitignore | 1 + build/build.js | 8 ++++++++ package.json | 1 + 3 files changed, 10 insertions(+) diff --git a/.gitignore b/.gitignore index 95eb21b..1a56824 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ node_modules/ example-dist/ dist/ lib/ +esm/ types/ npm-debug.log* yarn-debug.log* diff --git a/build/build.js b/build/build.js index ba556e8..804aad3 100644 --- a/build/build.js +++ b/build/build.js @@ -39,6 +39,14 @@ webpack(webpackConfig, (err, stats) => { ), ); } else { + const buildEsmProcess = spawn('npm', ['run', 'build:esm'], { + stdio: 'inherit', + }); + + buildEsmProcess.on('close', () => { + console.log(chalk.cyan('Build esm complete.\n')); + }); + const buildTypesProcess = spawn('npm', ['run', 'build:dts'], { stdio: 'inherit', }); diff --git a/package.json b/package.json index 7b35be8..8325362 100644 --- a/package.json +++ b/package.json @@ -93,6 +93,7 @@ ], "files": [ "lib", + "esm", "types" ], "peerDependencies": { From d35d855a0c6d030112af4427d049e53933a57aa8 Mon Sep 17 00:00:00 2001 From: leezng Date: Wed, 13 Mar 2024 22:00:44 +0800 Subject: [PATCH 3/3] feat: support esm --- build/build.js | 29 +++++++++-------------------- package.json | 3 ++- 2 files changed, 11 insertions(+), 21 deletions(-) diff --git a/build/build.js b/build/build.js index 804aad3..3fee5fa 100644 --- a/build/build.js +++ b/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,21 +43,5 @@ webpack(webpackConfig, (err, stats) => { "Opening index.html over file:// won't work.\n", ), ); - } else { - const buildEsmProcess = spawn('npm', ['run', 'build:esm'], { - stdio: 'inherit', - }); - - buildEsmProcess.on('close', () => { - console.log(chalk.cyan('Build esm complete.\n')); - }); - - const buildTypesProcess = spawn('npm', ['run', 'build:dts'], { - stdio: 'inherit', - }); - - buildTypesProcess.on('close', () => { - console.log(chalk.cyan('Build types(.d.ts) complete.\n')); - }); } }); diff --git a/package.json b/package.json index 8325362..e04cd07 100644 --- a/package.json +++ b/package.json @@ -7,7 +7,8 @@ "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",