chore: bundle esm output (#5772)

antd-tools/getWebpackConfig.js

@@ -22,7 +22,7 @@ const imageOptions = {
   limit: 10000,
 };
 
-function getWebpackConfig(modules) {
+function getWebpackConfig(modules, esm = false) {
   const pkg = require(getProjectPath('package.json'));
   const babelConfig = require('./getBabelCommonConfig')(modules || false);
 
@@ -222,10 +222,10 @@ All rights reserved.
         commonjs2: 'vue',
         commonjs: 'vue',
         amd: 'vue',
+        module: 'vue',
       },
     };
-    config.output.library = distFileBaseName;
+
-    config.output.libraryTarget = 'umd';
     config.optimization = {
       minimizer: [
         new TerserPlugin({
@@ -236,11 +236,27 @@ All rights reserved.
         }),
       ],
     };
+    if (esm) {
+      config.experiments = {
+        ...config.experiments,
+        outputModule: true,
+      };
+      config.output.chunkFormat = 'module';
+      config.output.library = {
+        type: 'module',
+      };
+      config.target = 'es2019';
+    } else {
+      config.output.libraryTarget = 'umd';
+      config.output.library = distFileBaseName;
+    }
+
+    const entryName = esm ? `${distFileBaseName}.esm` : distFileBaseName;
 
     // Development
     const uncompressedConfig = merge({}, config, {
       entry: {
-        [distFileBaseName]: entry,
+        [entryName]: entry,
       },
       mode: 'development',
       plugins: [
@@ -253,7 +269,7 @@ All rights reserved.
     // Production
     const prodConfig = merge({}, config, {
       entry: {
-        [`${distFileBaseName}.min`]: entry,
+        [`${entryName}.min`]: entry,
       },
       mode: 'production',
       plugins: [

index.js

@@ -1,3 +1,3 @@
-require('./index-style-only');
+import './index-style-only';
 
-module.exports = require('./components');
+export * from './components';

package.json

@@ -243,6 +243,7 @@
     "ts-loader": "^9.1.0",
     "typescript": "~4.5.2",
     "umi-request": "^1.3.5",
+    "unified": "9.2.2",
     "url-loader": "^3.0.0",
     "vite": "^2.9.13",
     "vue": "^3.2.0",

webpack.build.conf.js

@@ -46,6 +46,7 @@ function externalDayjs(config) {
     commonjs2: 'dayjs',
     commonjs: 'dayjs',
     amd: 'dayjs',
+    module: 'dayjs',
   };
 }
 
@@ -113,6 +114,7 @@ const legacyEntryVars = {
   'root-entry-name': 'default',
 };
 const webpackConfig = injectLessVariables(getWebpackConfig(false), legacyEntryVars);
+const webpackESMConfig = injectLessVariables(getWebpackConfig(false, true), legacyEntryVars);
 const webpackDarkConfig = injectLessVariables(getWebpackConfig(false), legacyEntryVars);
 const webpackCompactConfig = injectLessVariables(getWebpackConfig(false), legacyEntryVars);
 const webpackVariableConfig = injectLessVariables(getWebpackConfig(false), {
@@ -161,6 +163,7 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
 
 module.exports = [
   ...webpackConfig,
+  ...webpackESMConfig,
   ...webpackDarkConfig,
   ...webpackCompactConfig,
   ...webpackVariableConfig,