When developing for the Gutenberg / block editor, I see two methods used in various resources. Let's say I wanted to use i18n

The Gutenberg handbook sometimes does it like this:

1. Define wp-i18n as a dependency in the wp_register_script block.

2. Use const { __ } = wp.i18n; in the JavaScript.

But there is also documentation on how to do it like this:

1. Add @wordpress/i18n as a dependency.

2. Use import { __ } from '@wordpress/i18n'; in the JavaScript.

How do these ways differ and what is considered best practice in WordPress?