diff --git a/INIT.md b/INIT.md index c4536c55f3d..112ca86eb77 100644 --- a/INIT.md +++ b/INIT.md @@ -3,74 +3,89 @@ `webpack-cli init` is used to initialize `webpack` projects quickly by scaffolding configuration and installing modules required for the project as per user preferences. ## Initial Setup -A. **Local setup** -Follow given steps to locally setup `webpack-cli init` by installing dependencies: +### a. Local setup + +These are the steps necessary to setup `webpack-cli init` locally: + 1. Create `package.json` through npm ```shell - $ npm init + npm init ``` 2. Install `webpack` and `webpack-cli` as devDependencies ```shell - $ npm install --save-dev webpack webpack-cli + npm install --save-dev webpack webpack-cli ``` -3. Install `@webpack-cli/init` package to add init scaffold +3. Install `@webpack-cli/init` package to add the init scaffold ```shell - $ npm install --save-dev @webpack-cli/init + npm install --save-dev @webpack-cli/init ``` -B. **Global Setup** +### b. Global Setup + +These are the steps necessary to setup `webpack-cli init` globally: -Follow following steps to setup `webpack-cli init` globally: 1. Install `webpack` and `webpack-cli` globally + ```shell - $ npm install -g webpack webpack-cli + npm install -g webpack webpack-cli ``` -2. Install `@webpack-cli/init` package to add init scaffold +2. Install `@webpack-cli/init` package to add the init scaffold + ```shell - $ npm install -g @webpack-cli/init + npm install -g @webpack-cli/init ``` ## Usage -A. **For local setup**: + +### a. Running locally + ```shell -$ npx webpack-cli init +npx webpack-cli init ``` -B. **For global setup** +### b. Running globally + ```shell -$ webpack-cli init +webpack-cli init ``` ### Description of questions asked by generator -1. `Will your application have multiple bundles? (Y/n)` +1. `Will your application have multiple bundles? (y/N)` + +> *Property/key resolved: [entry](https://webpack.js.org/configuration/entry-context/#entry)* + +This is used to determine if your app will have multiple [entry points](https://webpack.js.org/configuration/entry-context/#entry). +If you want to have multiple entry points, answer yes. If you want to have only one, answer no. + +2. `Which will be your application entry point? (src/index)` -> *Property/key to resolve: [entry](https://webpack.js.org/configuration/entry-context/#entry)* +> *Property/key resolved: [entry](https://webpack.js.org/configuration/entry-context/#entry)* -What we are meaning here, is if you want to provide your bundle a single or multiple [entry points](https://webpack.js.org/configuration/entry-context/#entry). If you have more than one entry point to your app, answer yes. If you only have one, answer no. +This tells webpack from which file to start bundling your application. The default answer `src/index` will tell webpack to look for a file called `index` inside a folder named `src`. -2. `Which folder will your generated bundles be in? [default: dist]` +3. `In which folder do you want to store your generated bundles? (dist)` -> *Property/key to resolve: [output.path](https://webpack.js.org/configuration/output/#output-path)* +> *Property/key resolved: [output.path](https://webpack.js.org/configuration/output/#output-path)* -This answers to the [output directory](https://webpack.js.org/configuration/output/#output-path) of your application. The output directory is where servers or your `index.html` will read the generated bundle from. +The output directory is where your bundled application will be. Your `index.html` will read the generated files from this folder, that is usually named `dist`. 4. `Will you be using ES2015? (Y/n)` -> *Property/key to resolve: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .js files)* +> *Property/key resolved: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .js files)* -If you answer `Yes` to this question, we will add [`ES2015`](https://babeljs.io/learn-es2015/) to your webpack configuration, which will allow you to use modern JavaScript in your project. +This enables webpack to parse [`ES2015`](https://babeljs.io/learn-es2015/) code. Answer `Yes` if you want to use modern JavaScript in your project. 5. `Will you use one of the below CSS solutions?` -> *Property/key to resolve: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .scss,.less,.css,.postCSS files)* +> *Property/key resolved: [module.rules](https://webpack.js.org/configuration/module/#module-rules) (for .scss,.less,.css,.postCSS files)* If you use any sort of style in your project, such as [`.less`](http://lesscss.org/), [`.scss`](http://sass-lang.com/), [`.css`](https://developer.mozilla.org/en-US/docs/Web/CSS) or [`postCSS`](http://postcss.org/) you will need to declare this here. If you don't use CSS, answer no. diff --git a/packages/generators/add-generator.ts b/packages/generators/add-generator.ts index 977850f2167..ea0bf129102 100644 --- a/packages/generators/add-generator.ts +++ b/packages/generators/add-generator.ts @@ -147,7 +147,7 @@ export default class AddGenerator extends Generator { .then((_: void) => { if (action === "entry") { return this.prompt([ - Confirm("entryType", "Will your application have multiple bundles?"), + Confirm("entryType", "Will your application have multiple bundles?", false), ]) .then((entryTypeAnswer: { entryType: boolean, diff --git a/packages/generators/init-generator.ts b/packages/generators/init-generator.ts index 410f109d00c..cc7f8246573 100644 --- a/packages/generators/init-generator.ts +++ b/packages/generators/init-generator.ts @@ -87,7 +87,7 @@ export default class InitGenerator extends Generator { ); return this.prompt([ - Confirm("entryType", "Will your application have multiple bundles?"), + Confirm("entryType", "Will your application have multiple bundles?", false), ]) .then((entryTypeAnswer: { entryType: boolean; @@ -100,7 +100,7 @@ export default class InitGenerator extends Generator { return this.prompt([ Input( "outputType", - "Which folder will your generated bundles be in? [default: dist]:", + "In which folder do you want to store your generated bundles? (dist):", ), ]); } @@ -110,7 +110,7 @@ export default class InitGenerator extends Generator { return this.prompt([ Input( "outputType", - "Which folder will your generated bundles be in? [default: dist]:", + "In which folder do you want to store your generated bundles? (dist):", ), ]); }) @@ -165,11 +165,11 @@ export default class InitGenerator extends Generator { .then((_: void) => { return this.prompt([ List("stylingType", "Will you use one of the below CSS solutions?", [ + "No", + "CSS", "SASS", "LESS", - "CSS", "PostCSS", - "No", ]), ]); }) diff --git a/packages/generators/types/yeoman-generator.d.ts b/packages/generators/types/yeoman-generator.d.ts index d845fd911a3..bc2425c458f 100644 --- a/packages/generators/types/yeoman-generator.d.ts +++ b/packages/generators/types/yeoman-generator.d.ts @@ -69,7 +69,8 @@ declare module "yeoman-generator" { name: string; message: string | ((answers: Object) => string); choices?: string[] | ((answers: Object) => string); - default?: string | number | string[] | number[] | ((answers: Object) => (string | number | string[] | number[])); + default?: string | number | boolean | string[] | number[] + | ((answers: Object) => (string | number | boolean | string[] | number[])); validate?: ((input: string) => boolean | string); when?: ((answers: Object) => boolean) | boolean; store?: boolean; diff --git a/packages/generators/utils/entry.ts b/packages/generators/utils/entry.ts index 9c809e08751..aae92f38be1 100644 --- a/packages/generators/utils/entry.ts +++ b/packages/generators/utils/entry.ts @@ -89,7 +89,7 @@ export default function entry(self: IEntry, answer: { .prompt([ InputValidate( "singularEntry", - "Which module will be the first to enter the application? [default: ./src/index]", + "Which will be your application entry point? (src/index)", ), ]) .then((singularEntryAnswer: { diff --git a/packages/webpack-scaffold/README.md b/packages/webpack-scaffold/README.md index 11e294e0391..90453cc188b 100755 --- a/packages/webpack-scaffold/README.md +++ b/packages/webpack-scaffold/README.md @@ -1,10 +1,13 @@ # webpack-scaffold -This is the utility suite for creating a webpack `scaffold`. It contains utility functions to assist with inquirer prompting and scaffolding. +This is the utility suite for creating a webpack `scaffold`, it contains utility functions to help you work with [Inquirer](https://github.com/SBoudrias/Inquirer.js/) prompting and scaffolding. + # Installation + ```bash npm i -D webpack-cli @webpack-cli/webpack-scaffold ``` + # API 1. [parseValue()](#parsevalue) @@ -15,6 +18,7 @@ npm i -D webpack-cli @webpack-cli/webpack-scaffold 6. [createExternalFunction()](#createexternalfunction) 7. [createRequire()](#createrequire) 8. Inquirer: [List](#list), [RawList](#rawlist), [CheckList](#checklist), [Input](#input), [InputValidate](#inputvalidate), [Confirm](#confirm) + ## parseValue Param: `String` @@ -27,11 +31,12 @@ const parseValue = require('@webpack-cli/webpack-scaffold').parseValue; this.configuration.myScaffold.webpackOptions.output.sourcePrefix = parseValue('\t') // sourcePrefix: '\t' ``` + ## createArrowFunction Param: `String` -Generally used when dealing with an entry point as an arrow function. +Generally used when dealing with an entry point as an arrow function ```js const createArrowFunction = require('@webpack-cli/webpack-scaffold').createArrowFunction; @@ -44,18 +49,20 @@ this.configuration.myScaffold.webpackOptions.entry = createArrowFunction('app.js Param: `String` -Used when creating a function that returns a single value. +Used when creating a function that returns a single value + ```js const createRegularFunction = require('@webpack-cli/webpack-scaffold').createRegularFunction; this.configuration.myScaffold.webpackOptions.entry = createRegularFunction('app.js') // entry: function() { return 'app.js' } ``` + ## createDynamicPromise Param: `Array` | `String` -Used to create an dynamic entry point. +Used to create a dynamic entry point ```js const createDynamicPromise = require('@webpack-cli/webpack-scaffold').createDynamicPromise; @@ -98,7 +105,6 @@ externals: [ } callback(); } - */ ``` @@ -122,8 +128,10 @@ this.configuration.myScaffold.topScope = [createRequire('webpack')] Param: `name, message, choices` Creates a List from Inquirer + ```js const List = require('@webpack-cli/webpack-scaffold').List; + List('entry', 'what kind of entry do you want?', ['Array', 'Function']) ``` @@ -132,8 +140,10 @@ List('entry', 'what kind of entry do you want?', ['Array', 'Function']) Param: `name, message, choices` Creates a RawList from Inquirer + ```js const RawList = require('@webpack-cli/webpack-scaffold').RawList; + RawList('entry', 'what kind of entry do you want?', ['Array', 'Function']) ``` @@ -142,8 +152,10 @@ RawList('entry', 'what kind of entry do you want?', ['Array', 'Function']) Param: `name, message, choices` Creates a CheckList(`checkbox`) from Inquirer + ```js const CheckList = require('@webpack-cli/webpack-scaffold').CheckList; + CheckList('entry', 'what kind of entry do you want?', ['Array', 'Function']) ``` @@ -152,8 +164,10 @@ CheckList('entry', 'what kind of entry do you want?', ['Array', 'Function']) Param: `name, message` Creates an Input from Inquirer + ```js const Input = require('@webpack-cli/webpack-scaffold').Input; + Input('entry', 'what is your entry point?') ``` @@ -162,8 +176,10 @@ Input('entry', 'what is your entry point?') Param: `name, message, validate` Creates an Input from Inquirer + ```js -const Input = require('@webpack-cli/webpack-scaffold').Input; +const InputValidate = require('@webpack-cli/webpack-scaffold').InputValidate; + const validation = (value) => { if(value.length > 4) { return true; @@ -171,15 +187,17 @@ const validation = (value) => { return 'Wow, that was short!' } } -Input('entry', 'what is your entry point?', validation) +InputValidate('entry', 'what is your entry point?', validation) ``` ### Confirm -Param: `name, message` +Param: `name, message, default` Creates an Input from Inquirer + ```js const Confirm = require('@webpack-cli/webpack-scaffold').Confirm; + Confirm('contextConfirm', 'Is this your context?') ``` diff --git a/packages/webpack-scaffold/__tests__/__snapshots__/index.test.ts.snap b/packages/webpack-scaffold/__tests__/__snapshots__/index.test.ts.snap index afd57eac245..0304203ef64 100755 --- a/packages/webpack-scaffold/__tests__/__snapshots__/index.test.ts.snap +++ b/packages/webpack-scaffold/__tests__/__snapshots__/index.test.ts.snap @@ -31,13 +31,13 @@ callback(); }" `; -exports[`utils createRegularFunction should stringify an regular function 1`] = ` +exports[`utils createRegularFunction should stringify a regular function 1`] = ` "function () { return 'app.js' }" `; -exports[`utils createRequire should stringify an require statement 1`] = `"const webpack = require('webpack');"`; +exports[`utils createRequire should stringify a require statement 1`] = `"const webpack = require('webpack');"`; exports[`utils parseValue should parse value 1`] = ` Collection { diff --git a/packages/webpack-scaffold/__tests__/index.test.ts b/packages/webpack-scaffold/__tests__/index.test.ts index 5e955bc7f96..0db475e179a 100755 --- a/packages/webpack-scaffold/__tests__/index.test.ts +++ b/packages/webpack-scaffold/__tests__/index.test.ts @@ -8,7 +8,7 @@ describe("utils", () => { }); }); describe("createRegularFunction", () => { - it("should stringify an regular function", () => { + it("should stringify a regular function", () => { expect(utils.createRegularFunction("app.js")).toMatchSnapshot(); }); }); @@ -41,12 +41,12 @@ describe("utils", () => { }); }); describe("createRequire", () => { - it("should stringify an require statement", () => { + it("should stringify a require statement", () => { expect(utils.createRequire("webpack")).toMatchSnapshot(); }); }); describe("Inquirer", () => { - it("should make an List object", () => { + it("should make a List object", () => { expect(utils.List("entry", "does it work?", ["Yes", "Maybe"])).toEqual({ choices: ["Yes", "Maybe"], message: "does it work?", @@ -54,7 +54,7 @@ describe("utils", () => { type: "list", }); }); - it("should make an RawList object", () => { + it("should make a RawList object", () => { expect( utils.RawList("output", "does it work?", ["Yes", "Maybe"]), ).toEqual({ @@ -64,7 +64,7 @@ describe("utils", () => { type: "rawlist", }); }); - it("should make an CheckList object", () => { + it("should make a CheckList object", () => { expect( utils.CheckList("context", "does it work?", ["Yes", "Maybe"]), ).toEqual({ @@ -81,8 +81,17 @@ describe("utils", () => { type: "input", }); }); - it("should make an Confirm object", () => { + it("should make a Confirm object", () => { expect(utils.Confirm("context", "what is your context?")).toEqual({ + default: true, + message: "what is your context?", + name: "context", + type: "confirm", + }); + }); + it("should make a Confirm object with No as default", () => { + expect(utils.Confirm("context", "what is your context?", false)).toEqual({ + default: false, message: "what is your context?", name: "context", type: "confirm", diff --git a/packages/webpack-scaffold/index.ts b/packages/webpack-scaffold/index.ts index fc9e3211897..093f6a6bd02 100755 --- a/packages/webpack-scaffold/index.ts +++ b/packages/webpack-scaffold/index.ts @@ -5,7 +5,8 @@ export interface IInquirerScaffoldObject { name: string; message: string; choices?: ((answers: Object) => string) | string[]; - default?: string | number | string[] | number[] | ((answers: Object) => (string | number | string[] | number[])); + default?: string | number | boolean | string[] | number[] + | ((answers: Object) => (string | number | boolean | string[] | number[])); validate?: ((input: string) => boolean | string); when?: ((answers: Object) => boolean) | boolean; store?: boolean; @@ -110,8 +111,9 @@ export function InputValidate(name: string, message: string, cb?: (input: string }; } -export function Confirm(name: string, message: string): IInquirerScaffoldObject { +export function Confirm(name: string, message: string, defaultChoice: boolean = true): IInquirerScaffoldObject { return { + default: defaultChoice, message, name, type: "confirm",