How to insert some JavaScript to a *.phtml template in the proper way (x-magento-init)

Of course you can insert some JavaScript into a *.phtml template by using plain <script type="text/javascript"> tag but sometimes it does not work as expected because of a wrong initialization order.
I had such problem with SimpleMDE JavaScript Markdown Editor.
Magento 2 contains a lot of complex JavaScript code and it is much safier to insert your JavaScript code in the proper and officially recommened way by using x-magento-init syntax.

An example:

<script type="text/x-magento-init">
	{"*": {"Dfe_Markdown/main": {}}}
</script>

Dfe_Markdown/main refer to the JavaScript file in Dfe/Markdown/view/<area>/web/main.js folder.
An example of such file:

require([
	'jquery', 'SimpleMDE', 'HighlightJs'
], function($, SimpleMDE, HighlightJs) {$(function() {
	// Your custom code here...
});});

See also: