Just a note on the way I currently like to set up development of a Gutenberg block. Basically these are the steps mentioned in the WordPress block editor handbook, that uses the @wordpress/package to work with the webpack and Babel libraries, without too much hassle.
Assumed Node.js and npm are installed, enter
mkdir new-block cd new-block npm init
Next install the WordPress packages and all their dependencies. This may take a while.
npm install --save-dev --save-exact @wordpress/scripts
Add the following code to package.json
:
"scripts": { "start": "wp-scripts start", "build": "wp-scripts build" },
To start watching files and building the JavaScript while developing your block, type
npm start
To create the production code, enter the command
npm run build
Trouble shooting
When continuing development after an interruption, I often forget to restart watching/compiling with npm start
and wonder why any change in the code fails to make any change in the output.