compile *.ejs template file to typescript/javascript module
npm install ejs2module> Command line tool to compile *.ejs template file to typescript/javascript module.
Useful for transform ejs template to render function(js or ts) mdule then you can pack it with webpack, no need runtime ejs compile or load runtime ejs core.
When you transform to ts mode, ejs2module will extract 'import xxx from xxx;' to ts file top, so you can use orther ejs module or others(npm or your selfs) in template.
In js mode, use 'require()' replace ejs 'include()' function.
In ts mode, you can write "import XXX from 'XXX';" in any template script(code) block, then use it. Because ejs compile fail with 'import()', just use require() replace it(dynamic import()).
I really like use it with transform to 'ts' and 'async' mode, then I can write TypeScript and await function call in template.
$ npx ejs2module -hUsage: npx ejs2module path_or_dir/load/from/[source.ejs] path_or_dir/save/to/[target.ts|target.js]
Options:
-V, --version output the version number
-s, --script [js|ts] default "js" for JavaScript, then "ts" for TypeScript module, or auto detect by target file subname.
-a, --async [false|true] default "false", set "ture" will add "async" keyword before export function, then you can use 'await' keyword inside template.
-l, --localsName [value] Name to use for the object storing local variables Defaults to "locals".
-h, --help output usage information
Single file transform
Build main.ejs to main.ts with payload name "model" and export "async function".
$ project/>npx ejs2module src/template/main.ejs src/render/main.ts -l model -a true
Multi-files transform
If source is a directory, ejs2module will build */.ejs in source direcroty, then use same directory hierarchy to save target file. You must specified target script type by "-s ts" or "-s js".
$ project/>npx ejs2module src/template/ src/render/ -s ts -l model -a true
Integrate into your npm project
Usually you only use ejs2module in development stage, it is good to install it with -D or --save-dev.
$ workspace/npm-project/>npm install --save-dev ejs2module
Then you can add build script to project's package.json like:
{
"scripts": {
"ejs2m": "ejs2module src/template/ src/render/ --script ts --async true -l model",
...
}
...
}
And every time after you modify your ejs file, just run this:
$ workspace/npm-project/>npm run ejs2m
Use js require() replace ejs include()
>In js mode, module will direct exports render function. So require and render module like this:
var result = require('./path/to/module')(payload);
$3
workspace/npm-project/src/template/sub-dir/child.ejs
==== child component ====
Msg: <%- locals.msg %>
=========================
workspace/npm-project/src/template/main.ejs
=== main start ===
<%- require('./sub-dir/child')({msg:'main message'}) %>
==================
Build ejs to js.
$ workspace/npm-project/>npx ejs2module src/template/ src/render/ -s js
Render main.js in some js file.
var result = require('./src/render/main')({});
The result should be:
=== main start ===
==== child component ====
Msg: main message
=========================
==================
Use ts(TypeScript) 'import from' and 'async' mode module
>In ts mode, module will export render function to default. So import module like this:
import uNameIt from './render/moduleName';
$3
workspace/npm-project/src/template/sub-dir/child.ejs
==== child component ====
Msg: <%- locals.msg %>
=========================
workspace/npm-project/src/template/main.ejs
<%
import subChild from './sub-dir/child';
%>
=== main start ===
<%- await subChild({msg:'main message'}) %>
==================
Build ejs to async ts.
$ workspace/npm-project/>npx ejs2module src/template/ src/render/ -s ts -a true
Render main.ts in some ts file.
import mainRender from './src/render/main';
(async function(){
let result = await mainRender();
})();
The result should be the same as above:
=== main start ===
==== child component ====
Msg: main message
=========================
==================
Install to global
Better not, because you will not keep it update.
$ install --global ejs2module