Whole system

Let's create src/env/envValue.json and src/env/envValue.local.json.

src/env/envValue.json

{
     "jsRoot" : "http://localhost:8000/js"
    ,"pageRoot" : "http://localhost:8000/page"
    ,"sample" : "../util/sample.js"
    ,"color" : "#00FA9A"
}

src/env/envValue.local.json

{
     "jsRoot" : "http://localhost:8000/js"
    ,"pageRoot" : "http://localhost:8000/page"
    ,"sample" : "../util/sample.js"
    ,"color" : "#00FA9A"
}

Let's create src/css/app.css.

src/css/app.css

DIV {
  background-color: $envValue(color);
}

Let's create src/frame/sample.html, src/page/index.html and src/page/index2.html.

src/frame/sample.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="$envValue(jsRoot)/fairysupport.min.js" data-page-root="$envValue(pageRoot)"></script>
</head>
<body>
$page()
</body>
</html>

src/page/index.html

$frame(sample)
<div><button data-name="sample">sample</button></div>

src/page/index2.html

$frame(sample)
<div><button data-name="sample">sample</button></div>

Let's create src/js/modules/index.js, src/js/modules/index2.js, src/js/util/sample.js and src/js/util/sample2.js.

src/js/modules/index.js

import {Sample} from '$envValue(sample)';

export class Index {

    constructor() {
        this.sample = new Sample();
    }

    sample_click() {
        console.log('\$envValue(sample) => ' + '$envValue(sample)');
        this.sample.execute();
    }
    
}

src/js/modules/index2.js

import {Sample} from '$envValue(sample)';

export class Index2 {

    constructor() {
        this.sample = new Sample();
    }

    sample_click() {
        console.log('\$envValue(sample) => ' + '$envValue(sample)');
        this.sample.execute();
    }
    
}

src/js/util/sample.js

export class Sample {

    constructor() {
    }

    execute() {
        console.log('sample#execute');
    }
    
}

src/js/util/sample2.js

export class Sample {

    constructor() {
    }

    execute() {
        console.log('sample2#execute');
    }
    
}

Let's take a look at distWork/page, distWork/js and distWork/css, after npm run watch_local is run.
$envValue() part has been replaced.
If you write $envValue() in files under src/page, src/js and src/css, the corresponding element will be searched from envValue.json under src/env, $envValue() will be replaced, output to distWork.
If you want to write the string as $envValue() in the file under src/page, add \.

Page specific

Let's create src/env/css/index/envValue.local.json and src/env/css/index2/envValue.local.json.

src/env/css/index/envValue.local.json

{
    "color" : "#ff4500"
}

src/env/css/index/envValue.local.json

{
    "color" : "#4169e1"
}

Let's create src/env/js/modules/index/envValue.local.json and src/env/js/modules/index2/envValue.local.json.

src/env/js/modules/index/envValue.local.json

{
    "sample" : "../util/sample.js"
}

src/env/js/modules/index2/envValue.local.json

{
    "sample" : "../util/sample2.js"
}

Let's create src/env/page/index/envValue.local.json and src/env/page/index2/envValue.local.json.

src/env/page/index/envValue.local.json

{
     "sample" : "sample value"
}

src/env/page/index2/envValue.local.json

{
     "sample" : "sample value 2"
}

Let's create src/css/index/app.css and src/css/index2/app.css.

src/css/index/app.css

DIV {
  background-color: $envValue(color);
}

src/css/index2/app.css

DIV {
  background-color: $envValue(color);
}

Let's create src/js/modules/index.js and src/js/modules/index2.js.

src/js/modules/index.js

import {Sample} from '$envValue(sample)';

export class Index {

    constructor() {
        this.sample = new Sample();
    }

    sample_click() {
        console.log('\$envValue(sample) => ' + '$envValue(sample)');
        this.sample.execute();
    }
    
}

src/js/modules/index2.js

import {Sample} from '$envValue(sample)';

export class Index2 {

    constructor() {
        this.sample = new Sample();
    }

    sample_click() {
        console.log('\$envValue(sample) => ' + '$envValue(sample)');
        this.sample.execute();
    }
    
}

Let's create src/page/index.html and src/page/index2.html.

src/page/index.html

$frame(sample)
<div><button data-name="sample">$envValue(sample)</button></div>

src/page/index2.html

$frame(sample)
<div><button data-name="sample">$envValue(sample)</button></div>

Let's take a look at distWork/page, distWork/js and distWork/css, after npm run watch_local is run.
$envValue() is replaced.
envValue.json placed under src/env is a value that replace $envValue in css, js and page files that match the location of the stored directory.

Next page Image

table of contents