Static assets inliner


A static assets inliner, like PHP's include, with transformer!


npm install -g inline-js

Quick start

You have two files, a.txtand b.txt.




Hello world!

Run inlinejscommand:

$ inlinejs a.txt


Hello world!

Try it online


An $inline directive is composed by:

  1. A $inlinefunction.
  2. A resource definition, including a resource and optional transformers.



The $inline()directive will be replaced with the content of the file.

const a = "$inline(resource)";

Which would be converted to:

const a = "the content of the resource";


If you want to expand the replace range, pass offsets to the function:

const a = /* $inline(resource, 3, 3) */;

Which would be converted to:

const a = the content of the resource;




The entire line, excluding indent, will be replaced.

function test() {
  /* $inline.line(resource) */

Which would be converted to:

function test() {
  the content of the resource


$inline.start + $inline.end


Mark multiple lines which would be replaced by the content. There must be at leat one line between two directives, or there is no space to insert the content.

/* $inline.start(resource) */
/* $inline.end */

Which would be converted to:

/* $inline.start(resource) */
the content of the resource
/* $inline.end */


$ + $inline.close

$, skipChars) ... $inline.close(skipChars)

Replace the text between two directives. skipCharsis a number indicating how many characters should be skipped.

<!--$, 3)-->Some text<!--$inline.close(4)-->

Which would be converted to:

<!--$, 3)-->the content of the resource<!--$inline.close(4)-->



$inline.shortcut(shortcutName, expansion)

A shortcut is composed by a name and an expand pattern. You can use $1, $2, ...$9, or $&to referece the parameters.

// $inline.shortcut("pkg", "../package.json|parse:$&")
const version = $inline("pkg:version");
const author = $inline("pkg:author");
const other = $inline("pkg:other,property");

Which would be processed as:

// $inline.shortcut("pkg", "../package.json|parse:$&")
const version = $inline("../package.json|parse:version");
const author = $inline("../package.json|parse:author");
const other = $inline("../package.json|parse:other,property");


$inline.skipStart + $inline.skipEnd

Sometimes we want to disable inline-js on some directives, we can wrap the content in $inline.skipStartand $inline.skipEnd.

$inline('path/to/file') // OK
$inline('path/to/file') // won't be processed
$inline('path/to/file') // OK

Additional identifier is required if the content contains $inline.skipEnd.

$inline.skipEnd // won't be processed
$inline('path/to/file') // won't be processed

If $inline.skipEndisn't presented, it would ignore the entire file.


Resource is a JavaScript string so some characters (', ") needs to be escaped. It uses pipe expression. If written in regular expression:

(resourceType:)? resourceParam (| transform (: param (,param)* )? )*
  • If resourceTypeis missing, it defaults to "file".
  • Reserved keywords (,and |) in params need to be escaped with \.



Different resource type

inline-js can read content from different resources, which results in different types of the content (stringor Buffer). The type of the content may also affect how transformers work (e.g. dataurltransformer).

  • file: Default type. It reads the content from a file path, which may be relative to the file which requires the resource.

    The result could be a utf8 string or a Buffer, depending on the extension of the file (see is-binary-path).

  • text: Like file, but the result is always a utf8 string.

  • raw: Like file, but the result is always a Buffer.

  • cmd: Execute a command and read the stdout as a utf8 string. You may pass the second argument which represent the encoding (default: "utf8"). Passing "buffer"to get raw Bufferobject.

    Current date: $inline("cmd:date /t")

File-like resources would be cached after loaded, so inlining the same file with the same resource type multiple times would only read once.

Command resources are also cached, but it depends on cwd. For example:

  • In this example, the command cat myfileis executed once, with cwd = ".".




    $inline("cmd:cat myfile")


    $inline("cmd:cat myfile")
  • In this example, the command is executed twice. The first with cwd = "."and the second with cwd = "./dir".




    $inline("cmd:cat myfile")


    $inline("cmd:cat myfile")



  inlinejs [options] <entry_file>

  -o --out FILE         Output file. Print to stdout if omitted.
  -d --max-depth COUNT  Max depth of the dependency tree. [default: 10]
  -n --dry-run          Print the file name instead of writing to disk.
  -h --help             Show this.
  -v --version          Show version.


The list of builtin transformers

Use .inline.js

You can add your resource, transformer, and shortcut with this file.

Create a .inline.jsfile in your package root:

module.exports = {
  resources: [{
    name: "myresource",
    read: function (source, target) {
      // fetch the source
      return fetchResource(target.args[0]);
  }, ...],
  shortcuts: [{
    name: "myshortcut",
    expand: "pattern-to-expand",
    // or use a function
    expand: function (target, arg1, arg2, ...) {
      // create expand pattern
      return pattern;
  }, ...],
  transforms: [{
    name: "mytransform",
    transform: function (target, content, arg1, arg2, ...) {
      // do something to the content
      return content;
  }, ...]

resource.readand transformer.transformmay return a promise.


  • 0.8.0 (Jul 2, 2018)

    • Change: config locator and builtin transformers/resources had been split out.This repository now only contains the CLI.
    • Add: github page, inline-js REPL.
  • 0.7.0 (May 23, 2018)

    • The core inliner logic had been splitted out as inline-js-core. This repository now only contains:

      • Config locator.
      • Builtin resource loader.
      • Builtin transformers.
    • More tests.

    • Add: indenttransformer. It would indent inlined file according to the indent of the current line.

    • Add: config locator has a cache now.

    • Add: $inline()now accepts up to 3 arguments.

    • Fix: Escaped characters are correctly handled in docstringtransformer.

    • Change: In dataurltransformer, charsetis set to utf8if the content is a string. It makes sense since we actually always use utf8encoding to convert string to Buffer.

    • Change: The first argument of transform()function is changed to a transformContextobject. To access the resource, visit transformContext.inlineTarget.

    • Change: $inline.line()now preserves indent. It doesn't replace the entire line anymore.

  • 0.6.1 (Mar 16, 2018)

    • Fix: throw when cmd resource return non-zero exit code.
  • 0.6.0 (Dec 26, 2017)

    • Completely rewritten in async manner.
    • Change: the first argument of the transformer is changed to a resource object.
    • Change: resources are read in parallel.
    • Change: resources are cached after loaded.
    • Add: resourcesin .inline.js.
    • Add: cmdresource.
    • Add: transformer.transformand resource.readmay return a promise.
  • 0.5.0 (Sep 26, 2017)

    • Change: now the file would be read as binary accroding to its extension.
    • Add: ability to read/write binary file.
    • Add: source type text, raw.
  • 0.4.0 (Sep 22, 2017)

    • Fix: dataurl is unable to handle binary file.
    • Change: now transformer would recieve a fileargument.
    • Add: make dataurldetermine mimetype by filename.
  • 0.3.1 (Sep 19, 2017)

    • Fix crlf error. #3
  • 0.3.0 (Feb 4, 2017)

    • Add $inline.shortcut.
  • 0.2.0 (Jan 21, 2017)

    • Add $, close, skipStart, skipEnd, start, end, line.
    • Add transformer docstring, markdown, parse.
    • Change eval transformer.
    • Improve logging.
    • Add --max-depth option.
    • Other bugfixes.
  • 0.1.0 (Jan 21, 2017)

    • First release.





  • 🙋Hanjst汉吉斯特改进+enSafeExpression安全表达式等

    Hanjst汉吉斯特模版语言及模版引擎,近期持续改进升级。 这次改进主要是增加了对安全输出表达式兼容,由于涉及到对软件开发过程中的效率和软件运行效率的平衡和取舍,所以多写了几句,以描述这个权衡利弊对...

    1 个月前
  • 🙋Hanjst汉吉斯特升级:+showImageAsync及性能改进等

    自2019年元旦🙋Hanjst汉吉斯特 模板语言及其编译引擎发布,已经过去一年多了。 这期间随着 🙋Hanjst汉吉斯特 的推广应用,我们也陆续发布了如下一些更新内容: 🛠️Hanjst/汉吉...

    2 个月前
  • 🙋Hanjst汉吉斯特优化+JsonDataFromScript等

    近日继续对 🙋Hanjst汉吉斯特优化改进。这次的改进思考是从服务器端返回的 HanjstJsonData的容器设计问题。目前的做法是服务器端的HanjstJsonData放入终端页面的一个Div元...

    23 天前
  • 😉我用 Nuxt.js 仿了个掘金

    前言 首先肯定是要夸夸掘金啦,最开始从 CSDN 到 博客园 再到 掘金,个人感觉掘金的技术氛围非常的nice,真是个宝藏社区👏。技术文章大多以前端为主,对前端开发者非常友好,质量也是歪瑞古的。

    2 个月前
  • 😀一个原生js弹幕库

    danmujs 😀一个原生js弹幕库,基于 CSS3 Animation 地址、核心代码 本项目基于 rcbullets,项目约70%的代码基于rcbullets,首先要感谢这个项目的作者,如...

    5 个月前
  • 🕵️‍♀️由原型到JS中的“模拟类”

    讲述了有关 JavaScript 中原型相关知识,又引出了 JavaScript 中的“类“究竟是什么?,以及一系列相关问题。 一、前置知识 1、JavaScript 的面向对象(OOP) ​ 面向...

    3 个月前
  • 🔥《吊打面试官》系列 Node.js 必知必会必问!

    (/public/upload/f204a3b224d986128f1b4d9b8d06cd17) 前言 codeing 应当是一生的事业,而不仅仅是 30 岁的青春🍚 本文已收录 Git...

    3 个月前
  • 💖CSS + JS 送学妹满屏幕小爱心

    故事开始 午饭时间,暗恋已久的学妹拉着我的衣袖:“学长学长,你能不能让这些爱心变成五颜六色的吗~”。 我在旁边笑开了花~~~ image.png(/public/upload/04aaa24e...

    2 个月前
  • (vuejs学习)2、使用ElementUI(*)

    1.element安装 开发环境是win10,一到node官网下载node的.msi包(

    1 年前
  • (vuejs学习)1、Vue初上手(*)

    参考《官方(》官方: Node 版本要求: Vue CLI 需要 Node.js 8.9 或更高...

    1 年前


扫码加入 JavaScript 社区