Code minify support with terser

.gitignore

@@ -2,6 +2,7 @@
 
 # compiled output
 dist/
+dist2/
 .tmp/
 .rpt2_cache/
 

.packerrc.json

@@ -1,7 +1,7 @@
 {
   "entry": "index.ts",
   "source": "src",
-  "dist": "dist",
+  "dist": "dist3",
   "tmp": ".tmp",
   "output": {
     "amd": {
@@ -10,7 +10,7 @@
     },
     "dependencyMapMode": "map-dependency",
     "esnext": false,
-    "es5": true,
+    "es5": false,
     "minBundle": false,
     "format": "cjs",
     "imageInlineLimit": 1000000,
@@ -86,7 +86,8 @@
       "validator/**",
       "path",
       "fs",
-      "child_process"
+      "child_process",
+      "terser"
     ],
     "globals": {},
     "mapExternals": false

assets/resources/dynamic/demo/build/index.html.hbs

@@ -19,7 +19,7 @@
         'react': 'node_modules/react/umd/react.production.min',
         'react-dom': 'node_modules/react-dom/umd/react-dom.production.min',
       {{/if}}
-        '{{amdModule}}': '{{distDir}}/bundle/{{projectName}}'
+        '{{amdModule}}': '{{distDir}}/bundle/{{projectName}}.{{format}}'
       }
     });
 
@@ -41,7 +41,7 @@
   <script src="../../node_modules/react/umd/react.production.min.js"></script>
   <script src="../../node_modules/react-dom/umd/react-dom.production.min.js"></script>
 {{/if}}
-  <script src="../../{{distDir}}/bundle/{{projectName}}.js"></script>
+  <script src="../../{{distDir}}/bundle/{{projectName}}.{{format}}.js"></script>
   <script type="application/javascript">
   {{#unless reactLib}}
     var main = new window.{{namespace}}.Main();
@@ -58,7 +58,7 @@
   <script src="../../node_modules/react/umd/react.production.min.js"></script>
   <script src="../../node_modules/react-dom/umd/react-dom.production.min.js"></script>
 {{/if}}
-  <script src="../../{{distDir}}/bundle/{{projectName}}.js"></script>
+  <script src="../../{{distDir}}/bundle/{{projectName}}.{{format}}.js"></script>
   <script>
   {{#if reactLib}}
     System.config({

assets/resources/dynamic/demo/build/index.js.hbs

@@ -1,4 +1,4 @@
-import { Main } from '../../{{distDir}}/bundle/{{projectName}}.js';
+import { Main } from '../../{{distDir}}/bundle/{{projectName}}.{{format}}.js';
 
 const main = new Main();
 console.log(main.getTemplate());

assets/resources/dynamic/demo/watch/index.html.hbs

@@ -15,11 +15,11 @@
     require.config({
       baseUrl: '.',
       paths: {
-        {{#if reactLib}}
-          'react': 'react.production.min',
-          'react-dom': 'react-dom.production.min',
-        {{/if}}
-        '{{amdModule}}': '{{projectName}}'
+      {{#if reactLib}}
+        'react': 'react.production.min',
+        'react-dom': 'react-dom.production.min',
+      {{/if}}
+        '{{amdModule}}': '{{projectName}}.{{format}}'
       }
     });
 
@@ -42,7 +42,7 @@
   <script src="react.min.js"></script>
   <script src="react-dom.min.js"></script>
 {{/if}}
-  <script src="{{projectName}}.js"></script>
+  <script src="{{projectName}}.{{format}}.js"></script>
   <script type="application/javascript">
   {{#unless reactLib}}
     var main = new window.{{namespace}}.Main();
@@ -59,7 +59,7 @@
   <script src="react.production.min.js"></script>
   <script src="react-dom.production.min.js"></script>
   {{/if}}
-  <script src="{{projectName}}.js"></script>
+  <script src="{{projectName}}.{{format}}.js"></script>
   <script>
   {{#if reactLib}}
     System.config({

assets/resources/dynamic/demo/watch/index.js.hbs

@@ -1,4 +1,4 @@
-import { Main } from '../../{{watchDir}}/{{projectName}}.js';
+import { Main } from '../../{{watchDir}}/{{projectName}}.{{format}}.js';
 
 const main = new Main();
 console.log(main.getTemplate());

assets/resources/dynamic/example/common/style/base.theme.variables.styl

@@ -1,3 +1,3 @@
-$background-colour = ghostwhite
-$font-colour = black
-$packer-tag-line-colour = #333333
+$background-colour = #5e5e63
+$font-colour = white
+$packer-tag-line-colour = white

assets/resources/dynamic/example/common/style/dark.theme.variables.styl

@@ -1,3 +1,3 @@
-$background-colour = #5e5e63
-$font-colour = white
-$packer-tag-line-colour = white
+$background-colour = ghostwhite
+$font-colour = black
+$packer-tag-line-colour = #333333

assets/resources/dynamic/packer/bin.hbs

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
 
-require('../bundle/{{packageName}}.js');
+require('../bundle/{{packageName}}.{{format}}.min.js');

package.json

@@ -31,6 +31,7 @@
   "homepage": "https://github.com/yohangz/packer-cli",
   "dependencies": {
     "@babel/cli": "^7.1.0",
+    "@babel/code-frame": "^7.0.0",
     "@babel/core": "^7.1.0",
     "@babel/polyfill": "^7.0.0",
     "autoprefixer": "^8.6.3",
@@ -54,7 +55,7 @@
     "rollup": "^0.67.0",
     "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-commonjs": "^9.1.3",
-    "rollup-plugin-filesize": "^2.0.0",
+    "rollup-plugin-filesize": "^5.0.1",
     "rollup-plugin-hbs": "^1.2.0",
     "rollup-plugin-ignore": "^1.0.3",
     "rollup-plugin-ignore-import": "^1.1.0",
@@ -74,6 +75,7 @@
     "schema-inspector": "^1.6.8",
     "stylelint": "^9.7.1",
     "stylus": "^0.54.5",
+    "terser": "^3.10.11",
     "through2": "^2.0.3",
     "tslib": "^1.9.3",
     "tslint": "^5.11.0",

src/common/logger.ts

@@ -25,7 +25,7 @@ export class Logger {
     return new Logger(taskName);
   }
 
-  private readonly taskName: string;
+  public readonly taskName: string;
 
   private constructor(taskName: string) {
     this.taskName = taskName ? `${chalk.green(taskName)} ` : '';

src/tasks/build-util.ts

@@ -2,6 +2,9 @@ import path from 'path';
 import handlebars from 'handlebars';
 import glob from 'glob-to-regexp';
 import chalk from 'chalk';
+import * as Terser from 'terser';
+
+import codeFrameColumns from '@babel/code-frame';
 
 import { rollup, RollupFileOptions } from 'rollup';
 import rollupIgnoreImport from 'rollup-plugin-ignore-import';
@@ -27,6 +30,7 @@ import { PackageConfig } from '../model/package-config';
 import { PackerConfig } from '../model/packer-config';
 import logger, { Logger } from '../common/logger';
 import { LogLevel } from '../model/log-level';
+import { writeFile } from './util';
 
 export const getBanner = (config: PackerConfig, packageJson: PackageConfig) => {
   if (config.license.banner) {
@@ -162,27 +166,82 @@ export const preBundlePlugins = (config: PackerConfig) => {
   ];
 };
 
+const bundleSizeLoggerPlugin = (taskName: string, type: string) => {
+  return rollupFilesize({
+    showMinifiedSize: false,
+    showBrotliSize: false,
+    render: (options: any, sourceBundle: any, { gzipSize, bundleSize }): string => {
+      const bundleFormatted = `bundle size: ${chalk.red(bundleSize)}`;
+      const gzippedFormatted = `gzipped size: ${chalk.red(gzipSize)}`;
+      return chalk.yellow(`${chalk.green(taskName)} ${type} ${bundleFormatted}, ${gzippedFormatted}`);
+    }
+  });
+};
+
 export const postBundlePlugins = (task: string, type: string) => {
   if (logger.level <= LogLevel.INFO) {
     return [
       rollupProgress(),
-      rollupFilesize({
-        render: (options: any, size: string, gzippedSize: string): string => {
-          return chalk.yellow(
-            `${chalk.green(task)} ${type} bundle size: ${chalk.red(size)}, gzipped size: ${chalk.red(gzippedSize)}`);
-        }
-      })
+      bundleSizeLoggerPlugin(task, type)
     ];
   }
 
   return [];
 };
 
-export const bundleBuild = async (config: RollupFileOptions, type: string, log: Logger): Promise<void> => {
+export const bundleBuild = async (config: PackerConfig, packageData: PackageConfig, bundleConfig: RollupFileOptions,
+                                  type: string, log: Logger): Promise<void> => {
   log.trace('%s bundle build start', type);
-  const bundle = await rollup(config);
-  await bundle.write(config.output);
+  const bundle = await rollup(bundleConfig);
+  const { code, map } = await bundle.write(bundleConfig.output);
   log.trace('%s bundle build end', type);
+
+  if (config.output.minBundle) {
+    log.trace('%s minified bundle build start', type);
+    const minFileDist = bundleConfig.output.file.replace('.js', '.min.js');
+    const minMapFileDist = minFileDist.concat('.map');
+    const minFileName = path.basename(minFileDist);
+    const minMapFileName = minFileName.concat('.map');
+
+    let minSourceMapConfig: any = {
+      content: map,
+      filename: minFileName
+    };
+
+    if (config.output.sourceMap === 'inline') {
+      minSourceMapConfig.url = 'inline';
+    } else if (config.output.sourceMap) {
+      minSourceMapConfig.url = minMapFileName;
+    } else {
+      minSourceMapConfig = undefined;
+    }
+
+    const minData = Terser.minify(code, {
+      sourceMap: minSourceMapConfig,
+      output: {
+        comments: /@preserve|@license|@cc_on/i
+      }
+    });
+    log.trace('%s minified bundle terser config\n%o', type, minData);
+
+    if (minData.error) {
+      const { message, line, col: column } = minData.error;
+      log.error('%s bundle min build failure \n%s', type,
+        codeFrameColumns(code, { start: { line, column } }, { message }));
+    } else {
+      await writeFile(minFileDist, minData.code);
+      if (minSourceMapConfig && minSourceMapConfig.url === minMapFileName) {
+        log.trace('%s minified bundle write source maps', type);
+        await writeFile(minMapFileDist, minData.map);
+      }
+
+      const task = log.taskName.replace(' ', '');
+      const sizeDetail = bundleSizeLoggerPlugin(task, `${type} minified`);
+      sizeDetail.ongenerate(null, { code:  minData.code });
+    }
+
+    log.trace('%s minified bundle build end', type);
+  }
 };
 
 export const externalFilter = (config: PackerConfig) => {

src/tasks/build.ts

@@ -54,20 +54,20 @@ export default function init() {
         targetPackage.bin = packageJson.bin;
       }
 
-      targetPackage.main = path.join('bundle', `${packageJson.name}.js`);
+      targetPackage.main = path.join('bundle', `${packageJson.name}.${config.output.format}.min.js`);
 
       if (config.compiler.scriptPreprocessor === 'typescript') {
         targetPackage.typings = 'index.d.ts';
       }
 
       if (config.output.es5) {
-        targetPackage.module = path.join('fesm5', `${packageJson.name}.js`);
-        targetPackage.fesm5 = path.join('fesm5', `${packageJson.name}.js`);
+        targetPackage.module = path.join('fesm5', `${packageJson.name}.esm.min.js`);
+        targetPackage.fesm5 = path.join('fesm5', `${packageJson.name}.esm.min.js`);
       }
 
       if (config.output.esnext) {
-        targetPackage.esnext = path.join('fesmnext', `${packageJson.name}.js`);
-        targetPackage.fesmnext = path.join('fesmnext', `${packageJson.name}.js`);
+        targetPackage.esnext = path.join('fesmnext', `${packageJson.name}.esm.min.js`);
+        targetPackage.fesmnext = path.join('fesmnext', `${packageJson.name}.esm.min.js`);
       }
 
       // Map dependencies to target package file
@@ -125,7 +125,8 @@ export default function init() {
           log.error('bin source missing: %s\n', e.stack || e.message);
         })
         .pipe(gulpHbsRuntime({
-          packageName: packageJson.name
+          packageName: packageJson.name,
+          format: config.output.format
         }, {
           rename: `${packageJson.name}.js`
         }))
@@ -171,7 +172,7 @@ export default function init() {
         external: externals,
         output: {
           amd: config.output.amd,
-          file: path.join(process.cwd(), config.dist, 'bundle', `${packageJson.name}.js`),
+          file: path.join(process.cwd(), config.dist, 'bundle', `${packageJson.name}.${config.output.format}.js`),
           format: config.output.format,
           globals: config.bundle.globals,
           name: config.output.namespace
@@ -186,43 +187,14 @@ export default function init() {
       });
 
       log.trace('flat bundle rollu6p config:\n%o', flatConfig);
-      buildTasks.push(bundleBuild(flatConfig, 'flat', log));
-
-      if (config.output.minBundle) {
-        // minified flat bundle.
-        const minifiedFlatConfig: RollupFileOptions = merge({}, baseConfig, {
-          external: externals,
-          output: {
-            amd: config.output.amd,
-            file: path.join(process.cwd(), config.dist, 'bundle', `${packageJson.name}.min.js`),
-            format: config.output.format,
-            globals: config.bundle.globals,
-            name: config.output.namespace
-          },
-          plugins: [
-            rollupStyleBuildPlugin(config, packageJson, false, true, true),
-            ...preBundlePlugins(config),
-            ...resolvePlugins(config),
-            ...buildPlugin('bundle', false, true, config, typescript),
-            rollupUglify({
-              output: {
-                comments: /@preserve|@license/
-              }
-            }),
-            ...postBundlePlugins('[build:bundle]', 'flat minified')
-          ]
-        });
-
-        log.trace('flat minified bundle rollup config:\n%o', minifiedFlatConfig);
-        buildTasks.push(bundleBuild(minifiedFlatConfig, 'flat minified', log));
-      }
+      buildTasks.push(bundleBuild(config, packageJson, flatConfig, 'flat', log));
 
       if (config.output.es5) {
         // FESM+ES5 flat module bundle.
         const es5config: RollupFileOptions = merge({}, baseConfig, {
           external: externalFilter(config),
           output: {
-            file: path.join(process.cwd(), config.dist, 'fesm5', `${packageJson.name}.js`),
+            file: path.join(process.cwd(), config.dist, 'fesm5', `${packageJson.name}.esm.js`),
             format: 'esm' as ModuleFormat
           },
           plugins: [
@@ -235,15 +207,15 @@ export default function init() {
         });
 
         log.trace('es5 bundle rollup config:\n%o', es5config);
-        buildTasks.push(bundleBuild(es5config, 'es5', log));
+        buildTasks.push(bundleBuild(config,  packageJson, es5config, 'es5', log));
       }
 
       if (config.output.esnext) {
         // FESM+ESNEXT flat module bundle.
         const esnextConfig: RollupFileOptions = merge({}, baseConfig, {
           external: externalFilter(config),
           output: {
-            file: path.join(process.cwd(), config.dist, 'fesmnext', `${packageJson.name}.js`),
+            file: path.join(process.cwd(), config.dist, 'fesmnext', `${packageJson.name}.esm.js`),
             format: 'esm' as ModuleFormat
           },
           plugins: [
@@ -256,7 +228,7 @@ export default function init() {
         });
 
         log.trace('esnext bundle rollup config:\n%o', esnextConfig);
-        buildTasks.push(bundleBuild(esnextConfig, 'esnext', log));
+        buildTasks.push(bundleBuild(config,  packageJson, esnextConfig, 'esnext', log));
       }
 
       if (config.compiler.concurrentBuild) {

src/tasks/generate-util.ts

@@ -492,6 +492,7 @@ export const demoCopy = (packerOptions: PackerOptions, packerConfig: PackerConfi
     require: isAmd,
     iife: isIife,
     system: isSystem,
+    format: packerConfig.output.format,
     amdModule: packerConfig.output.amd.id,
     reactLib: packerOptions.reactLib
   };