chore: compact dist support

ant-design · Mar 28, 2020 · a4f35e5 · a4f35e5
1 parent 0174586
commit a4f35e5
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 53 deletions.
diff --git a/.antd-tools.config.js b/.antd-tools.config.js
@@ -3,6 +3,7 @@ const path = require('path');
 // eslint-disable-next-line import/no-extraneous-dependencies
 const packageInfo = require('./package.json');
 const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
 
 // We need compile additional content for antd user
 function finalizeCompile() {
@@ -49,35 +50,38 @@ function finalizeCompile() {
   }
 }
 
+function buildThemeFile(theme, vars) {
+  // Build less entry file: dist/antd.${theme}.less
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `antd.${theme}.less`),
+    `@import "../lib/style/${theme}.less";\n@import "../lib/style/components.less";`,
+  );
+
+  // eslint-disable-next-line
+  console.log(`Built a entry less file to dist/antd.${theme}.less`);
+
+  // Build ${theme}.js: dist/${theme}-theme.js, for less-loader
+
+  fs.writeFileSync(
+    path.join(process.cwd(), 'dist', `${theme}-theme.js`),
+    `module.exports = ${JSON.stringify(vars, null, 2)};`,
+  );
+
+  // eslint-disable-next-line
+  console.log(`Built a ${theme} theme js file to dist/${theme}-theme.js`);
+}
+
 function finalizeDist() {
   if (fs.existsSync(path.join(__dirname, './dist'))) {
     // Build less entry file: dist/antd.less
     fs.writeFileSync(
       path.join(process.cwd(), 'dist', 'antd.less'),
       '@import "../lib/style/index.less";\n@import "../lib/style/components.less";',
     );
-
     // eslint-disable-next-line
     console.log('Built a entry less file to dist/antd.less');
-
-    // Build less entry file: dist/antd.dark.less
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'antd.dark.less'),
-      '@import "../lib/style/dark.less";\n@import "../lib/style/components.less";',
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a entry less file to dist/antd.dark.less');
-
-    // Build dark.js: dist/dark-theme.js, for less-loader
-
-    fs.writeFileSync(
-      path.join(process.cwd(), 'dist', 'dark-theme.js'),
-      `module.exports = ${JSON.stringify(darkVars, null, 2)};`,
-    );
-
-    // eslint-disable-next-line
-    console.log('Built a dark theme js file to dist/dark-theme.js');
+    buildThemeFile('dark', darkVars);
+    buildThemeFile('compact', compactVars);
   }
 }
 

diff --git a/tests/dekko/dist.test.js b/tests/dekko/dist.test.js
@@ -12,6 +12,8 @@ $('dist')
   .hasFile('antd.less')
   .hasFile('antd.dark.less')
   .hasFile('antd.dark.css')
+  .hasFile('antd.compact.less')
+  .hasFile('antd.compact.css')
   .hasFile('dark-theme.js');
 
 // eslint-disable-next-line

diff --git a/webpack.config.js b/webpack.config.js
@@ -5,6 +5,7 @@ const PacktrackerPlugin = require('@packtracker/webpack-plugin');
 const IgnoreEmitPlugin = require('ignore-emit-webpack-plugin');
 const BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;
 const darkVars = require('./scripts/dark-vars');
+const compactVars = require('./scripts/compact-vars');
 
 const { webpack } = getWebpackConfig;
 
@@ -33,15 +34,29 @@ function externalMoment(config) {
   };
 }
 
-const webpackConfig = getWebpackConfig(false);
-const webpackDarkConfig = getWebpackConfig(false);
-if (process.env.RUN_ENV === 'PRODUCTION') {
-  webpackConfig.forEach(config => {
+function processWebpackThemeConfig(themeConfig, theme, vars) {
+  themeConfig.forEach(config => {
     ignoreMomentLocale(config);
     externalMoment(config);
-    addLocales(config);
-    // Reduce non-minified dist files size
-    config.optimization.usedExports = true;
+
+    // rename default entry to ${theme} entry
+    Object.keys(config.entry).forEach(entryName => {
+      config.entry[entryName.replace('antd', `antd.${theme}`)] = config.entry[entryName];
+      delete config.entry[entryName];
+    });
+
+    // apply ${theme} less variables
+    config.module.rules.forEach(rule => {
+      // filter less rule
+      if (rule.test instanceof RegExp && rule.test.test('.less')) {
+        rule.use[rule.use.length - 1].options.modifyVars = vars;
+      }
+    });
+
+    const themeReg = new RegExp(`${theme}(.min)?\\.js(\\.map)?$`);
+    // ignore emit ${theme} entry js & js.map file
+    config.plugins.push(new IgnoreEmitPlugin(themeReg));
+
     // skip codesandbox ci
     if (!process.env.CSB_REPO) {
       // https://docs.packtracker.io/uploading-your-webpack-stats/webpack-plugin
@@ -50,37 +65,23 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
           project_token: '30c6a021-96c0-4d67-8bd2-0d2fcbd8962b',
           upload: process.env.CI === 'true',
           fail_build: false,
-          exclude_assets: name => !['antd.min.js', 'antd.min.css'].includes(name),
-        }),
-        new BundleAnalyzerPlugin({
-          analyzerMode: 'static',
-          openAnalyzer: false,
+          exclude_assets: name => ![`antd.${theme}.min.js`, `antd.${theme}.min.css`].includes(name),
         }),
       );
     }
   });
+}
 
-  webpackDarkConfig.forEach(config => {
+const webpackConfig = getWebpackConfig(false);
+const webpackDarkConfig = getWebpackConfig(false);
+const webpackCompactConfig = getWebpackConfig(false);
+if (process.env.RUN_ENV === 'PRODUCTION') {
+  webpackConfig.forEach(config => {
     ignoreMomentLocale(config);
     externalMoment(config);
-
-    // rename default entry to dark entry
-    Object.keys(config.entry).forEach(entryName => {
-      config.entry[entryName.replace('antd', 'antd.dark')] = config.entry[entryName];
-      delete config.entry[entryName];
-    });
-
-    // apply dark less variables
-    config.module.rules.forEach(rule => {
-      // filter less rule
-      if (rule.test instanceof RegExp && rule.test.test('.less')) {
-        rule.use[rule.use.length - 1].options.modifyVars = darkVars;
-      }
-    });
-
-    // ignore emit dark entry js & js.map file
-    config.plugins.push(new IgnoreEmitPlugin(/dark(.min)?\.js(\.map)?$/));
-
+    addLocales(config);
+    // Reduce non-minified dist files size
+    config.optimization.usedExports = true;
     // skip codesandbox ci
     if (!process.env.CSB_REPO) {
       // https://docs.packtracker.io/uploading-your-webpack-stats/webpack-plugin
@@ -89,11 +90,18 @@ if (process.env.RUN_ENV === 'PRODUCTION') {
           project_token: '30c6a021-96c0-4d67-8bd2-0d2fcbd8962b',
           upload: process.env.CI === 'true',
           fail_build: false,
-          exclude_assets: name => !['antd.dark.min.js', 'antd.dark.min.css'].includes(name),
+          exclude_assets: name => !['antd.min.js', 'antd.min.css'].includes(name),
+        }),
+        new BundleAnalyzerPlugin({
+          analyzerMode: 'static',
+          openAnalyzer: false,
         }),
       );
     }
   });
+
+  processWebpackThemeConfig(webpackDarkConfig, 'dark', darkVars);
+  processWebpackThemeConfig(webpackCompactConfig, 'compact', compactVars);
 }
 
-module.exports = webpackConfig.concat(webpackDarkConfig);
+module.exports = [...webpackConfig, ...webpackDarkConfig, ...webpackCompactConfig];