Preferred way to develop JavaScript library and dependencies concurrently

I'm currently working on a project that involves both a large library (which extends parts of the Google Closure Library) and a number of smaller modules which use this library. I initially tried keeping the library module & child modules as part of the same project, but it seems that for code completion to work, I need to add all of the files from my library to a JavaScript library in my module settings. In order for this to work, I need to keep my library in a separate IDEA project, but this causes problems as I need to keep two IDEA instances open and I have to remember to add any new library files to the library definition for code completion to work.

This really doesn't seem like the correct workflow for what I'd assume is a relatively common use case. In other IDEs I've been able to define my library module as a dependency of the child modules, allowing me to work on them within the same IDE & automatically making sources available for code completion. IDEA seems to handle this correctly when using other languages (ActionScript and Java being the ones that I've tried), it seems like something like that for JavaScript would be ideal. Is there any way I can set up my project to accomplish this in IDEA? If not, what's the best workaround for this scenario?

11 comments

Hi Jim,

Just checked that such case work just fine:

  1. Created modules 'api' and 'client';
  2. Created a *.js file with a single function at 'api' (it's important that it's located under a source root there);
  3. Defined 'api' as a module dependency for 'client';
  4. Created a *.js file at 'client' module (it's also needs to be located under a source root there);
  5. Started typing function name from api's *.js at client's *.js - the ide provides completion for it;

Denis

0

denis.zhdanov wrote:

Hi Jim,

Just checked that such case work just fine:

  1. Created modules 'api' and 'client';
  2. Created a *.js file with a single function at 'api' (it's important that it's located under a source root there);
  3. Defined 'api' as a module dependency for 'client';
  4. Created a *.js file at 'client' module (it's also needs to be located under a source root there);
  5. Started typing function name from api's *.js at client's *.js - the ide provides completion for it;

Denis


The step I fail at is "Defined 'api' as a module dependency for 'client';" - I'm not sure where I'm supposed to do this. The Project Structure window doesn't have a tab for dependencies when I'm working on a Web project - should I be looking somewhere else?

0

Sorry, didn't realize that you have a non-java web project.

Created a screencast which illustrates how to do the trick with pure WebStorm - https://dl.dropboxusercontent.com/u/1648086/video/config.m4v

Denis

0

denis.zhdanov wrote:

Sorry, didn't realize that you have a non-java web project.

Created a screencast which illustrates how to do the trick with pure WebStorm - https://dl.dropboxusercontent.com/u/1648086/video/config.m4v

Denis


Thanks for going to the effort of making that video, it's very much appreciated. However, that seems to be the same setup that I have at the moment, which has a couple of issues:

  1. I need to open the Client and API in separate IDEA instances. This isn't a huge problem, but I usually have up to 3 other IDEA instances open with related projects and I sometimes find myself running out of RAM. It would also just be a bit nicer to have everything in one window so, for example, I can search through Client & API files at the same time.
  2. I have to add new files to the library definition manually after creating them. If it's possible, I'd rather point the library definition to the 'src' directory in my API project, so that it automatically picks up any new files that I add.
  3. I'm not sure exactly why this is happening (it might be related to all of the different versions I've migrated these projects through) but some of the older files in my API project don't have full syntax highlighting. Example: http://imgur.com/a/19dbw#1
0
  1. It's possible to setup other project as a content root - https://dl.dropboxusercontent.com/u/1648086/video/content-root.m4v
  2. There are two choices when new content is added to a js library - 'add a file' and 'add a directory';
  3. Not sure about that, it's better to create a separate ticket at our tracker with all details on how to reproduce the problem;

Denis

0
  1. That looks like exactly what I need, but I don't seem to have "Directories" in my project settings (IDEA 129.400)
  2. Do you mean that if I use "add a directory" it should watch that directory for future changes? I thought when I'd tried that it just acted like "add a file" on each file in the directory, but I may have been mistaken, I'll try again in a bit.
  3. I'll do that once I figure out how to reproduce it myself - it only seems to affect old files so it's hard for me to replicate at the moment. It's only a minor issue though.
0
  1. So, you use not WebStorm/PhpStorm but IntelliJ IDEA, right?
  2. When a directory is added to a js library config, all new files created under it are visible to the library clients;


Denis

0

That's correct. Most of my work is in JS, but I already have an IntelliJ IDEA license so I've been using it rather than buying a WebStorm license too.

0

You can just use the module dependency facility then.

Denis

0

There isn't a dependencies tab in the module settings when I'm in a web project

0

Please sign in to leave a comment.