Search for a .babelrc in the storybook config directory first, then t…

…he project root (#149) Closes #138, #139
storybookjs · Apr 26, 2016 · 75fbf63 · 75fbf63
1 parent a2f6761
commit 75fbf63
Show file tree

Hide file tree

Showing 3 changed files with 50 additions and 22 deletions.
diff --git a/dist/server/config.js b/dist/server/config.js
@@ -15,17 +15,11 @@ var _extends3 = _interopRequireDefault(_extends2);
 exports.default = function (baseConfig, configDir) {
   var config = baseConfig;
 
-  // if user has a .babelrc file in current directory
-  // use that to extend webpack configurations
-  if (_fs2.default.existsSync('./.babelrc')) {
-    var content = _fs2.default.readFileSync('./.babelrc', 'utf-8');
-    try {
-      var babelrc = _cjson2.default.parse(content);
-      config.module.loaders[0].query = babelrc;
-    } catch (e) {
-      logger.error('=> Error parsing .babelrc file: ' + e.message);
-      throw e;
-    }
+  // search for a .babelrc in the config directory, then the module root directory
+  // if found, use that to extend webpack configurations
+  var babelConfig = loadBabelConfig(_path2.default.resolve(configDir, '.babelrc')) || loadBabelConfig('.babelrc');
+  if (babelConfig) {
+    config.module.loaders[0].query = babelConfig;
   }
 
   // Check whether a config.js file exists inside the storybook
@@ -73,6 +67,23 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 // avoid ESLint errors
 var logger = console;
 
+// Tries to load a .babelrc and returns the parsed object if successful
+function loadBabelConfig(babelConfigPath) {
+  var config = void 0;
+  if (_fs2.default.existsSync(babelConfigPath)) {
+    var content = _fs2.default.readFileSync(babelConfigPath, 'utf-8');
+    try {
+      config = _cjson2.default.parse(content);
+      config.babelrc = false;
+      logger.info('=> Loading custom .babelrc');
+    } catch (e) {
+      logger.error('=> Error parsing .babelrc file: ' + e.message);
+      throw e;
+    }
+  }
+  return config;
+}
+
 // `baseConfig` is a webpack configuration bundled with storybook.
 // React Storybook will look in the `configDir` directory
 // (inside working directory) if a config path is not provided.
diff --git a/docs/configure_storybook.md b/docs/configure_storybook.md
@@ -193,6 +193,10 @@ module.exports = {
 
 We allow you to use almost all [Webpack configurations](https://webpack.github.io/docs/configuration.html). So, you can customize as you wish.
 
+## Custom Babel Config
+
+Storybook will first search for a `.babelrc` inside the storybook config directory, and then at your project's root. If it doesn't find either of these files, it will use its default configuration instead.
+
 ## Load Custom HTML Head Content
 
 Sometimes, we need to load custom DOM nodes inside the HTML `<head>` tag. For an example, this is how we can load TypeKit fonts with React Storybook.

diff --git a/src/server/config.js b/src/server/config.js
@@ -5,23 +5,36 @@ import cjson from 'cjson';
 // avoid ESLint errors
 const logger = console;
 
+// Tries to load a .babelrc and returns the parsed object if successful
+function loadBabelConfig(babelConfigPath) {
+  let config;
+  if (fs.existsSync(babelConfigPath)) {
+    const content = fs.readFileSync(babelConfigPath, 'utf-8');
+    try {
+      config = cjson.parse(content);
+      config.babelrc = false;
+      logger.info('=> Loading custom .babelrc');
+    } catch (e) {
+      logger.error(`=> Error parsing .babelrc file: ${e.message}`);
+      throw e;
+    }
+  }
+  return config;
+}
+
 // `baseConfig` is a webpack configuration bundled with storybook.
 // React Storybook will look in the `configDir` directory
 // (inside working directory) if a config path is not provided.
 export default function (baseConfig, configDir) {
   const config = baseConfig;
 
-  // if user has a .babelrc file in current directory
-  // use that to extend webpack configurations
-  if (fs.existsSync('./.babelrc')) {
-    const content = fs.readFileSync('./.babelrc', 'utf-8');
-    try {
-      const babelrc = cjson.parse(content);
-      config.module.loaders[0].query = babelrc;
-    } catch (e) {
-      logger.error(`=> Error parsing .babelrc file: ${e.message}`);
-      throw e;
-    }
+  // search for a .babelrc in the config directory, then the module root directory
+  // if found, use that to extend webpack configurations
+  const babelConfig =
+    loadBabelConfig(path.resolve(configDir, '.babelrc')) ||
+    loadBabelConfig('.babelrc');
+  if (babelConfig) {
+    config.module.loaders[0].query = babelConfig;
   }
 
   // Check whether a config.js file exists inside the storybook