From e9ffeee77e8f7b0db58c9eebad01d8585159f0b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 Feb 2019 13:36:41 +0100 Subject: [PATCH 01/15] Use a default webpack config if none is provided --- packages/scripts/scripts/build.js | 13 ++++++++++--- 1 file changed, 10 insertions(+), 3 deletions(-) diff --git a/packages/scripts/scripts/build.js b/packages/scripts/scripts/build.js index ea2c7d303f2fa0..9e8ea6b17cf69b 100644 --- a/packages/scripts/scripts/build.js +++ b/packages/scripts/scripts/build.js @@ -8,6 +8,7 @@ const { sync: resolveBin } = require( 'resolve-bin' ); * Internal dependencies */ const { + fromConfigRoot, getCliArgs, hasCliArg, hasProjectFile, @@ -28,7 +29,13 @@ if ( hasWebpackConfig ) { ); process.exit( status ); } else { - // eslint-disable-next-line no-console - console.log( 'Webpack config file is missing.' ); - process.exit( 1 ); + // Sets environment to production. + process.env.NODE_ENV = 'production'; + + const { status } = spawn( + resolveBin( 'webpack' ), + [ '--config', fromConfigRoot( 'webpack.config.js' ) ], + { stdio: 'inherit' } + ); + process.exit( status ); } From 1c714b0f359acf847e402e81095a6f6e566a2832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 Feb 2019 18:07:23 +0100 Subject: [PATCH 02/15] Extract webpack utils from build command --- packages/scripts/scripts/build.js | 39 +++++++------------------------ packages/scripts/utils/config.js | 21 +++++++++++++++-- packages/scripts/utils/index.js | 2 ++ 3 files changed, 29 insertions(+), 33 deletions(-) diff --git a/packages/scripts/scripts/build.js b/packages/scripts/scripts/build.js index 9e8ea6b17cf69b..567a2405f2f1da 100644 --- a/packages/scripts/scripts/build.js +++ b/packages/scripts/scripts/build.js @@ -7,35 +7,12 @@ const { sync: resolveBin } = require( 'resolve-bin' ); /** * Internal dependencies */ -const { - fromConfigRoot, - getCliArgs, - hasCliArg, - hasProjectFile, -} = require( '../utils' ); +const { getWebpackArgs } = require( '../utils' ); -const hasWebpackConfig = hasCliArg( '--config' ) || - hasProjectFile( 'webpack.config.js' ) || - hasProjectFile( 'webpack.config.babel.js' ); - -if ( hasWebpackConfig ) { - // Sets environment to production. - process.env.NODE_ENV = 'production'; - - const { status } = spawn( - resolveBin( 'webpack' ), - getCliArgs(), - { stdio: 'inherit' } - ); - process.exit( status ); -} else { - // Sets environment to production. - process.env.NODE_ENV = 'production'; - - const { status } = spawn( - resolveBin( 'webpack' ), - [ '--config', fromConfigRoot( 'webpack.config.js' ) ], - { stdio: 'inherit' } - ); - process.exit( status ); -} +process.env.NODE_ENV = 'production'; +const { status } = spawn( + resolveBin( 'webpack' ), + getWebpackArgs(), + { stdio: 'inherit' } +); +process.exit( status ); diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index 6be8ff91f0a4dd..15e1b6cd6e2d15 100644 --- a/packages/scripts/utils/config.js +++ b/packages/scripts/utils/config.js @@ -1,8 +1,8 @@ /** * Internal dependencies */ -const { hasCliArg } = require( './cli' ); -const { hasProjectFile } = require( './file' ); +const { hasCliArg, getCliArgs } = require( './cli' ); +const { fromConfigRoot, hasProjectFile } = require( './file' ); const { hasPackageProp } = require( './package' ); const hasBabelConfig = () => @@ -17,7 +17,24 @@ const hasJestConfig = () => hasProjectFile( 'jest.config.json' ) || hasPackageProp( 'jest' ); +const hasWebpackConfig = () => hasCliArg( '--config' ) || + hasProjectFile( 'webpack.config.js' ) || + hasProjectFile( 'webpack.config.babel.js' ); + +const getWebpackArgs = ( additionalArgs = [] ) => { + const webpackArgs = []; + if ( hasWebpackConfig() ) { + webpackArgs.push( ...getCliArgs() ); + } else { + webpackArgs.push( ...[ '--config', fromConfigRoot( 'webpack.config.js' ) ] ); + } + webpackArgs.push( ...additionalArgs ); + return webpackArgs; +}; + module.exports = { + getWebpackArgs, hasBabelConfig, hasJestConfig, + hasWebpackConfig, }; diff --git a/packages/scripts/utils/index.js b/packages/scripts/utils/index.js index b1a78d0d600c91..0837f7ab80996e 100644 --- a/packages/scripts/utils/index.js +++ b/packages/scripts/utils/index.js @@ -8,6 +8,7 @@ const { spawnScript, } = require( './cli' ); const { + getWebpackArgs, hasBabelConfig, hasJestConfig, } = require( './config' ); @@ -27,6 +28,7 @@ module.exports = { fromConfigRoot, getCliArg, getCliArgs, + getWebpackArgs, hasBabelConfig, hasCliArg, hasJestConfig, From 9a78fcb9ca3b712f7cb604f49bcbf8d78a7fae3d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 14 Feb 2019 18:21:12 +0100 Subject: [PATCH 03/15] Update start command --- packages/scripts/scripts/start.js | 28 +++++++--------------------- 1 file changed, 7 insertions(+), 21 deletions(-) diff --git a/packages/scripts/scripts/start.js b/packages/scripts/scripts/start.js index db42c33ba447fb..d27fa3a5b0ec48 100644 --- a/packages/scripts/scripts/start.js +++ b/packages/scripts/scripts/start.js @@ -7,25 +7,11 @@ const { sync: resolveBin } = require( 'resolve-bin' ); /** * Internal dependencies */ -const { - getCliArgs, - hasCliArg, - hasProjectFile, -} = require( '../utils' ); +const { getWebpackArgs } = require( '../utils' ); -const hasWebpackConfig = hasCliArg( '--config' ) || - hasProjectFile( 'webpack.config.js' ) || - hasProjectFile( 'webpack.config.babel.js' ); - -if ( hasWebpackConfig ) { - const { status } = spawn( - resolveBin( 'webpack' ), - [ '--watch', ...getCliArgs() ], - { stdio: 'inherit' } - ); - process.exit( status ); -} else { - // eslint-disable-next-line no-console - console.log( 'Webpack config file is missing.' ); - process.exit( 1 ); -} +const { status } = spawn( + resolveBin( 'webpack' ), + getWebpackArgs( [ '--watch' ] ), + { stdio: 'inherit' } +); +process.exit( status ); From f556fb3fcf4bf8ec2682a2df959099c7524fbc86 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 21 Feb 2019 12:11:01 +0100 Subject: [PATCH 04/15] Add docs --- packages/scripts/README.md | 17 ++++++++++++++--- 1 file changed, 14 insertions(+), 3 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index cc3f3b2b04a7c7..47381c03c0af95 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -38,7 +38,7 @@ _Example:_ ### `build` -Builds the code to the designated `build` folder in the configuration file. It correctly bundles code in production mode and optimizes the build for the best performance. Your code is ready to be deployed. It uses [Webpack](https://webpack.js.org/) behind the scenes and you still need to provide your own config as described in the [documentation](https://webpack.js.org/concepts/configuration/). +Transforms your code according the configuration provided so it's ready for production and optimized for the best performance. It uses [Webpack](https://webpack.js.org/) behind the scenes. It'll lookup for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config bundled within `@wordpress/scripts` packages. Learn more in the "Webpack config" section. _Example:_ @@ -51,8 +51,8 @@ _Example:_ ``` This is how you execute the script with presented setup: -* `npm run build` - builds the code for production. +* `npm run build` - builds the code for production. ### `check-engines` @@ -69,6 +69,7 @@ _Example:_ ``` This is how you execute the script with presented setup: + * `npm run check-engines` - checks installed version of `node` and `npm`. ### `check-licenses` @@ -107,6 +108,7 @@ _Example:_ ``` This is how you execute the script with presented setup: + * `npm run lint:js` - lints JavaScript files in the entire project's directories. ### `lint-pkg-json` @@ -124,6 +126,7 @@ _Example:_ ``` This is how you execute those scripts using the presented setup: + * `npm run lint:pkg-json` - lints `package.json` file in the project's root folder. ### `lint-style` @@ -141,11 +144,12 @@ _Example:_ ``` This is how you execute the script with presented setup: + * `npm run lint:css` - lints CSS files in the whole project's directory. ### `start` -Builds the code for development to the designated `build` folder in the configuration file. The script will automatically rebuild if you make changes to the code. You will see the build errors in the console. It uses [Webpack](https://webpack.js.org/) behind the scenes and you still need to provide your own config as described in the [documentation](https://webpack.js.org/concepts/configuration/). +Transforms your code according the configuration provided so it's ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console. It uses [Webpack](https://webpack.js.org/) behind the scenes. It'll lookup for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config bundled within `@wordpress/scripts` packages. Learn more in the "Webpack config" section. _Example:_ @@ -158,6 +162,7 @@ _Example:_ ``` This is how you execute the script with presented setup: + * `npm start` - starts the build for development. ### `test-e2e` @@ -180,6 +185,7 @@ _Example:_ ``` This is how you execute those scripts using the presented setup: + * `npm run test:e2e` - runs all unit tests. * `npm run test:e2e:help` - prints all available options to configure unit tests runner. @@ -207,8 +213,13 @@ _Example:_ ``` This is how you execute those scripts using the presented setup: + * `npm run test:unit` - runs all unit tests. * `npm run test:unit:help` - prints all available options to configure unit tests runner. * `npm run test:unit:watch` - runs all unit tests in the watch mode. +## Webpack config + +The `build` and `start` commands. +

Code is Poetry.

From f6469a04aa093451f9dcf3b3e6136729315407a0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Thu, 21 Feb 2019 12:37:56 +0100 Subject: [PATCH 05/15] Add Webpack documentation --- packages/scripts/README.md | 44 +++++++++++++++++++++++++++++++++++++- 1 file changed, 43 insertions(+), 1 deletion(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 47381c03c0af95..57ae8973ddc571 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -220,6 +220,48 @@ This is how you execute those scripts using the presented setup: ## Webpack config -The `build` and `start` commands. +The `build` and `start` commands use [Webpack](https://webpack.js.org/) behind the scenes. Webpack is a tool that helps you transform your code into something else. For example: it can take code written in ESNext and output ES5 compatible code that is minified for production. + +### Default Webpack config + +`@wordpress/scripts` bundles the default Webpack config used as a base by the WordPress editor. These are the defaults: + +- [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js` +- [Output](https://webpack.js.org/configuration/output): `build/index.js` +- [Externals](https://webpack.js.org/configuration/externals). These are the transformations done to imports: + +Package | Input syntax | Output +--- | --- | --- +React | `import x from React;` | `var x = this.wp.react.x;` +ReactDOM | `import x from ReactDOM;` | `var x = this.wp.react-dom.x;` +moment | `import x from moment;` | `var x = this.wp.moment.x;` +jQuery | `import x from jQuery;` | `var x = this.wp.jQuery.x;` +lodash | `import x from lodash;` | `var x = this.wp.lodash.x;` +lodash-es | `import x from lodash-es;` | `var x = this.wp.lodash-es.x;` +Any WordPress package | `import x from '@wordpress/packageName` | `var x = this.wp.package-name.x` + +### Provide your own Webpack config + +Should there be any situation where you want to provide your own Webpack config, you can do so. The `build` and `start` commands will use your provided file when: + +- the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`. +- there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`). + +### Extend the default config + +The `build` and `start` commands will detect if you provided a Webpack config, as explained in the previous section. You can still use the default and extend it so you don't have to craft your own solution if you only want to tweak the default. + +Let's say that you want Webpack to take as input a file named `my-plugin.js`. This is how you'd do it: + +* Create a file called `webpack.config.js` at the top-level directory of your package. +* Fill it with the following contents: + +```js +const config = require( '@wordpress/scripts/config/webpack.config.js' ); +module.exports = Object.assign( {}, config, { + // your tweaks here + entry: 'my-plugin.js', +} ); +```

Code is Poetry.

From 91f98295849ab5c4cfb8f44b98faa4caaf6ac980 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Fri, 22 Feb 2019 13:31:07 +0100 Subject: [PATCH 06/15] Add example of how to overwrite the default plugins --- packages/scripts/README.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 57ae8973ddc571..e4d68d7eb31408 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -226,9 +226,9 @@ The `build` and `start` commands use [Webpack](https://webpack.js.org/) behind t `@wordpress/scripts` bundles the default Webpack config used as a base by the WordPress editor. These are the defaults: -- [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js` -- [Output](https://webpack.js.org/configuration/output): `build/index.js` -- [Externals](https://webpack.js.org/configuration/externals). These are the transformations done to imports: +* [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js` +* [Output](https://webpack.js.org/configuration/output): `build/index.js` +* [Externals](https://webpack.js.org/configuration/externals). These are the transformations done to imports: Package | Input syntax | Output --- | --- | --- @@ -244,8 +244,8 @@ Any WordPress package | `import x from '@wordpress/packageName` | `var x = this. Should there be any situation where you want to provide your own Webpack config, you can do so. The `build` and `start` commands will use your provided file when: -- the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`. -- there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`). +* the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`. +* there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`). ### Extend the default config @@ -258,9 +258,13 @@ Let's say that you want Webpack to take as input a file named `my-plugin.js`. Th ```js const config = require( '@wordpress/scripts/config/webpack.config.js' ); -module.exports = Object.assign( {}, config, { - // your tweaks here +module.exports = { + ...config, entry: 'my-plugin.js', + plugins: [ + ...config.plugins, + // add your own plugin after the default ones + ], } ); ``` From 343410d6368d0cc73707fb6463b5592820aa760e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 27 Feb 2019 16:52:37 +0100 Subject: [PATCH 07/15] Do not export hasWebpackConfig as it is not used anywhere else. --- packages/scripts/utils/config.js | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index 15e1b6cd6e2d15..89b7da30da9f04 100644 --- a/packages/scripts/utils/config.js +++ b/packages/scripts/utils/config.js @@ -36,5 +36,4 @@ module.exports = { getWebpackArgs, hasBabelConfig, hasJestConfig, - hasWebpackConfig, }; From 0c9362b821d87a573291aaf1cafa148c30d2e873 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 27 Feb 2019 16:58:25 +0100 Subject: [PATCH 08/15] Always pass webpack CLI args to command --- packages/scripts/utils/config.js | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index 89b7da30da9f04..d898762ebea6ec 100644 --- a/packages/scripts/utils/config.js +++ b/packages/scripts/utils/config.js @@ -22,10 +22,8 @@ const hasWebpackConfig = () => hasCliArg( '--config' ) || hasProjectFile( 'webpack.config.babel.js' ); const getWebpackArgs = ( additionalArgs = [] ) => { - const webpackArgs = []; - if ( hasWebpackConfig() ) { - webpackArgs.push( ...getCliArgs() ); - } else { + const webpackArgs = [ ...getCliArgs() ]; + if ( ! hasWebpackConfig() ) { webpackArgs.push( ...[ '--config', fromConfigRoot( 'webpack.config.js' ) ] ); } webpackArgs.push( ...additionalArgs ); From b6b45246d84bd5ac2bac1c61b7b208c7d53bc839 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 27 Feb 2019 17:25:45 +0100 Subject: [PATCH 09/15] Update README --- packages/scripts/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index e4d68d7eb31408..9fd77d7ad06d57 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -257,15 +257,15 @@ Let's say that you want Webpack to take as input a file named `my-plugin.js`. Th * Fill it with the following contents: ```js -const config = require( '@wordpress/scripts/config/webpack.config.js' ); +const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' ); module.exports = { - ...config, - entry: 'my-plugin.js', + ...defaultConfig, + entry: './my-plugin.js', plugins: [ - ...config.plugins, + ...defaultConfig.plugins, // add your own plugin after the default ones ], -} ); +}; ```

Code is Poetry.

From 374f662a3a4dad7a4da2da2c33e06fc69ca2f5b8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Wed, 27 Feb 2019 17:31:02 +0100 Subject: [PATCH 10/15] Remove section on extending the default webpack config file --- packages/scripts/README.md | 21 --------------------- 1 file changed, 21 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 9fd77d7ad06d57..7fbdac4f0594b0 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -247,25 +247,4 @@ Should there be any situation where you want to provide your own Webpack config, * the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`. * there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`). -### Extend the default config - -The `build` and `start` commands will detect if you provided a Webpack config, as explained in the previous section. You can still use the default and extend it so you don't have to craft your own solution if you only want to tweak the default. - -Let's say that you want Webpack to take as input a file named `my-plugin.js`. This is how you'd do it: - -* Create a file called `webpack.config.js` at the top-level directory of your package. -* Fill it with the following contents: - -```js -const defaultConfig = require( '@wordpress/scripts/config/webpack.config.js' ); -module.exports = { - ...defaultConfig, - entry: './my-plugin.js', - plugins: [ - ...defaultConfig.plugins, - // add your own plugin after the default ones - ], -}; -``` -

Code is Poetry.

From 3d347027a66a9a847a16642cbadbfdbe4b7ba93e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Mon, 11 Mar 2019 11:50:45 +0100 Subject: [PATCH 11/15] Simplify array passing Co-Authored-By: nosolosw --- packages/scripts/utils/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index d898762ebea6ec..49857ab2e5647d 100644 --- a/packages/scripts/utils/config.js +++ b/packages/scripts/utils/config.js @@ -22,7 +22,7 @@ const hasWebpackConfig = () => hasCliArg( '--config' ) || hasProjectFile( 'webpack.config.babel.js' ); const getWebpackArgs = ( additionalArgs = [] ) => { - const webpackArgs = [ ...getCliArgs() ]; + const webpackArgs = getCliArgs(); if ( ! hasWebpackConfig() ) { webpackArgs.push( ...[ '--config', fromConfigRoot( 'webpack.config.js' ) ] ); } From c1fa8c7a4f31477f95d1aeba43c49a7e100987d0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Grzegorz=20=28Greg=29=20Zi=C3=B3=C5=82kowski?= Date: Mon, 11 Mar 2019 11:51:08 +0100 Subject: [PATCH 12/15] Simplify pushing to array Co-Authored-By: nosolosw --- packages/scripts/utils/config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/scripts/utils/config.js b/packages/scripts/utils/config.js index 49857ab2e5647d..0c5ed70c293ce2 100644 --- a/packages/scripts/utils/config.js +++ b/packages/scripts/utils/config.js @@ -24,7 +24,7 @@ const hasWebpackConfig = () => hasCliArg( '--config' ) || const getWebpackArgs = ( additionalArgs = [] ) => { const webpackArgs = getCliArgs(); if ( ! hasWebpackConfig() ) { - webpackArgs.push( ...[ '--config', fromConfigRoot( 'webpack.config.js' ) ] ); + webpackArgs.push( '--config', fromConfigRoot( 'webpack.config.js' ) ); } webpackArgs.push( ...additionalArgs ); return webpackArgs; From 196ec3e4f36263f422a728c1df01fec4fa8c825b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 11 Mar 2019 12:20:05 +0100 Subject: [PATCH 13/15] Fix externals docs --- packages/scripts/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 7fbdac4f0594b0..2ea443ca78f781 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -228,17 +228,17 @@ The `build` and `start` commands use [Webpack](https://webpack.js.org/) behind t * [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js` * [Output](https://webpack.js.org/configuration/output): `build/index.js` -* [Externals](https://webpack.js.org/configuration/externals). These are the transformations done to imports: +* [Externals](https://webpack.js.org/configuration/externals). These are libraries that are to be found in the global scope: Package | Input syntax | Output --- | --- | --- -React | `import x from React;` | `var x = this.wp.react.x;` -ReactDOM | `import x from ReactDOM;` | `var x = this.wp.react-dom.x;` -moment | `import x from moment;` | `var x = this.wp.moment.x;` -jQuery | `import x from jQuery;` | `var x = this.wp.jQuery.x;` -lodash | `import x from lodash;` | `var x = this.wp.lodash.x;` -lodash-es | `import x from lodash-es;` | `var x = this.wp.lodash-es.x;` -Any WordPress package | `import x from '@wordpress/packageName` | `var x = this.wp.package-name.x` +React | `import x from React;` | `var x = window.React.x;` +ReactDOM | `import x from ReactDOM;` | `var x = window.ReactDOM.x;` +moment | `import x from moment;` | `var x = window.moment.x;` +jQuery | `import x from jQuery;` | `var x = window.jQuery.x;` +lodash | `import x from lodash;` | `var x = window.lodash.x;` +lodash-es | `import x from lodash-es;` | `var x = window.lodash.x;` +WordPress packages | `import x from '@wordpress/package-name` | `var x = window.wp.packageName.x` ### Provide your own Webpack config From d81c7edc64941de206f0786ef5bc2409caf90a4e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 11 Mar 2019 12:22:24 +0100 Subject: [PATCH 14/15] Use webpack instead of Webpack --- packages/scripts/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/packages/scripts/README.md b/packages/scripts/README.md index 2ea443ca78f781..3ed6065b67532a 100644 --- a/packages/scripts/README.md +++ b/packages/scripts/README.md @@ -38,7 +38,7 @@ _Example:_ ### `build` -Transforms your code according the configuration provided so it's ready for production and optimized for the best performance. It uses [Webpack](https://webpack.js.org/) behind the scenes. It'll lookup for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config bundled within `@wordpress/scripts` packages. Learn more in the "Webpack config" section. +Transforms your code according the configuration provided so it's ready for production and optimized for the best performance. It uses [webpack](https://webpack.js.org/) behind the scenes. It'll lookup for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config bundled within `@wordpress/scripts` packages. Learn more in the "webpack config" section. _Example:_ @@ -149,7 +149,7 @@ This is how you execute the script with presented setup: ### `start` -Transforms your code according the configuration provided so it's ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console. It uses [Webpack](https://webpack.js.org/) behind the scenes. It'll lookup for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config bundled within `@wordpress/scripts` packages. Learn more in the "Webpack config" section. +Transforms your code according the configuration provided so it's ready for development. The script will automatically rebuild if you make changes to the code, and you will see the build errors in the console. It uses [webpack](https://webpack.js.org/) behind the scenes. It'll lookup for a webpack config in the top-level directory of your package and will use it if it finds one. If none is found, it'll use the default config bundled within `@wordpress/scripts` packages. Learn more in the "webpack config" section. _Example:_ @@ -218,13 +218,13 @@ This is how you execute those scripts using the presented setup: * `npm run test:unit:help` - prints all available options to configure unit tests runner. * `npm run test:unit:watch` - runs all unit tests in the watch mode. -## Webpack config +## webpack config -The `build` and `start` commands use [Webpack](https://webpack.js.org/) behind the scenes. Webpack is a tool that helps you transform your code into something else. For example: it can take code written in ESNext and output ES5 compatible code that is minified for production. +The `build` and `start` commands use [webpack](https://webpack.js.org/) behind the scenes. webpack is a tool that helps you transform your code into something else. For example: it can take code written in ESNext and output ES5 compatible code that is minified for production. -### Default Webpack config +### Default webpack config -`@wordpress/scripts` bundles the default Webpack config used as a base by the WordPress editor. These are the defaults: +`@wordpress/scripts` bundles the default webpack config used as a base by the WordPress editor. These are the defaults: * [Entry](https://webpack.js.org/configuration/entry-context/#entry): `src/index.js` * [Output](https://webpack.js.org/configuration/output): `build/index.js` @@ -240,9 +240,9 @@ lodash | `import x from lodash;` | `var x = window.lodash.x;` lodash-es | `import x from lodash-es;` | `var x = window.lodash.x;` WordPress packages | `import x from '@wordpress/package-name` | `var x = window.wp.packageName.x` -### Provide your own Webpack config +### Provide your own webpack config -Should there be any situation where you want to provide your own Webpack config, you can do so. The `build` and `start` commands will use your provided file when: +Should there be any situation where you want to provide your own webpack config, you can do so. The `build` and `start` commands will use your provided file when: * the command receives a `--config` argument. Example: `wp-scripts build --config my-own-webpack-config.js`. * there is a file called `webpack.config.js` or `webpack.config.babel.js` in the top-level directory of your package (at the same level than your `package.json`). From 6da9e9282bcc59c2ba3151d148878eef494085b5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Andr=C3=A9s?= Date: Mon, 11 Mar 2019 13:14:11 +0100 Subject: [PATCH 15/15] Add Changelog entry --- packages/scripts/CHANGELOG.md | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/scripts/CHANGELOG.md b/packages/scripts/CHANGELOG.md index c9373b3025f38f..b5455d3d98c8b9 100644 --- a/packages/scripts/CHANGELOG.md +++ b/packages/scripts/CHANGELOG.md @@ -1,3 +1,9 @@ +## 3.1.0 (unreleased) + +## New features + +- The `build` and `start` commands will use a default webpack config if none is provided. + ## 3.0.0 (2019-03-06) ### Breaking Changes