Inline JavaScript file in phtml

Question

Is it possible to inline JavaScript file into phtml file? we have phtml file in view/frontend/template/js and js file in view/frontend/web/js

<!-- current setup -->
<script type="text/x-magento-init">
  { "*" : {
    "MyModule/js/my_js" : {} }
  }}
</script>

Currently we use x-magento-init but we want to make script inline like below:

<!-- what we want -->
<script type="application/javascript">
  // my code from JS file is inlined here
</script>

We realize this is render-blocking but we'd rather want to do this because we need this script for determine what to render. Is there any standard way to achieve this?

Answer 1

Do something like :-

  <script type="text/x-magento-init">
        {
            "*": {
                "<Vendor_Module>/js/hello.js": {}
            }
        }
</script>

Your hello.js javascript then will look something like

define(['jquery'],function($){
    return function(){
        //do something
    }
});

Answer 2

Try below code on .phtml file.

<script type="text/javascript">
require(['jquery'], function(jquery) {
    jquery(document).ready(function(){
         /** Do Something **/
    });
});
</script>