Skip to content

Commit 398e39a

Browse files
Merge pull request #773 from misterdev/misterdev-format-scaffold
docs(scaffolding): improved structure, formatting, typos
2 parents 65bf27f + a14908e commit 398e39a

File tree

1 file changed

+78
-32
lines changed

1 file changed

+78
-32
lines changed

SCAFFOLDING.md

Lines changed: 78 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -2,98 +2,144 @@
22

33
Setting up webpack for the first time is hard. Writing advanced configurations to optimize performance is even harder. The `init` feature is designed to support people that want to create their own configuration or initializing other projects people create.
44

5-
## Writing a good scaffold
5+
## Creating a scaffold
66

7-
Before writing a `webpack-cli` scaffold, think about what you're trying to achieve. Do you want a "general" scaffold that could be used by any project or type of app? Do you want something very focused - like a scaffold that writes both your `webpack.config.js` and your framework code? It's also useful to think about the user experience for your scaffold.
7+
Before writing a `webpack-cli` scaffold, think about what you're trying to achieve. Do you want a "general" scaffold that could be used by any project or type of app? Do you want something very focused, like a scaffold that writes both your `webpack.config.js` and your framework code? It's also useful to think about the user experience for your scaffold.
88

99
`webpack-cli` offers an experience that is interactive and you can prompt users for questions (like, "What is your entry point?") to help customize the output accordingly.
1010

11-
## webpack-scaffold
11+
### Writing a scaffold
1212

13-
`webpack-scaffold` is a utility suite for creating scaffolds. It contains functions that could be of use for creating an scaffold yourself.
13+
There are many resources where you can learn how to write a scaffold, you can start from: [How do I compose a
14+
webpack-scaffold?](https://github.com/evenstensberg/webpack-scaffold-demo)
1415

15-
## webpack-scaffold-yourpackage
1616

17-
In order for `webpack-cli` to compile your package, it must be available on npm or on your local filesystem. If you are curious about how you can create your very own `scaffold`, please read [How do I compose a
18-
webpack-scaffold?](https://github.com/evenstensberg/webpack-scaffold-demo).
17+
[`webpack-scaffold`](./packages/webpack-scaffold) is a utility suite for creating scaffolds. It contains functions that could be used to create a scaffold.
1918

20-
If the package is on npm, its name must have a prefix of `webpack-scaffold`.
2119

22-
If the package is on your local filesystem, it can be named whatever you want. Pass the path to the package.
20+
### Running a scaffold
21+
22+
A scaffold can be executed using [`webpack-cli init`](./INIT.md):
23+
24+
```js
25+
webpack-cli init <your-scaffold>
26+
```
27+
28+
#### Running a scaffold locally
29+
When the scaffold package is in your local file system you should pass its path to `init`:
30+
31+
```bash
32+
webpack-cli init path/to/your/scaffold
33+
```
34+
35+
Or you can create a global module and symlink to the local one:
36+
37+
* Using npm
38+
39+
```bash
40+
cd path/to/my-scaffold
41+
npm link
42+
webpack-cli init my-scaffold
43+
```
44+
45+
* Using yarn
46+
47+
```bash
48+
cd path/to/my-scaffold
49+
yarn link
50+
webpack-cli init my-scaffold
51+
52+
#### Running a scaffold from npm
53+
54+
If the package is in npm, its name must begin with `webpack-scaffold` and can be used running:
55+
56+
```js
57+
webpack-cli init webpack-scaffold-yourpackage
58+
```
59+
2360

2461
## API
2562

26-
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.
63+
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:
2764

28-
Objects are made using strings, while strings are made using double strings. This means that in order for you to create an string, you have to wrap it inside another string for us to validate it correctly.
65+
> 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.
2966
67+
### Required
68+
- [opts.env.configuration](#optsenvconfiguration-required)
69+
- [opts.env.configuration.myObj](#optsenvconfigurationmyObj-required)
70+
- [myObj.webpackOptions](#myObjwebpackOptions-required)
71+
- [writing()](#writing()-required)
72+
73+
### Optional
74+
- [myObj.merge](#myObjmerge-optional)
75+
- [myObj.topScope](#myObjtopScope-optional)
76+
- [myObj.configName](#myObjconfigName-optional)
3077

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

33-
Initialized inside the constructor of your generator in order for the CLI to work.
80+
This is the entry point your configuration, initialize it inside the constructor of your generator in order for the CLI to work:
3481

3582
```js
3683
constructor(args, opts) {
37-
super(args, opts);
38-
opts.env.configuration = {};
39-
}
84+
super(args, opts);
85+
opts.env.configuration = {};
86+
}
4087
```
4188
### `opts.env.configuration.myObj` (required)
4289

43-
`myObj` is your scaffold. This is where you will add options for the CLI to transform into a configuration. You can name it anything, and you can also add more objects, that could represent a `dev.config` or `prod.config`.
90+
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`:
4491

4592
```js
4693
constructor(args, opts) {
47-
super(args, opts);
48-
opts.env.configuration = {
49-
dev: {},
50-
prod: {}
51-
};
52-
}
94+
super(args, opts);
95+
opts.env.configuration = {
96+
dev: {},
97+
prod: {}
98+
};
99+
}
53100
```
54101

55102
### `myObj.webpackOptions` (required)
56103

57-
As with a regular webpack configuration, this property behaves the same. Inside `webpackOptions` you can declare the properties you want to scaffold. You can for instance, scaffold `entry`, `output` and `context`.
104+
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 initialize this inside a yeoman method:
58105

59-
(Inside a yeoman method)
60106
```js
61107
this.options.env.configuration.dev.webpackOptions = {
62-
entry: '\'app.js\'',
63-
output: {....}
108+
entry: '\'app.js\'',
109+
output: {...}
64110
};
65111
```
66112

67113
### `myObj.merge` (optional)
68114

69-
If you want to use `webpack-merge`, you can supply `merge` with the merge property, and the configuration you want to merge it with.
115+
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:
70116

71117
```js
72118
this.options.env.configuration.dev.merge = 'myConfig';
73119
```
74120

75121
### `myObj.topScope`(optional)
76122

77-
The `topScope` property is a way for the authors to add special behaviours, like functions that could be called inside a configuration, or variable initializations and module imports.
123+
The `topScope` property is where you write all the code needed by your configuration, like module imports and functions/variables definitions:
78124

79125
```js
80126
this.options.env.configuration.dev.topScope = [
81-
'var webpack = require(\'webpack\');'
82-
'var path = require(\'path\');'
127+
'const webpack = require(\'webpack\');',
128+
'const path = require(\'path\');'
83129
];
84130
```
85131

86132
### `myObj.configName`(optional)
87133

88-
If you want to name your `webpack.config.js` something special, you can do that.
134+
`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`:
89135

90136
```js
91137
this.options.env.configuration.dev.configName = 'base';
92138
```
93139

94140
### `writing` (required)
95141

96-
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.
142+
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:
97143

98144
```js
99145
writing() {

0 commit comments

Comments
 (0)