Whole system
Let's create src/env/envValue.json and src/env/envValue.local.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.
DIV { background-color: $envValue(color); }
Let's create src/frame/sample.html, src/page/index.html and src/page/index2.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.
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.
{ "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.
{ "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.
{ "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.
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.
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.
$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