Usage

The simplest way to try out the tool is to download the jar file and run it on the command line, telling it where your source tree is. Like this:

This will bundle all js files in your source trees. Then there are various ways to use it in a development project. One or more of these:

• In the build
  Run it from Maven, Ant, Gradle or anything else. See the examples, docs and tutorials.
• In the IDE
  Setup Eclipse, IntelliJ and various other IDEs to run the bundler as part of the build. See the docs and video tutorials for ways to do this.
• At run time
  JS-Class-Loader can also run as a servlet in java web apps.

Tutorial videos

There are loads of ways you could integrate JS-Class-Loader into your project. Here are some run-throughs of the simplest methods. You should watch them fullscreen at highest quality to see the text, and the captions have been set properly too if you don't want sound.

In an Eclipse Static web project

This video runs through setting up JS-Class-Loader as a builder, which then generates bundles and script-tag lists every time you build (which can be every time you save a file).

As a Java servlet in an Eclipse web app project

A run through of setting up a very basic java web app in eclipse, and adding JS-Class-Loader as a servlet which then bundles your javascript at request time.

Setup guides

Basic properties:

Setting up an Eclipse project with a JS-Class-Loader builder

Super quick steps

1. Create project
2. Create config file
3. Get the jar
4. Add builder to project

Quick steps

1. Take a new or existing web project
2. create a conf folder and js-class-loader.properties inside it
3. define standard properties as above and customise to your structure
4. download the latest jar file from the link at the top of this page, save it somewhere permanent.
5. Add a new builder for your project
6. Set exec to /usr/bin/java or \Program Files\Java\Java.x.x.x\bin\java.exe
7. Set arguments to -jar path/to/js-class-loader-x.x.x.jar -c="/path/to/js-class-loader.properties"
8. Save the builder and build the project once
9. Set builder refresh to refresh your generated folder contents
10. Add some code, build, setup complete.

Steps with descriptions

1. Create a new project
   You can use any type of project in eclipse, the examples use a Static Web Project because it has the web content in a subfolder so you can create a conf file in the base and keep your web content separate but it really doesn't matter what sort of project you use.
2. Create the config file
   JS-Class-Loader needs to know where your source tree or trees live and where you want the output file to go. There is some basic example config above that should work for starters. The sourcePaths argument in the example (sourcePaths=js/*) tells js-class-loader to consider each folder under js/ as a source root, which allows you to start off with a simple js/src folder for now and expand it out to more modules later without having to change your config.
3. Download the latest jar file
   There is a download link at the top of this page for the latest jar. Save this somewhere permanent, you will be referencing this location when you set up the Eclipse builder.
4. Add a new builder
   
   • Right click on your project, go to Builders, New.
   • Select "Program"
   • In the name, enter JS-Class-Loader
   • In location you need to put in your system java executable file. For linux that is: /usr/bin/java
     In windows it is something like: \Program Files\Java\Java.x.x.x\bin\java.exe
   • Working Directory needs to be set to where the base of your web content is, so for an Eclipse Static Web project, that means the WebContent folder in your project. You can use variables to make this simpler, set it to ${project_loc}/WebContent. Or if the content is served from the base of your project, just set it to ${project_loc}
   • Arguments should be set to:
     -jar path/to/js-class-loader-x.x.x.jar -c="/path/to/js-class-loader.properties"
     Customise the path to where you saved the JS-Class-Loader jar, and then you can use properties again to set the config file. So it might look like this: -jar /home/user/workspace/js-class-loader-1.2.7.jar -c="${project_loc}/conf/js-class-loader.properties"
     If you paths or project name has spaces in it then wrap the value in quotes too as shown here.
5. build it once
   Now before we set up the refresh we should create the folders and run the bundler once.
   • create js/src in your web project content
   • create a new js file in there called whatever you like.
   • build the project (if you don't have build automatically enabled, press ctrl-b)
   • refresh the project - you should see a gen folder appeared with a bundle.js file in it
6. Setup refresh
   • Now go back to the project builders, select your builder and edit it.
   • Go to the Refresh tab,
   • enable refresh resources on completion,
   • select Specific Resources
   • click Specify resources
   • select your gen folder.

Setting up an Eclipse web app with a JS-Class-Loader servlet

Super quick steps

1. Create java web app project
2. download latest js-class-loader jar, save into WEB-INF/lib
3. create config file
4. add servlet config to web.xml

Quick steps

1. Open a new or existing java web application project in eclipse
2. Download the jar file from the link at top of page, save into WEB-INF/lib
3. Create WEB-INF/classes/js-class-loader.properties
4. Set sourcePaths up and set allClasses=true
5. Edit web.xml, add servlet definition and mapping as per example above

Setting up an Eclipse Maven web app project with the JS-Class-Loader maven plugin

Super quick steps

1. Create or open a maven web app
2. Add plugin to build->plugins tag in pom.xml
3. Add pluginManagement section to build tag in pom.xml
4. Create and customise config in src/main/resources
5. Create source folders and files, build
6. Check your built folder in target, see the generated files

Quick steps

1. Create or open a maven web app
2. Edit the pom file, in build->plugins add:
   <plugin> <groupId>com.larrymite</groupId> <artifactId>js-class-loader-mojo</artifactId> <version>1.x.x</version> <executions> <execution> <goals><goal>generate-js-bundle</goal></goals> </execution> </executions> </plugin>
3. Customise the version number in the version tag to the latest release.
4. Now add the following to the build tag in the pom:
   ... force war refresh xml ...
5. Create a file in src/main/resources called js-class-loader.properties
6. edit this file, add sourcePaths and bundleFile settings, set allClasses=true
7. create source folder and a source file, build
8. Check your built folder in target, see the generated files

Steps with description

In spite of our best efforts, there just aren't any good ways to get Eclipse M2E with WTP to generate new web content on the fly and add it to it's own Deployed Resources folder. Instead these steps set up in a way that tells M2E to update your target folder, so that at least you can start an application server at your exploded war location and it will update dynamically as you change code and build.

In fact, we're not really sure why they don't always just update the target folder.

1. Create or open a maven web app
   In eclipse, create or open a project with the maven-web-app archetype.
2. Add plugin to build->plugins tag in pom.xml
   <plugin> <groupId>com.larrymite</groupId> <artifactId>js-class-loader-mojo</artifactId> <version>1.x.x</version> <executions> <execution> <goals><goal>generate-js-bundle</goal></goals> </execution> </executions> </plugin>
   This adds the generate-js-bundle goal to your project and is the basic config you need for maven to generate js bundles at build time.
3. Add pluginManagement section to build tag in pom.xml

   This step is purely to force Eclipse-M2E and WTP to update the target build folder when an eclipse build runs. It's a shame to have to pollute your pom with IDE config but it's the simplest and least invasive way to get Eclipse-M2E-WTP to update web content like this.

   ... force war refresh xml ...
4. Create config file at src/main/resources/js-class-loader.properties

   This is the config for JS-Class-Loader, it will be read by either the maven build or servlets, in this case maven builds.

   Add this to the config file:

   sourcePaths=js/* allClasses=true bundleFile=gen/bundle.js
5. Create source folders and files, build

   .. add description here..

6. Check your built folder in target, see the generated files

   .. add description here..

Setting up an IntelliJ maven web app with the JS-Class-Loader maven plugin

Super quick steps

Quick steps

Steps with description

Using the development script tags list in a php web project

Super quick steps

Quick steps

Steps with description

Using the development script tags list in java web project

Super quick steps

Quick steps

Steps with description

Using the development script tags list in java web app with servlet

Super quick steps

Quick steps

Steps with description

Setting up the base of your dependency tree

Fun with graphs and visualisations