システム全体

src/env/envValue.json、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"
}

src/css/app.cssを作成しましょう

src/css/app.css

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

src/frame/sample.html、src/page/index.html、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>

src/js/modules/index.js、src/js/modules/index2.js、src/js/util/sample.js、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');
    }
    
}

npm run watch_localが実行されたらdistWork/page、distWork/js、distWork/cssを見てみましょう
$envValue()の部分が置換されています
src/page、src/js、src/css配下のファイルは$envValue()を書いておくと、src/env配下のenvValue.jsonから該当の要素を探し、置換され、distWorkに出力されます
$envValue()を置換されないようにするには\マークを付けてください

特定のファイル

src/env/css/index/envValue.local.json、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"
}

src/env/js/modules/index/envValue.local.json、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"
}

src/env/page/index/envValue.local.json、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"
}

src/css/index/app.css、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);
}

src/js/modules/index.js、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();
    }
    
}

src/page/index.html、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>

npm run watch_localが実行されたらdistWork/page、distWork/js、distWork/cssを見てみましょう
$envValue()の部分が置換されています
src/env配下に置いたenvValue.jsonは、格納されているディレクトリ位置に一致するcss、js、pageのファイルの$envValueを置換します

次ページ画像

目次