diff --git a/packages/xarc-app-dev/src/config/archetype.ts b/packages/xarc-app-dev/src/config/archetype.ts
index 3d6d779c5e..f953433090 100644
--- a/packages/xarc-app-dev/src/config/archetype.ts
+++ b/packages/xarc-app-dev/src/config/archetype.ts
@@ -2,51 +2,12 @@
 
 import { XarcOptions } from "./opt2/xarc-options";
 import { getDevArchetypeLegacy } from "./options";
-import { createGitIgnoreDir } from "../lib/utils";
-const Fs = require("fs");
 const _ = require("lodash");
 const getEnvProxy = require("./env-proxy");
-const Path = require("path");
+import { saveXarcOptions } from "../lib/utils";
 
 let cachedArchetype = null;
 
-function createElectrodeTmpDir(eTmpDir = ".etmp") {
-  createGitIgnoreDir(Path.resolve(eTmpDir), "Electrode tmp dir");
-}
-
-function jsonStringifyReplacer(key, value) {
-  if (value instanceof RegExp) {
-    return value.toString();
-  }
-  return value;
-}
-
-function saveArchetypeConfig(config) {
-  const filename = `${config.eTmpDir}/xarc-options.json`;
-  const copy = { ...config, pkg: undefined, devPkg: undefined };
-  let existStr;
-
-  try {
-    existStr = Fs.readFileSync(filename, "utf-8");
-  } catch (err) {
-    //
-  }
-
-  const str = JSON.stringify(copy, jsonStringifyReplacer, 2);
-  if (str !== existStr) {
-    try {
-      createElectrodeTmpDir(config.eTmpDir);
-
-      Fs.writeFileSync(filename, str);
-    } catch (err) {
-      console.error(
-        `Unable to save development options to ${filename} - this will cause other failures.\n`,
-        err
-      );
-    }
-  }
-}
-
 /**
  * Get development options
  *
@@ -82,7 +43,7 @@ module.exports = function getDevOptions(user: XarcOptions = {}) {
     addOnFeatures: undefined
   });
 
-  saveArchetypeConfig(legacy);
+  saveXarcOptions(legacy);
 
   cachedArchetype = legacy;
 
diff --git a/packages/xarc-app-dev/src/config/opt2/babel-options.ts b/packages/xarc-app-dev/src/config/opt2/babel-options.ts
index 10a31c7473..676c1c5053 100644
--- a/packages/xarc-app-dev/src/config/opt2/babel-options.ts
+++ b/packages/xarc-app-dev/src/config/opt2/babel-options.ts
@@ -61,6 +61,22 @@ export type BabelOptions = {
    */
   transformClassProps?: boolean | { loose: boolean };
 
+  /**
+   * List of RegExp to match files that should be included for transpiling.
+   *
+   * By default, files under node_modules are not transpiled.
+   *
+   * You can set this to control that.  ie: to compile everything under node_modules, use `[/node_modules/]`
+   */
+  includeRegExp?: RegExp[];
+
+  /**
+   * List of RegExp to match files that should not be transpiled by babel.
+   *
+   * This is checked after includeRegExp
+   */
+  excludeRegExp?: RegExp[];
+
   // DEPRECATE: looseClassProps?: boolean;
 
   // DEPRECATE:
diff --git a/packages/xarc-app-dev/src/lib/utils.ts b/packages/xarc-app-dev/src/lib/utils.ts
index bb7b33ab44..a337a1e20c 100644
--- a/packages/xarc-app-dev/src/lib/utils.ts
+++ b/packages/xarc-app-dev/src/lib/utils.ts
@@ -69,6 +69,24 @@ export function createGitIgnoreDir(dir, comment) {
   }
 }
 
+const regExpSig = "@xarc/__RegExp__@";
+
+export const jsonStringifier = (key, value) => {
+  if (value instanceof RegExp) {
+    return `${regExpSig}${value.toString()}`;
+  } else {
+    return value;
+  }
+};
+
+export const jsonParser = (key, value) => {
+  if (typeof value === "string" && value.startsWith(regExpSig)) {
+    return new RegExp(value.substr(regExpSig.length));
+  } else {
+    return value;
+  }
+};
+
 let cachedXarcOptions;
 
 export function loadXarcOptions(dir: string = process.cwd()) {
@@ -78,7 +96,7 @@ export function loadXarcOptions(dir: string = process.cwd()) {
   const filename = Path.join(dir, ".etmp/xarc-options.json");
   try {
     const data = Fs.readFileSync(filename, "utf-8");
-    return (cachedXarcOptions = JSON.parse(data));
+    return (cachedXarcOptions = JSON.parse(data, jsonParser));
   } catch (err) {
     // eslint-disable-next-line
     console.error(ck`
@@ -100,6 +118,36 @@ xarc's development code.
   }
 }
 
+function createElectrodeTmpDir(eTmpDir = ".etmp") {
+  createGitIgnoreDir(Path.resolve(eTmpDir), "Electrode tmp dir");
+}
+
+export function saveXarcOptions(config) {
+  const filename = `${config.eTmpDir}/xarc-options.json`;
+  const copy = { ...config, pkg: undefined, devPkg: undefined };
+  let existStr;
+
+  try {
+    existStr = Fs.readFileSync(filename, "utf-8");
+  } catch (err) {
+    //
+  }
+
+  const str = JSON.stringify(copy, jsonStringifier, 2);
+  if (str !== existStr) {
+    try {
+      createElectrodeTmpDir(config.eTmpDir);
+
+      Fs.writeFileSync(filename, str);
+    } catch (err) {
+      console.error(
+        `Unable to save development options to ${filename} - this will cause other failures.\n`,
+        err
+      );
+    }
+  }
+}
+
 export function detectCSSModule(xOptions) {
   const cssModuleSupport = _.get(xOptions, "webpack.cssModuleSupport", undefined);
   if (cssModuleSupport === undefined) {
diff --git a/packages/xarc-webpack/src/partials/babel.ts b/packages/xarc-webpack/src/partials/babel.ts
index 8e6350a25d..9eac4aebe9 100644
--- a/packages/xarc-webpack/src/partials/babel.ts
+++ b/packages/xarc-webpack/src/partials/babel.ts
@@ -5,16 +5,35 @@ const identity = require("lodash/identity");
 const assign = require("lodash/assign");
 const babelLoader = require.resolve("babel-loader");
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = function(options) {
   const xarcOptions = loadXarcOptions();
   const AppMode = xarcOptions.AppMode;
 
   const clientVendor = Path.join(AppMode.src.client, "vendor/");
-  const babelExclude = x => {
-    if (x.indexOf("node_modules") >= 0) return true;
-    if (x.indexOf(clientVendor) >= 0) return true;
+  const { includeRegExp, excludeRegExp } = xarcOptions.babel;
+
+  const babelExclude = (x: String) => {
+    if (includeRegExp && includeRegExp.find((r: RegExp) => x.match(r))) {
+      return false;
+    }
+
+    if (excludeRegExp && excludeRegExp.find((r: RegExp) => x.match(r))) {
+      return true;
+    }
+
+    if (x.indexOf("node_modules") >= 0) {
+      if (x.indexOf("~es2x~") >= 0 || x.indexOf("~esm~") >= 0) {
+        return false;
+      }
+      return true;
+    }
+
+    if (x.indexOf(clientVendor) >= 0) {
+      return true;
+    }
+
     return false;
   };
 
diff --git a/packages/xarc-webpack/src/partials/dev.ts b/packages/xarc-webpack/src/partials/dev.ts
index 8689d4b757..b628554ac6 100644
--- a/packages/xarc-webpack/src/partials/dev.ts
+++ b/packages/xarc-webpack/src/partials/dev.ts
@@ -3,7 +3,7 @@
 import * as Url from "url";
 // const MiniCssExtractPlugin = require("mini-css-extract-plugin");
 const webpackDevReporter = require("../util/webpack-dev-reporter");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 const HTTP_PORT = 80;
 
diff --git a/packages/xarc-webpack/src/partials/dll-entry.ts b/packages/xarc-webpack/src/partials/dll-entry.ts
index 36bb1560f0..1fdc0938d0 100644
--- a/packages/xarc-webpack/src/partials/dll-entry.ts
+++ b/packages/xarc-webpack/src/partials/dll-entry.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 import * as Path from "path";
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = () => {
   const xarcOptions = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/dll-reference.ts b/packages/xarc-webpack/src/partials/dll-reference.ts
index 909f1c0ad4..da2f60c13a 100644
--- a/packages/xarc-webpack/src/partials/dll-reference.ts
+++ b/packages/xarc-webpack/src/partials/dll-reference.ts
@@ -11,7 +11,7 @@ import * as fs from "fs";
 import * as Path from "path";
 import * as webpack from "webpack";
 const filterScanDir = require("filter-scan-dir");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 const logger = require("@xarc/app-dev/lib/logger");
 
 module.exports = function(options) {
diff --git a/packages/xarc-webpack/src/partials/entry.ts b/packages/xarc-webpack/src/partials/entry.ts
index 776abc60c3..53382cda8c 100644
--- a/packages/xarc-webpack/src/partials/entry.ts
+++ b/packages/xarc-webpack/src/partials/entry.ts
@@ -9,7 +9,7 @@ const optionalRequire = require("optional-require")(require);
 const chalk = require("chalk");
 const logger = require("@xarc/app-dev/lib/logger");
 const mkdirp = require("mkdirp");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 const DEV_HMR_DIR = ".__dev_hmr";
 
diff --git a/packages/xarc-webpack/src/partials/extract-style.ts b/packages/xarc-webpack/src/partials/extract-style.ts
index dc189e6f06..a82c3e1e7e 100644
--- a/packages/xarc-webpack/src/partials/extract-style.ts
+++ b/packages/xarc-webpack/src/partials/extract-style.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires, max-statements */
 import * as Path from "path";
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 const detectCssModule = require("../util/detect-css-module");
 
@@ -142,19 +142,13 @@ module.exports = function() {
     {
       _name: `extract-css`,
       test: /\.css$/,
-      use: [
-        miniCssExtractLoader(false),
-        ...getCssQueryUse(false)
-      ],
-      ...(enableCssModule && { exclude: cssModuleRegExp }),
+      use: [miniCssExtractLoader(false), ...getCssQueryUse(false)],
+      ...(enableCssModule && { exclude: cssModuleRegExp })
     },
     enableCssModule && {
       _name: `extract-css-modules`,
       test: /\.css$/,
-      use: [
-        miniCssExtractLoader(true),
-        ...getCssQueryUse(true)
-      ],
+      use: [miniCssExtractLoader(true), ...getCssQueryUse(true)],
       include: cssModuleRegExp
     }
   );
@@ -172,7 +166,7 @@ module.exports = function() {
           miniCssExtractLoader(false),
           ...getCssQueryUse(false).concat({ loader: sassLoader } as any)
         ],
-        ...(enableCssModule && { exclude: cssModuleRegExp }),
+        ...(enableCssModule && { exclude: cssModuleRegExp })
       },
       enableCssModule && {
         _name: `extract-css-modules-scss`,
@@ -198,7 +192,7 @@ module.exports = function() {
         _name: `extract-css-stylus`,
         test: /\.styl$/,
         use: [miniCssExtractLoader(false), ...getCssQueryUse(false).concat(stylusQuery)],
-        ...(enableCssModule && { exclude: cssModuleRegExp }),
+        ...(enableCssModule && { exclude: cssModuleRegExp })
       },
       enableCssModule && {
         _name: `extract-css-modules-stylus`,
@@ -221,7 +215,7 @@ module.exports = function() {
           miniCssExtractLoader(false),
           ...getCssQueryUse(false).concat({ loader: lessLoader } as any)
         ],
-        ...(enableCssModule && { exclude: cssModuleRegExp }),
+        ...(enableCssModule && { exclude: cssModuleRegExp })
       },
       enableCssModule && {
         _name: `extract-css-modules-less`,
diff --git a/packages/xarc-webpack/src/partials/fonts.ts b/packages/xarc-webpack/src/partials/fonts.ts
index 2522f42666..d99b443993 100644
--- a/packages/xarc-webpack/src/partials/fonts.ts
+++ b/packages/xarc-webpack/src/partials/fonts.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 import { xAppRequire } from "@xarc/app";
 
 module.exports = function() {
diff --git a/packages/xarc-webpack/src/partials/isomorphic.ts b/packages/xarc-webpack/src/partials/isomorphic.ts
index 13a86817ae..f418d252cb 100644
--- a/packages/xarc-webpack/src/partials/isomorphic.ts
+++ b/packages/xarc-webpack/src/partials/isomorphic.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 import { xAppRequire } from "@xarc/app";
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = function(opts) {
   const xarcOptions = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/loadable.ts b/packages/xarc-webpack/src/partials/loadable.ts
index 91fbeb0f4e..47533293ff 100644
--- a/packages/xarc-webpack/src/partials/loadable.ts
+++ b/packages/xarc-webpack/src/partials/loadable.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 import * as LoadablePlugin from "@loadable/webpack-plugin";
 
 module.exports = function() {
diff --git a/packages/xarc-webpack/src/partials/node.ts b/packages/xarc-webpack/src/partials/node.ts
index 9eade2079a..cf4a8e8343 100644
--- a/packages/xarc-webpack/src/partials/node.ts
+++ b/packages/xarc-webpack/src/partials/node.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 const logger = require("@xarc/app-dev/lib/logger");
 
 module.exports = function(options) {
diff --git a/packages/xarc-webpack/src/partials/output.ts b/packages/xarc-webpack/src/partials/output.ts
index ed92e091b9..3466217327 100644
--- a/packages/xarc-webpack/src/partials/output.ts
+++ b/packages/xarc-webpack/src/partials/output.ts
@@ -1,7 +1,7 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
 import * as Path from "path";
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = () => {
   const { babel } = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/prod-mode.ts b/packages/xarc-webpack/src/partials/prod-mode.ts
index 6f1b822e97..bcbeee1526 100644
--- a/packages/xarc-webpack/src/partials/prod-mode.ts
+++ b/packages/xarc-webpack/src/partials/prod-mode.ts
@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = function() {
   const xarcOptions = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/pwa.ts b/packages/xarc-webpack/src/partials/pwa.ts
index e7cc3bfffc..67bb742765 100644
--- a/packages/xarc-webpack/src/partials/pwa.ts
+++ b/packages/xarc-webpack/src/partials/pwa.ts
@@ -2,7 +2,7 @@
 
 import * as Path from "path";
 const requireAt = require("require-at");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 const assign = require("lodash/assign");
 const fileLoader = require.resolve("file-loader");
diff --git a/packages/xarc-webpack/src/partials/resolve-loader.ts b/packages/xarc-webpack/src/partials/resolve-loader.ts
index bce463f4b2..73c3d94ecd 100644
--- a/packages/xarc-webpack/src/partials/resolve-loader.ts
+++ b/packages/xarc-webpack/src/partials/resolve-loader.ts
@@ -4,7 +4,7 @@ import * as Path from "path";
 
 const identity = require("lodash/identity");
 const ModuleResolver = require("electrode-node-resolver/lib/webpack-plugin");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = () => {
   const xarcOptions = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/resolve.ts b/packages/xarc-webpack/src/partials/resolve.ts
index 23e2d10b39..7dd5756fe0 100644
--- a/packages/xarc-webpack/src/partials/resolve.ts
+++ b/packages/xarc-webpack/src/partials/resolve.ts
@@ -4,7 +4,7 @@ import * as Path from "path";
 
 const ModuleResolver = require("electrode-node-resolver/lib/webpack-plugin");
 const identity = require("lodash/identity");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = () => {
   const xarcOptions = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/stats.ts b/packages/xarc-webpack/src/partials/stats.ts
index dd28260b8f..63887507bc 100644
--- a/packages/xarc-webpack/src/partials/stats.ts
+++ b/packages/xarc-webpack/src/partials/stats.ts
@@ -8,7 +8,7 @@ import * as _ from "lodash";
 
 const mkdirp = require("mkdirp");
 const INDENT = 2;
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = function(opts) {
   const xarcOptions = loadXarcOptions();
diff --git a/packages/xarc-webpack/src/partials/subapp-chunks.ts b/packages/xarc-webpack/src/partials/subapp-chunks.ts
index 8df35f6ce9..0da7c5e3b6 100644
--- a/packages/xarc-webpack/src/partials/subapp-chunks.ts
+++ b/packages/xarc-webpack/src/partials/subapp-chunks.ts
@@ -3,7 +3,7 @@
 /* eslint-disable global-require, no-magic-numbers */
 
 import * as Crypto from "crypto";
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 const splitMap = {};
 
diff --git a/packages/xarc-webpack/src/util/custom-check.ts b/packages/xarc-webpack/src/util/custom-check.ts
index 4ed2ff902f..1b04180016 100644
--- a/packages/xarc-webpack/src/util/custom-check.ts
+++ b/packages/xarc-webpack/src/util/custom-check.ts
@@ -5,7 +5,7 @@
 import * as Fs from "fs";
 import * as Path from "path";
 
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 function useAppWebpackConfig() {
   return process.env.USE_APP_WEBPACK_CONFIG === "true";
diff --git a/packages/xarc-webpack/src/util/dll-util.ts b/packages/xarc-webpack/src/util/dll-util.ts
index 99e5891913..e5dbbe6dc0 100644
--- a/packages/xarc-webpack/src/util/dll-util.ts
+++ b/packages/xarc-webpack/src/util/dll-util.ts
@@ -22,7 +22,7 @@ import * as _ from "lodash";
 import * as Path from "path";
 
 const logger = require("@xarc/app-dev/lib/logger");
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 const mkdirp = require("mkdirp");
 const { devServerBaseUrl } = require("../util/webpack-dev-url");
 const requireAt = require("require-at");
diff --git a/packages/xarc-webpack/src/util/load-xarc-options.ts b/packages/xarc-webpack/src/util/load-xarc-options.ts
deleted file mode 100644
index ee0249de03..0000000000
--- a/packages/xarc-webpack/src/util/load-xarc-options.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/* eslint-disable @typescript-eslint/no-var-requires */
-
-const ck = require("chalker");
-const Path = require("path");
-const Fs = require("fs");
-
-let loaded;
-
-export function loadXarcOptions(dir: string = process.cwd()) {
-  if (loaded) {
-    return loaded;
-  }
-  dir = dir || process.cwd();
-  const filename = Path.join(dir, ".etmp/xarc-options.json");
-  try {
-    const data = Fs.readFileSync(filename, "utf-8");
-    return (loaded = JSON.parse(data));
-  } catch (err) {
-    // eslint-disable-next-line
-    console.error(ck`
-<red>ERROR</>: Electrode xarc fail to load <cyan>.etmp/xarc-options.json</> in
-dev mode.  This means you are trying to use something not through
-xarc's development tasks.
-
-full path: ${filename}
-
-Please run "clap setup-dev" once to initialize the file
-<cyan>.etmp/xarc-options.json</> before doing your thing that loads
-xarc's development code.
-`);
-    return (loaded = {
-      webpack: {},
-      babel: {},
-      options: {}
-    });
-  }
-}
diff --git a/packages/xarc-webpack/src/util/notify-bundle-valid.ts b/packages/xarc-webpack/src/util/notify-bundle-valid.ts
index 16e6b0fce4..53c29cd1d4 100644
--- a/packages/xarc-webpack/src/util/notify-bundle-valid.ts
+++ b/packages/xarc-webpack/src/util/notify-bundle-valid.ts
@@ -4,7 +4,7 @@
 
 import * as Fs from "fs";
 import * as Path from "path";
-import { loadXarcOptions } from "../util/load-xarc-options";
+import { loadXarcOptions } from "@xarc/app-dev/lib/utils";
 
 module.exports = function notifyBundleValid() {
   const archetype = loadXarcOptions();