How to reload a file via require.js triggered from the browsers js console

javascript jquery requirejs google-chrome-devtools

10,496

RequireJS is not designed for reloading modules, generally speaking.

However, if you design your application carefully you can get RequireJS to reload some modules. Here's an example:

<body>
  <p id="contents">Nothing loaded.</p>
  <button id="reload">Reload</button>
  <script>
    require.config({
        baseUrl: "./js",
        paths: {
            jquery: '//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
        }
    });
    require(["jquery"], function ($) {
        var $contents = $("#contents");
        function reload() {
            require.undef("text!../file.html");
            require(["text!../file.html"], function (file) {
                $contents.empty();
                $contents.append(file);
            });
        }
        $("#reload").click(reload);
    });
  </script>
</body>

The key is to call require.undef to undefine the module before reloading it.

I've got a repo illustrating the whole thing. If you edit the file.html file and hit the "Reload" button, the text of the paragraph will be replaced with the contents of the file. To get a function you can invoke form the console just assign it to a field of window (e.g. window.reload).

The button should really be called Load/Reload (because it does the initial loading and the reloading) but I'm not going to fix it.

10,496

Author by

homtg

Updated on June 15, 2022

Comments

homtg almost 2 years
Having a text file (underscore templates) loaded by require.js on initial app start:
```
define(['text!templates/template.html'], function(Template){ ... };
```
When i am now making changes to this file and want require to reload that single file without me having to reload the whole page and restart the whole app, is this possible?

I'd like to trigger this from the javascript console in the browser.

Use case is a scenario with underscore templates loaded via require.js, when making changes to one of those template files i could easily "inject" the new file to the running app, trigger the views render method manually and see the changes without having to start from the very beginning by reloading everything.

Thanks for your ideas.
homtg over 10 years

Thanks. If i call require.undef() and require the template file again after that like you did in your example, will it be refreshed in every module?
Louis over 10 years

No, it won't be refreshed. The RequireJS documentation is clear about this. That's why you have to design your app carefully. If you keep references to module X in multiple places and you want to reload it, you have to find a way to refresh the references yourself.
Alexander Mills almost 9 years

this is cool - I was just reading about hot-(re)loading with React + Webpack, was wondering if I could get some of the same functionality with RequireJS. @Louis is there a grunt/gulp plugin for this or does it basically necessitate a button on the page?
Alexander Mills almost 9 years

ahh, if you have a global function called window.reload then you should be able to create some gulp/grunt plugin that refreshes the browser for you, so you don't have to click a button or have a button in the view? Otherwise, I think the reload button is fine, I can just put it in the header or footer...
xamiro over 8 years

its not really a require-js problem but rather yours. module reloading is a very custom story (ie: tagging other modules to reload as well) and is pretty much up to your testing framework and your code structure, ideally you can launch at run-time at any moment your context test units, in seconds!