What are the @wordpress/scripts mentioned in WordPress 5.2 and how do you use them?

Yesterday WordPress 5.2 was released, which in addition to increasing the PHP version requirements to 5.6.20, adding a wp_body_open hook, and improving security, also introduced the updated @wordpress/scripts tool.

In short, the @wordpress/scripts tool is a module builder for Gutenberg module developers. For more information on this tool, please refer to the Gutenberg Developer's Manual in the JavaScript build settingsAn article.

Gutenberg supports both ES5 and ESNext JavaScript syntaxes. ES5 syntax WordPress has the same browser support and can be run directly in the browser without additional build steps.

In most cases, it is convenient to use ES5 syntax to develop the Gutenberg editor. However, when our code becomes very large, using the ESNext syntax reduces the amount of code we have and makes our code easier to maintain.

The new version of the @wordpress/scripts package includes the webpack respond in singing Babel configuration, which means that we can easily develop Gutenberg editor modules without having to configure webpack or Babel.

How to use @wordpress/scripts

First, we need to install the@wordpress/scriptsPackage:

npm install --save-dev @wordpress/scripts

Then, we modify the package.json Add the next two lines of configuration.

"scripts": {
    "start": "wp-scripts start", "build": "wp-scripts build", {
    "build": "wp-scripts build"
}

When you run the above script, wp-scripts will look for thesrc/index.js file and output the compiled code to thebuild/index.js. Once set up, the process of developing the Gutenberg editor is as follows:

1. Install dependencies: npm install
2. Start developing the build: npm start
3. Development, Testing
4. Create production builds: npm run build

If you want to experience this tool, you can find it on the ancientTengbom Sample CodeOpen a random example in and develop and build it using the tools above.

The role of wordpress/scripts is to provide us with a zero-configuration, out-of-the-box Gutenberg module compilation tool to help us quickly Gutenberg module development. Of course, if we need a more complex configuration, we can customize webpack and babel configuration to achieve.