Whole system

Let's change index.html and index.js to the following.

index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div data-obj="obj"></div>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert($f.envValue("key1") + ' ' + $f.envValue("key2") + ' ' + $f.envValue("key3"));
    }

}

Let's create src/js/env/envValue.json, src/js/env/envValue.local.json.

envValue.json

{
     "key1" : "value1"
    ,"key2" : "value2"
}

envValue.local.json

{
     "key2" : "value2_local"
    ,"key3" : "value3_local"
}

Let's run it and click the sample button.
String of "value1 value2_local value3_local" is outputted in alert.
About $f.envValue("key1") calling in index.js.
$f is the object of this framework.
envValue is method that returns the value of json under src/js/env.
If you want to define a constants, define it in envValue.json and get it by calling the envValue method.
Because envValue.json is json, enclose the key and value in double quotes. Not a single quote.
envValue.json is created under src/js/env. This is a framework rule.
Also, you can prepare envValue.json as well as envValue.{Environment}.json
Environment is defined as an argument of fairysupport_js in scripts of package.json
Let's take a look at watch_local in scripts in package.json
"watch_local": "watch \"npm run build_local\" ./src" you can see that you are running build_local.
"build_local": "fairysupport_js local" Here we are passing the environment as an argument. Here local is passed.
Therefore, not only envValue.json but also envValue.local.json is used
If both envValue.json and envValue.local.json have the same key, envValue.local.json takes precedence.
The environment can get by calling $f.getEnv()

Page specific

Let's create src/page/sub/index.html, src/js/modules/sub/index.js.

src/page/sub/index.html

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>
sample
</title>
<script id="fs-js" src="http://localhost:8000/js/fairysupport.min.js" data-page-root="http://localhost:8000/page"></script>
</head>
<body>
    <div><button data-name="sample">sample</button></div>
</body>
</html>

src/js/modules/sub/index.js

export class Index {

    constructor() {
    }

    sample_click(event) {
        alert($f.envValue("key1") + ' ' + $f.envValue("sub_key") + ' ' + $f.envValue("sub_index_key"));
    }

}

Let's create src/js/env/sub/envValue.json, src/js/env/sub/envValue.local.json, src/js/env/sub/index/envValue.json, src/js/env/sub/index/envValue.local.json

src/js/env/sub/envValue.json

{
     "sub_key" : "sub_value"
}

src/js/env/sub/envValue.local.json

{
     "sub_key" : "sub_value_local"
}

src/js/env/sub/index/envValue.json

{
     "sub_index_key" : "sub_index_value"
}

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

{
     "sub_index_key" : "sub_index_value_local"
}

Let's run it and click the sample button.
String of "value1 sub_value_local sub_index_value_local" is outputted in alert.
envValue.json created under src/js/env/sub can be used only when the js file corresponding to the web page exists under src/js/modules/sub or src/js/modules/sub.js.
envValue.json created under src/js/env/sub/index can be used only when the js file corresponding to the web page exists under src/js/modules/sub/index or src/js/modules/sub/index.js

Next page message

table of contents