From ac2a71876dcc4755766c168ed76aeeb0d8741173 Mon Sep 17 00:00:00 2001 From: Arunoda Susiripala Date: Mon, 26 Dec 2016 23:43:45 +0530 Subject: [PATCH] Add support for using .babelrc in the app root. (#493) * Add support for using .babelrc in the app root. * Update the README about the .babelrc usage. * Fix a typo. * Remove additional example usage. --- README.md | 26 ++++++------------- examples/with-custom-babel-config/.babelrc | 6 +++++ examples/with-custom-babel-config/README.md | 3 +++ .../with-custom-babel-config/next.config.js | 15 ----------- server/build/babel/index.js | 13 +++++----- server/build/webpack.js | 17 ++++++------ 6 files changed, 32 insertions(+), 48 deletions(-) create mode 100644 examples/with-custom-babel-config/.babelrc delete mode 100644 examples/with-custom-babel-config/next.config.js diff --git a/README.md b/README.md index 89651eeeac..4f9d7af286 100644 --- a/README.md +++ b/README.md @@ -455,29 +455,19 @@ module.exports = { ### Customizing babel config -In order to extend our usage of `babel`, you can define a function that extends its config via `next.config.js`. - -The following example config shows you how to use `babel-preset-stage-0` with your app. +In order to extend our usage of `babel`, you can simply define a `.babelrc` file in the root of your app. +If found, we'll use it. Here's an example `.babelrc` file: ```js -// This file is not going through babel transformation. -// So, we write it in vanilla JS -// (But you could use ES2015 features supported by your Node.js version) - -module.exports = { - // config is the set of options we pass to our babel-loaders's query option - babel: function (config, { dev }) { - // Add the stage-0 preset. - // Make sure to use 'require.resolve' otherwise we won't be able to find it. - config.presets.push(require.resolve('babel-preset-stage-0')) - - // Important: return the modified config - return config - } +{ + "presets": [ + "next/babel", + "stage-0" + ], } ``` -**Note:** Next.js uses Babel 6 out of the box, which doesn't support default `module.exports`. Every time you export a component, make sure you use the ES6 `export` syntax instead. +Although it's not required, you will need to add `next/babel` as a preset. That's the default preset we use for all Next.js apps. ## Production deployment diff --git a/examples/with-custom-babel-config/.babelrc b/examples/with-custom-babel-config/.babelrc new file mode 100644 index 0000000000..8071a05d1c --- /dev/null +++ b/examples/with-custom-babel-config/.babelrc @@ -0,0 +1,6 @@ +{ + "presets": [ + "next/babel", + "stage-0" + ], +} diff --git a/examples/with-custom-babel-config/README.md b/examples/with-custom-babel-config/README.md index 70872f8fcd..d37d851982 100644 --- a/examples/with-custom-babel-config/README.md +++ b/examples/with-custom-babel-config/README.md @@ -26,6 +26,9 @@ This example features: * An app using proposed [do expressions](https://babeljs.io/docs/plugins/transform-do-expressions/). * It uses babel-preset-stage-0, which allows us to use above JavaScript feature. +* It uses '.babelrc' file in the app directory to add above preset. + +> Most of the time, when writing a custom `.babelrc` file, you need to add `next/babel` as a preset. ## How to run it diff --git a/examples/with-custom-babel-config/next.config.js b/examples/with-custom-babel-config/next.config.js deleted file mode 100644 index 37f7d1f0ff..0000000000 --- a/examples/with-custom-babel-config/next.config.js +++ /dev/null @@ -1,15 +0,0 @@ -// This file is not going through babel transformation. -// So, we write it in vanilla JS -// (But you could use ES2015 features supported by your Node.js version) - -module.exports = { - // config is the set of options we pass to our babel-loaders's query option - babel: function (config) { - // Add the stage-0 preset. - // Make sure to use 'require.resolve' otherwise we won't be able to find it. - config.presets.push(require.resolve('babel-preset-stage-0')) - - // Important: return the modified config - return config - } -} diff --git a/server/build/babel/index.js b/server/build/babel/index.js index c6472d3393..965ad583e8 100644 --- a/server/build/babel/index.js +++ b/server/build/babel/index.js @@ -1,15 +1,14 @@ import { resolve, join, dirname } from 'path' +import { existsSync } from 'fs' import { readFile, writeFile } from 'mz/fs' import { transform } from 'babel-core' import chokidar from 'chokidar' import mkdirp from 'mkdirp-then' -import getConfig from '../../config' export default babel async function babel (dir, { dev = false } = {}) { dir = resolve(dir) - const config = getConfig('../') let src try { @@ -23,14 +22,14 @@ async function babel (dir, { dev = false } = {}) { } let babelOptions = { - babelrc: false, + babelrc: true, sourceMaps: dev ? 'inline' : false, - presets: [require.resolve('./preset')] + presets: [] } - if (config.babel) { - console.log('> Using "babel" config function defined in next.config.js.') - babelOptions = await config.babel(babelOptions, { dev }) + const hasBabelRc = existsSync(join(dir, '.babelrc')) + if (!hasBabelRc) { + babelOptions.presets.push(require.resolve('./preset')) } const { code } = transform(src, babelOptions) diff --git a/server/build/webpack.js b/server/build/webpack.js index fcafff1221..b1b61370ca 100644 --- a/server/build/webpack.js +++ b/server/build/webpack.js @@ -1,5 +1,6 @@ import { resolve, join } from 'path' import { createHash } from 'crypto' +import { existsSync } from 'fs' import webpack from 'webpack' import glob from 'glob-promise' import WriteFilePlugin from 'write-file-webpack-plugin' @@ -84,18 +85,18 @@ export default async function createCompiler (dir, { dev = false, quiet = false ) } - let mainBabelOptions = { - babelrc: false, + const mainBabelOptions = { + babelrc: true, cacheDirectory: true, sourceMaps: dev ? 'both' : false, - presets: [ - require.resolve('./babel/preset') - ] + presets: [] } - if (config.babel) { - console.log('> Using "babel" config function defined in next.config.js.') - mainBabelOptions = await config.babel(mainBabelOptions, { dev }) + const hasBabelRc = existsSync(join(dir, '.babelrc')) + if (hasBabelRc) { + console.log('> Using .babelrc defined in your app root') + } else { + mainBabelOptions.presets.push(require.resolve('./babel/preset')) } const loaders = (dev ? [{ -- GitLab