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

With the help I got from the marked answer written by Sally CJ I was able to write this answer which is a more compact version of what I was looking for as an answer.

I am using the dutch locale (nl_NL) in the samples below, but feel free to use any other locale instead like it_IT or en_US.

The make-pot WP CLI command only does the expected job when used in the root directory of your theme or plugin. This is also where the file lives that contains the Plugin or Theme header.

To get the expected result run the following commands:

1. wp i18n make-pot .
2. cp ./languages/my-plugin-slug.pot ./languages/my-plugin-slug-nl_NL.po
3. npx po2json languages/my-plugin-slug-nl_NL.po languages/my-plugin-slug-nl_NL-my-plugin-script-handler.json -f jed1.x;                    

In your plugin PHP-file use the following code:

function register_block_my_gutenberg_block() {
    load_plugin_textdomain( 'my-plugin-slug', false, plugin_dir_path( __FILE__ ) . 'languages' ); 

    $asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php' );

    wp_register_script(
        'my-plugin-script-handler',
        plugin_dir_url( __FILE__ ) . 'build/index.js',
        $asset_file['dependencies'],
        $asset_file['version'],
        true
    );

    register_block_type(
        'my-namespace/my-gutenberg-block',
        array(
            'editor_script' => 'my-plugin-script-handler'
        )
    );

    wp_set_script_translations( 
        'my-plugin-script-handler', 
        'my-plugin-slug',
        plugin_dir_path( __FILE__ ) . 'languages' 
    );
}

add_action( 'init', 'register_block_my_gutenberg_block' );

As written in the documentation, How to Internationalize Your Plugin, "The text domain must match the slug of the plugin". That's why my-plugin-slug is used in the places marked for text-domain.

PoEdit

You can also use PoEdit for translation. Just use the make-pot as described above in step 1 and then open the newly create pot file in PoEdit. Create the translation and save it as my-plugin-slug-nl_NL.po. Then use the command in step 3 to generate the .json-file.

Package.json

You can make life a little bit easier by adding make-pot and make-json to your package.json file. Now if you npm run make-pot, the pot file is created. Use it to translate. Then use npm run make-json to create the json files for all the .po files. Make sure you change the my-plugin-handler.json to the name of your script handler defined in your PHP file with wp_register_script.

  "scripts": {
    "build": "wp-scripts build",
    "format:js": "wp-scripts format-js",
    "lint:js": "wp-scripts lint-js src",
    "packages-update": "wp-scripts packages-update",
    "start": "wp-scripts start",
    "make-pot": "wp i18n make-pot .",
    "make-json": "find . -iname \"*.po\" -type f -exec sh -c 'npx po2json $0 $(dirname $0)/$(basename $0 .po)-my-plugin-script-handler.json -f jed1.x' {} \\;"
  },

Other answers here suggest the use of npx po2json instead of wp i18n make-json but that might not be ideal for everyone because wp i18n make-json is the standard way of generating json files. Here's how you make it work:

• Make sure you use the @wordpress/scripts to build your JS. This package uses webpack behind the scenes and all the translation functions are already preserved so the make-pot scanner can scan them. More about this package: https://developer.wordpress.org/block-editor/reference-guides/packages/packages-scripts/#advanced-usage

• When running the make-pot command, explicitly include the JS build directory and exclude the JS source directory: wp i18n make-pot ./ languages/domain.pot --exclude=path/to/js/src --include=path/to/js/build/ --ignore-domain. Now your POT file will only reference the generated files that are actually enqueued on the page.

• Run make-json. The md5 hashes of the generated JSON files will correctly reference the actual scripts loaded on the page.