feat: added options for umd, cjs, es modules

Added option to choose UMD or CJS, and option to disable ES module build

Author: epranka

cli.js

@@ -31,6 +31,8 @@ cli
     "-s, --silent",
     "Silent mode. Create package without user interaction"
   )
+  .option("--umd <GlobalName>", "Build UMD module with <GlobalName>")
+  .option("--no-es", "Don't build ES Module")
   .option("--no-travis", "Don't use travis ci.")
   .option("--no-tests", "Don't use tests")
   .option("--no-semantic-release", "Don't use semantic release")
@@ -58,4 +60,4 @@ cli.help();
 
 cli.version(version);
 
-cli.parse();
+global["parsedArgs"] = cli.parse();

package.json

@@ -48,6 +48,7 @@
     "@semantic-release/git": "^7.0.18",
     "@semantic-release/release-notes-generator": "^7.3.4",
     "cz-conventional-changelog": "^3.0.2",
+    "js-beautify": "^1.10.2",
     "semantic-release": "^15.13.31"
   },
   "config": {

prompts.js

@@ -1,11 +1,14 @@
 const getRepositoryURL = require("./utils/repository");
 const { random } = require("superb");
 
-const args = process.argv;
-const useTravis = !args.includes("--no-travis");
-const useTests = !args.includes("--no-tests");
-const useSemanticRelease = !args.includes("--no-semantic-release");
-const useNPM = args.includes("--npm");
+const { options } = global["parsedArgs"];
+const umdBuild = !!options.umd;
+const umdName = options.umd;
+const esBuild = options.es;
+const useTravis = options.travis;
+const useTests = options.tests;
+const useSemanticRelease = options["semantic-release"];
+const useNPM = options["npm"];
 
 module.exports = [
   {
@@ -28,6 +31,28 @@ module.exports = [
     type: "list",
     default: useNPM ? "npm" : "yarn"
   },
+  {
+    name: "umd",
+    message: "Build to UMD module for browsers (CommonJS is default) ?",
+    type: "confirm",
+    default: umdBuild
+  },
+  {
+    name: "umd_name",
+    message:
+      "What is a global name of your package in browser (e.g. React, ReactDOM) ?",
+    default: umdName,
+    when: answers => {
+      if (answers["umd"]) return true;
+      return false;
+    }
+  },
+  {
+    name: "es",
+    message: "Build to ES Module ?",
+    type: "confirm",
+    default: esBuild
+  },
   {
     name: "tests",
     message: "Use unit tests ?",

saofile.js

@@ -2,6 +2,7 @@ const spawn = require("cross-spawn");
 const validate = require("validate-npm-package-name");
 const serializePackage = require("./utils/serializePackage");
 const serializeTSConfig = require("./utils/serializeTSConfig");
+const serializeRollupConfig = require("./utils/serializeRollupConfig");
 const prompts = require("./prompts");
 
 module.exports = {
@@ -35,7 +36,6 @@ module.exports = {
       description: this.answers.description,
       version: "0.0.1",
       main: "lib/index.js",
-      module: "lib/index.es.js",
       types: "lib/index.d.ts",
       files: ["lib"],
       publishConfig: { access: "public" },
@@ -76,6 +76,61 @@ module.exports = {
       peerDependencies: [{ react: "*" }, { "react-dom": "*" }]
     };
 
+    const rollupConfig = {
+      input: "./src/index.tsx",
+      output: [],
+      plugins: [
+        `progress({clearLines: false})`,
+        `del({targets: [
+          "lib/*"
+        ]})`,
+        `commonjs({
+          namedExports: {}
+        })`,
+        `typescript()`,
+        `minify()`,
+        `cleanup()`
+      ],
+      external: [
+        "...Object.keys(pkg.dependencies || {})",
+        "...Object.keys(pkg.peerDependencies || {})"
+      ]
+    };
+
+    if (this.answers.umd) {
+      if (!this.answers.umd_name || !this.answers.umd_name.trim()) {
+        console.error(
+          this
+            .chalk`{red No global UMD name defined while UMD module build is enabled}`
+        );
+        process.exit(1);
+      }
+      const umdOutput = `{
+        file: pkg.main,
+        format: "umd",
+        name: "${this.answers.umd_name}",
+        globals: {
+          react: "React"
+        }
+      }`;
+      rollupConfig.output.push(umdOutput);
+    } else {
+      const cjsOutput = `{
+        file: pkg.main,
+        format: "cjs"
+      }`;
+      rollupConfig.output.push(cjsOutput);
+    }
+
+    if (this.answers.es) {
+      package.module = "lib/index.es.js";
+      const esOutput = `{
+        file: pkg.module,
+        format: "es"
+      }`;
+      rollupConfig.output.push(esOutput);
+    }
+
     if (this.answers.tests) {
       tsconfig.includes.push("./__tests__");
       package.scripts.push({ test: "jest" });
@@ -148,6 +203,7 @@ module.exports = {
     return {
       tsconfig: serializeTSConfig(tsconfig),
       package: serializePackage(package),
+      rollupConfig: serializeRollupConfig(rollupConfig),
       pmRun
     };
   },

templates/rollup_config_js

@@ -1,37 +1 @@
-import typescript from "rollup-plugin-typescript2";
-import commonjs from "rollup-plugin-commonjs";
-import progress from "rollup-plugin-progress";
-import minify from "rollup-plugin-babel-minify";
-import cleanup from "rollup-plugin-cleanup";
-import del from "rollup-plugin-delete";
-import pkg from "./package.json";
-
-export default {
-  input: "./src/index.tsx",
-  output: [
-    {
-      file: pkg.main,
-      format: "cjs"
-    },
-    {
-      file: pkg.module,
-      format: "es"
-    }
-  ],
-  plugins: [
-    progress({ clearLine: false }),
-    del({
-      targets: ["lib/*"]
-    }),
-    commonjs({
-      namedExports: {}
-    }),
-    typescript(),
-    minify(),
-    cleanup()
-  ],
-  external: [
-    ...Object.keys(pkg.dependencies || {}),
-    ...Object.keys(pkg.peerDependencies || {})
-  ]
-};
+<%- rollupConfig %>

utils/serializeRollupConfig.js

@@ -0,0 +1,35 @@
+const beautify = require("js-beautify").js;
+
+const serializeRollupConfig = rollupConfig => {
+  const rollupResult = `
+    import typescript from "rollup-plugin-typescript2";
+    import commonjs from "rollup-plugin-commonjs";
+    import progress from "rollup-plugin-progress";
+    import minify from "rollup-plugin-babel-minify";
+    import cleanup from "rollup-plugin-cleanup";
+    import del from "rollup-plugin-delete";
+    import pkg from "./package.json";
+
+    export default {
+        input: ${JSON.stringify(rollupConfig.input)},
+        output: [
+            ${rollupConfig.output.join(",\n")}
+        ],
+        plugins: [
+            ${rollupConfig.plugins.join(",\n")}
+        ],
+        external: [
+            ${rollupConfig.external.join(",\n")}
+        ]
+    }
+  `;
+
+  const formatted = beautify(rollupResult, {
+    indent_with_tabs: true,
+    indent_size: 4
+  });
+
+  return formatted;
+};
+
+module.exports = serializeRollupConfig;

yarn.lock

@@ -1043,7 +1043,7 @@ combined-stream@^1.0.6, combined-stream@~1.0.6:
   dependencies:
     delayed-stream "~1.0.0"
 
-commander@~2.20.3:
+commander@^2.19.0, commander@~2.20.3:
   version "2.20.3"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.3.tgz#fd485e84c03eb4881c20722ba48035e8531aeb33"
   integrity sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==
@@ -1608,6 +1608,16 @@ editor@~1.0.0:
   resolved "https://registry.yarnpkg.com/editor/-/editor-1.0.0.tgz#60c7f87bd62bcc6a894fa8ccd6afb7823a24f742"
   integrity sha1-YMf4e9YrzGqJT6jM1q+3gjok90I=
 
+editorconfig@^0.15.3:
+  version "0.15.3"
+  resolved "https://registry.yarnpkg.com/editorconfig/-/editorconfig-0.15.3.tgz#bef84c4e75fb8dcb0ce5cee8efd51c15999befc5"
+  integrity sha512-M9wIMFx96vq0R4F+gRpY3o2exzb8hEj/n9S8unZtHSvYjibBp/iMufSzvmOcV/laG0ZtuTVGtiJggPOSW2r93g==
+  dependencies:
+    commander "^2.19.0"
+    lru-cache "^4.1.5"
+    semver "^5.6.0"
+    sigmund "^1.0.1"
+
 ejs@^2.5.7:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
@@ -3026,6 +3036,17 @@ joycon@^2.1.2:
   resolved "https://registry.yarnpkg.com/joycon/-/joycon-2.2.5.tgz#8d4cf4cbb2544d7b7583c216fcdfec19f6be1615"
   integrity sha512-YqvUxoOcVPnCp0VU1/56f+iKSdvIRJYPznH22BdXV3xMk75SFXhWeJkZ8C9XxUWt1b5x2X1SxuFygW1U0FmkEQ==
 
+js-beautify@^1.10.2:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/js-beautify/-/js-beautify-1.10.2.tgz#88c9099cd6559402b124cfab18754936f8a7b178"
+  integrity sha512-ZtBYyNUYJIsBWERnQP0rPN9KjkrDfJcMjuVGcvXOUJrD1zmOGwhRwQ4msG+HJ+Ni/FA7+sRQEMYVzdTQDvnzvQ==
+  dependencies:
+    config-chain "^1.1.12"
+    editorconfig "^0.15.3"
+    glob "^7.1.3"
+    mkdirp "~0.5.1"
+    nopt "~4.0.1"
+
 js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -3463,7 +3484,7 @@ lowercase-keys@^1.0.0:
   resolved "https://registry.yarnpkg.com/lowercase-keys/-/lowercase-keys-1.0.1.tgz#6f9e30b47084d971a7c820ff15a6c5167b74c26f"
   integrity sha512-G2Lj61tXDnVFFOi8VZds+SoQjtQC3dgokKdDG2mTm1tx4m50NUHBOZSBwQQHyy0V12A0JTG4icfZQH+xPyh8VA==
 
-lru-cache@^4.0.1:
+lru-cache@^4.0.1, lru-cache@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -5225,6 +5246,11 @@ shelljs@0.7.6:
     interpret "^1.0.0"
     rechoir "^0.6.2"
 
+sigmund@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/sigmund/-/sigmund-1.0.1.tgz#3ff21f198cad2175f9f3b781853fd94d0d19b590"
+  integrity sha1-P/IfGYytIXX587eBhT/ZTQ0ZtZA=
+
 signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"