From c1d198a96de6c64b3443b5b51e9fa50234cbe4bd Mon Sep 17 00:00:00 2001 From: Seth Kinast Date: Mon, 25 Apr 2016 19:06:48 -0700 Subject: [PATCH] Search for a .babelrc in the storybook config directory first, then the project root Closes #138, #139 --- dist/server/config.js | 33 ++++++++++++++++++++++----------- docs/configure_storybook.md | 4 ++++ src/server/config.js | 35 ++++++++++++++++++++++++----------- 3 files changed, 50 insertions(+), 22 deletions(-) diff --git a/dist/server/config.js b/dist/server/config.js index 7f55f32c4bd7..6eea19167849 100644 --- 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. \ No newline at end of file diff --git a/docs/configure_storybook.md b/docs/configure_storybook.md index 9a5ff55f478b..9d2dec2dcad9 100644 --- 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 `` 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 index 1393904998dd..cbe5e5f86a17 100644 --- 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