Skip to content

Commit

Permalink
fix($docs): update babel-config.md to have new babelServer: true opti…
Browse files Browse the repository at this point in the history
…on for universal-import plugin
  • Loading branch information
faceyspacey authored Aug 14, 2017
1 parent a195fe8 commit c92f864
Showing 1 changed file with 6 additions and 5 deletions.
11 changes: 6 additions & 5 deletions docs/babel-config.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,16 +6,17 @@ When using babel for the server, you'll have slightly different webpack config a
```
{
"presets": ["es2015", "react", "stage-2"],
"plugins": ["syntax-dynamic-import", "universal-import", [
"plugins": ["syntax-dynamic-import", [
"universal-import", {
"babelServer": true
}], [
"css-modules-transform", {
"generateScopedName": "[name]__[local]--[hash:base64:5]"
}
]]
}
```

- **[babel-plugin-syntax-dynamic-import](https://github.com/babel/babel/tree/master/packages/babel-plugin-syntax-dynamic-import)** is needed so `import()` doesn't break the Babel compilation.

- For CSS Modules, since you can't rely on webpack anymore to handle importing CSS, we recommend using
[babel-plugin-css-modules-transform](https://github.com/michalkvasnicak/babel-plugin-css-modules-transform)
to generate CSS class names on the server. What it does is take code like this:
Expand Down Expand Up @@ -52,7 +53,7 @@ module: {
babelrc: false,
presets: ['es2015', 'react', 'stage-2'],
plugins: [
// 'dynamic-import-webpack' // only needed if Webpack version < 2.2.0
'universal-import' // notice there is no babelServer: true option
// notice there is no 'css-modules-transform' plugin!
]
}
Expand Down Expand Up @@ -87,6 +88,6 @@ The following is an older boilerplate that will showcase babel being used with c

- https://github.com/faceyspacey/flush-chunks-boilerplate-babel-chunknames

We aren't promoting this route anymore, but you can definitely learn from how its configured. Specifically how the server babel config is different from the client webpack config. Check the `.babelrc` and the webpack configs. Just keep in mind that with the babel plugin u gotta use `babel-plugin-syntax-dynamic-import` as well, as shown at the top of this doc.
We aren't promoting this route anymore, but you can definitely learn from how its configured. Specifically how the server babel config is different from the babel config within the *client webpack config*. Check the `.babelrc` and the webpack configs.


0 comments on commit c92f864

Please sign in to comment.