How can I stop JavaScript from being cached during development?

Question

I have a Drupal 8.00-beta11 site and am trying to dynamically add JS to a page, so that I don't have to clear the cache every time I edit the JS file. I have a custom module (lets call it my_module) in drupal_root/modules. My javascript file is in drupal_root/modules/my_module/js/my_js.js.

I have a my_module.libraries.yml file as follows:

my_module:
  version: 1.x
  js: 
    js/my_js.js: {}
  dependencies:
    - core/jquery
    - core/jquery.ui

In my my_module.info.yml I have:

name: My Module
type: module
description: ...
core: 8.x
libraries:
  - my_module/my_module
package: Custom 
version: 0.1

This loads the JS succesfully, but I need to clear the cache everytime after I edit it to see the changes.

In order to avoid doing this, I added the following to my buildForm function:

$form['#attached']['js'] = array(
  drupal_get_path('module', 'my_module') . 'js/my_js.js',
);

$form['#attached']['library'][] = 'my_module/my_module';

I also placed the following in drupal_root/modules/my_module/my_module.module:

<?php 

  function grid_tools_page_attachments(array &$attachments) {
    $attachments['#attached']['library'][] = 'my_module/my_module';
  }

  function grid_tools_page_build(array &$attachments) {
    $attachments['#attached']['library'][] = 'my_module/my_module';
    $path = drupal_get_path('module', 'my_module');
  // Add JavaScript/CSS assets to all pages.
  // @see drupal_process_attached()
    $attachments['#attached']['js'][$path . '/js/my_js.js'];
  }

?>

However, none of this has worked and I still need to clear the cache to see my changes. How do I avoid having to clear the cache every time?

Answer 1

I'm assuming you have to clear caches because your JS file is being aggregated? Can't think of a different reason.

That has absolutely nothing to do with how you add your JS file (Most of what you tried shouldn't even work, use #attached][library).

Instead, it depends on the separate settings to aggregate JS or not. You can find them on the Performance settings page. Aggregation is also automatically disabled if you use the provided sites/example.settings.local.php as your settings.local.php, which I strongly recommend when doing development, also for the other things it does like enable verbose error logging and disabling render caching (but keep in mind to always test your code with render caching too).

Answer 2

It won't work because you are using libraries and they will get aggregated and cached. To have really dynamic JS I would suggest loading the content of the JS file into header within script tags in hook_page_attachments_alter(). See the system_page_attachment() for more information on how you could do it.

But this is really bad idea. Instead I would suggest you clear the CSS/JS cache by running the _drupal_flush_css_js() if you don' want to flush all caches.