Javascript preprocessor to replace variable reference during build

Question

Is there a way to substitute variables in javascript files, with a preprocessor during build process. I uses grunt, usemin, uglifyjs (part of yeoman stack).

I currently refer to url from a global javascript object. For example,

 my.url = {
     book: {
        get : '/my/book/{id},
        new: '/my/book'

     }
 }

in my program, I may refer the url as my.url.book.get, etc. The intention is

• do not want the url string spread across the program, as any change during development make it hard to refactor.
• url may generate based on the server API, and don't want to duplicate in client.

Now, once I am happy with the development, I like to preprocess all the javascript file to substitute all these references to actual url string. Intention is to avoid loading an extra file with all the url (may the user only need few of the url).

is there any tool, similar to html templating package, to process the javascript and replace all the variables. I prefer if it works with grunt/yeoman stack.

Answer 1

You can do that with grunt-replace It allows for all kinds of string substitutions in text files. I use it to sync version numbers in bower.json, package.json etc, but obviously you can use it for source file value substitutions as well.

That said, in your case I'd definitely opt for a more dynamic solution with env variables, with for instance grunt-env.

Answer 2

Try @Builder https://github.com/electricimp/Builder

Little example

in config.js:

@set apiEndpoint "https://somesite.com/api/v1"

then:

@include once "config.js"
let url = "@{apiEndpoint}"