How should you internationalize javascript spread in multiple files but build in one?

I have followed the instructions for internationalization on: https://developer.wordpress.org/block-editor/developers/internationalization/, but it doesn’t seem to play well with the development tools for Gutenberg. It will find all the translations in the src directory in the multiple js files and will use that as the relative paths while the npm run build will make one build/index.js file which I am enqueueing. The wp i18n make-json languages --no-purge will create multiple files which the MD5 won’t work (probably because of the relative paths) and I can’t name them al ${domain}-${local}-${handler}.json.

To have a better understanding what I mean. I now have the following:

npm init
npm i --save-dev --save-exact @wordpress/scripts
mkdir build
mkdir src
cd src 
touch index.js
touch edit.js

index.js

import { __ } from '@wordpress/i18n';
import { registerBlockType } from '@wordpress/blocks';

import edit from './edit.js';

registerBlockType( 'gbg/myguten', {
    title: __( "My Gutenberg Example", "gbg" ),
    category: "widgets",
    edit
} );

edit.js

import { __ } from '@wordpress/i18n';

export default () => (<h1>{ __( "Hello World", "gbg" ) }</h1>);

I then generate the translations:

mkdir lang
wp i18n make-pot ./ lang/myguten.pot
cp myguten.pot myguten-en_US.po
wp i18n make-json myguten-en_US.po --no-purge

This will generate multiple json files, while I rather have one combined json file. npm run build will generate one index.js file which I use to register in WordPress.

/**
 * Plugin Name: My Guten
 * Text Domain: gbg
 */
function gbg_myguten_block_init() {
    load_plugin_textdomain( 'gbg', false, dirname( plugin_basename(__FILE__) ) . '/lang/' );

    wp_register_script(
        'gbg-myguten-script',
        plugins_url( 'build/index.js', __FILE__ ),
        array( 'wp-blocks', 'wp-element', 'wp-i18n' ),
        time(),
        true
    );

    register_block_type( 
        'gbg/myguten', 
        array(
            'editor_script' => 'gbg-myguten-script',
        ) 
    );

    wp_set_script_translations( 'gbg-myguten-script', 'gbg', plugin_dir_path( __FILE__ ) . 'lang' );
}
add_action( 'init', 'gbg_myguten_block_init' );

Now it will search for ${domain}-${locale}-${handle}.json while multiple json files exist.

(I revised this answer mainly to let other readers and you know the issues I originally noticed in your steps as shown in the question.)

So in my original answer, I was focused on suggesting you to just go with the multiple script translation files, but I thought I should clarify the three things below:

It will find all the translations in the src directory in the multiple js files and will use that as the relative paths while the npm run build will make one build/index.js file which I am enqueueing.

• Yes, wp i18n make-json will create one JED-formatted JSON file per JavaScript source file — more details on Make WordPress.

• As with the npm run build (which uses the wp-scripts package), it — as far as I know — only builds JavaScript source files (.js) and not JED files which are JSON files. (There is a JS linter and other tools, though.)

The wp i18n make-json will create multiple files which the MD5 won’t work (probably because of the relative paths)

• The files would work so long as you give the proper file name to your PO files where the format is ${domain}-${locale}.po (see Plugin Handbook » Loading Text Domain) — e.g. my-plugin-it_IT.po if the text domain is my-plugin and the locale is set to it_IT (Italiano).

  But then, you used the wrong text domain, e.g. with the command wp i18n make-pot ./ lang/myguten.pot, you should’ve used gbg and not myguten because the Text Domain in your plugin header is gbg (i.e. Text Domain: gbg).

  Additionally, your cp (“copy”) command should have been preceded by cd lang.

• As with the MD5 thing, it is the MD5 hash of the JS source file path as you can see in the PO file — so the path is (or should be) relative to the plugin folder.

  E.g. Structure of my sample plugin:

  wpse-366881/
    build/
      index.js <- relative path = build/index.js
    lang/
    src/
      edit.js  <- relative path = src/edit.js
      index.js <- relative path = src/index.js
    index.php
    package.json
  

I rather have one combined JSON file.

• In that case, you can use po2json and npx to run the executable po2json file.

So how should you internationalize JavaScript spread in multiple files but build in one?

Just follow the steps in the question, except:

1. Make sure the translation files (POT, PO, MO and JED/JSON) — i.e. the code inside and the file names — are using the text domain as defined in the plugin header. Additionally, put all the translation files in the correct directory.

   E.g. wp i18n make-pot ./ lang/gbg.pot

2. There’s no need to run the wp i18n make-json command which creates the multiple files, and just use po2json to create a single JED/JSON file from a PO file.

   And the command for that is: (Note that as of writing, WordPress uses JED 1.x)

   npx po2json <path to PO file> <path to JSON file> -f jed1.x

   E.g. npx po2json lang/gbg-en_US.po lang/gbg-en_US-gbg-myguten-script.json -f jed1.x

Sample Plugin I used for testing purposes (and for other readers to try)

You can find it on GitHub — tried & tested working on WordPress 5.4.1, with the site locale/language set to it_IT/Italiano. And the code are basically all based on your code, except in index.php, I used the build/index.asset.php file to automatically load dependencies and version.

And btw, the plugin was initially based on the example here.