README.md 1.5 KB
Newer Older
1
[![Deploy to now](https://deploy.now.sh/static/button.svg)](https://deploy.now.sh/?repo=https://github.com/zeit/next.js/tree/master/examples/with-custom-babel-config)
2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

# Using a custom Babel config

## How to use

### Using `create-next-app`

Execute [`create-next-app`](https://github.com/segmentio/create-next-app) with [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) or [npx](https://github.com/zkat/npx#readme) to bootstrap the example:

```bash
npx create-next-app --example with-custom-babel-config with-custom-babel-config-app
# or
yarn create next-app --example with-custom-babel-config with-custom-babel-config-app
```

### Download manually
18

S
Sébastien Dubois 已提交
19
Download the example [or clone the repo](https://github.com/zeit/next.js):
D
Dan Zajdband 已提交
20 21

```bash
22
curl https://codeload.github.com/zeit/next.js/tar.gz/canary | tar -xz --strip=2 next.js-canary/examples/with-custom-babel-config
D
Dan Zajdband 已提交
23 24 25 26 27 28 29 30
cd with-custom-babel-config
```

Install it and run:

```bash
npm install
npm run dev
31 32 33
# or
yarn
yarn dev
D
Dan Zajdband 已提交
34 35 36 37 38 39 40 41 42 43
```

Deploy it to the cloud with [now](https://zeit.co/now) ([download](https://zeit.co/download))

```bash
now
```

## The idea behind the example

44 45 46 47
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.
48 49 50
* 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.