Skip to content

Commit

Permalink
docs(scaffolding): improve description & formatting
Browse files Browse the repository at this point in the history
  • Loading branch information
misterdev committed Mar 12, 2019
1 parent e11c524 commit 0f657d0
Showing 1 changed file with 33 additions and 40 deletions.
73 changes: 33 additions & 40 deletions SCAFFOLDING.md
Expand Up @@ -60,35 +60,34 @@ webpack-cli init webpack-scaffold-yourpackage

## API

To create a `scaffold`, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). Because of that, you can optionally extend your generator to include methods from the [Yeoman API](http://yeoman.io/learning/). Its worth noting that we support all the properties of a regular webpack configuration. In order for us to do this, there's a thing you need to remember.
To create a `scaffold`, you must create a [`yeoman-generator`](http://yeoman.io/authoring/). Because of that, you can optionally extend your generator to include methods from the [Yeoman API](http://yeoman.io/learning/). It's worth noting that we support all the properties of a regular webpack configuration. In order for us to do this, there's a thing you need to remember:

Objects are made using strings, while strings are made using double strings. This means that in order for you to create a string, you have to wrap it inside another string for us to validate it correctly.
> Objects are made using strings, while strings are made using double strings. This means that in order for you to create a string, you have to wrap it inside another string for us to validate it correctly.
### Required
- [opts.env.configuration](#optsenvconfiguration-required)
- [opts.env.configuration.myConfig](#optsenvconfigurationmyConfig-required)
- [myConfig.webpackOptions](#myConfigwebpackOptions-required)
- [opts.env.configuration.myObj](#optsenvconfigurationmyObj-required)
- [myObj.webpackOptions](#myObjwebpackOptions-required)
- [writing()](#writing()-required)

### Optional
- [myConfig.merge](#myConfigmerge-optional)
- [myConfig.topScope](#myConfigtopScope-optional)
- [myConfig.configName](#myConfigconfigName-optional)
- [myObj.merge](#myObjmerge-optional)
- [myObj.topScope](#myObjtopScope-optional)
- [myObj.configName](#myObjconfigName-optional)

### `opts.env.configuration` (required)
### `opts.env.configuration`(required)

Is initialized inside the constructor of your generator in order for the CLI to work.
This is the entry point your configuration, initialize it inside the constructor of your generator in order for the CLI to work:

```js
constructor(args, opts) {
super(args, opts);
opts.env.configuration = {};
}
```
### `opts.env.configuration.myObj` (required)

### `opts.env.configuration.myConfig` (required)

Every `myConfig` will be transformed into a webpack configuration. You can name those keys as you prefer (e.g. `dev`, `prod`):
This is your scaffold, you add here the options that the CLI will transform into a Webpack configuration. You can have many different scaffolds named as you prefer, representing different configurations like `dev.config` or `prod.config`:

```js
constructor(args, opts) {
Expand All @@ -100,56 +99,50 @@ constructor(args, opts) {
}
```

### `myConfig.webpackOptions` (required)

This object behaves as a regular webpack configuration, you declare here properties you want to scaffold, like `entry`, `output` and `context`:
### `myObj.webpackOptions` (required)

(Inside a yeoman method)
This object has the same format as a regular Webpack configuration, so you declare here the properties that you want to scaffold, like `entry`, `output` and `context`. You can intialize this inside a yeoman method:

```js
this.options.env.configuration.dev =
webpackOptions: {
entry: '\'app.js\'',
output: {....}
}
this.options.env.configuration.dev.webpackOptions = {
entry: '\'app.js\'',
output: {...}
};
```

### `writing()` (required)
### `myObj.merge` (optional)

For the scaffolding instance to run, you need to write your configuration to a `.yo-rc.json` file. This could be done using one of the lifecycles in the yeoman generator, such as the `writing` method:
If you want to use [`webpack-merge`](https://github.com/survivejs/webpack-merge), you can set the `merge` property of `myObj` to the name of the configuration you want to merge it with:

```js
writing() {
this.config.set('configuration', myConfig)
}
this.options.env.configuration.dev.merge = 'myConfig';
```

### `myConfig.merge` (optional)
### `myObj.topScope`(optional)

If you want to use `webpack-merge`, you can set the `merge` property with the name of the configuration you want to merge with:
The `topScope` property is where you write all the special code needed by your configuration, like module imports and function/variables definitions:

```js
this.options.env.configuration.dev = {
merge: 'anotherConfig'
};
this.options.env.configuration.dev.topScope = [
'const webpack = require(\'webpack\');',
'const path = require(\'path\');'
];
```

### `myConfig.topScope` (optional)
### `myObj.configName`(optional)

The `topScope` property is a way for the to add special behaviours to your scaffold, like functions that could be called inside a configuration, variable initializations and module imports:
`configName` allows you to customize the name of your configuration file. For example you can name it `webpack.base.js` instead of the default `webpack.config.js`:

```js
this.options.env.configuration.dev.topScope = [
'var webpack = require(\'webpack\');'
'var path = require(\'path\');'
];
this.options.env.configuration.dev.configName = 'base';
```

### `myConfig.configName` (optional)
### `writing` (required)

Used if you want to name your `webpack.config.js` differently:
For the scaffolding instance to run, you need to write your configuration to a `.yo-rc.json` file. This could be done using one of the lifecycles in the yeoman generator, such as the `writing` method:

```js
this.options.env.configuration.dev.configName = 'base';
writing() {
this.config.set('configuration', myObj)
}
```

0 comments on commit 0f657d0

Please sign in to comment.