Skip to content

Module to enable usage of NPM packages and TS thru WebJars

Notifications You must be signed in to change notification settings

wthrajat/npm-in-webjar

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

2 Commits
 
 
 
 
 
 
 
 

Repository files navigation

NPM in WebJar Generic badge Maven TypeScript GitHub license Npm

How to use

git clone https://github.com/wthrajat/npm-in-webjar.git && cd npm-in-webjar && mvn clean install

Development

The directory src/main/resources is now an NPM project - like the one you probaby have worked on usually.

Version upgrade

  1. Edit src/main/resources/package.json for the deps update
  2. cd src/main/resources and run npm install
  3. This will update src/main/resources/package-lock.json

NOTE: Without this step, the updated version is not taken into account during the maven build.

Example of src/main/resources/main.ts

    export default function helloWorld(name : string) {
    console.log("Hello " + name + "!");
}
    export default helloWorld;

Using the output bundle

  require.config({
    paths: {
      'output': '$services.webjars.url('domain.org.name:npm-in-webjar', 'output.js')'
    }
  });

  require(['output'], function (output) {
        console.log('Your output bundle has been loaded successfully!');
        name = "Taylor Swift";
        bundle.helloWorld(name);
     // Prints: Hello Taylor Swift!
});

How is the build done

  1. At first, maven copy src/main/resources to target/webjar
  2. Then npm ci is run inside target/webjar installing the dependencies by following package-lock.json
  3. Then npm run build is run inside target/webjar, producing the artifacts of target/webjar/dist
  4. At last, the content of target/webjar/dist is copied to the relevant directory to be included in the WebJar packaging.

This project is inspired from Manuel Leducs's webpack demo.

About

Module to enable usage of NPM packages and TS thru WebJars

Topics

Resources

Stars

Watchers

Forks