1什么是 coolie 指令

coolie 指令指的是可以在源代码里书写的一些不影响代码运行并且可以被 coolie-cli 识别的标记。

2coolie

标记当前 script 是模块加载器所在的标签。

  1. <script coolie src="/path/to/coolie.js"
  2. data-main="main.js"
  3. data-config="coolie-config.js"></script>
  5. =>
  7. <script src="/static/js/xxx.js" data-main="yyy.js" data-config="~/static/js/zzz.js"></script>

在构建过程中，coolie-cli 会识别出标记 coolie 的标签，并且会查找该 script 标签上的data-main和data-config属性来确认入口模块和模块加载器配置文件。

3<!—coolie—><!—/coolie—>

包裹 html 标签，标识范围内的 script、link 合并成一组

  1. <!--coolie-->
  2. <script src="1.js"></script>  ====>
  3. <script src="2.js"></script>  ====> 1-2-3.js
  4. <script src="3.js"></script>  ====>
  5. <!--/coolie-->

4coolieignore

标签当前标签可以被 coolie-cli 忽略构建。

  1. <img src="{{templateVarible}}" coolieignore />
  3. =>
  5. <img src="{{templateVarible}}">

5cooliebase64

标签当前资源需要构建成 base64 形式，在资源的 URL 末尾（必须）添加#cooliebase64即可。

  1. <style>
  2. body {
  3.     background: url(/path/to/body.png#cooliebase64);
  4. }
  5. </style>
  6. <img src="/path/to/image.png#cooliebase64" />
  8. =>
  10. <style>body{background:url(data:image/png;base64....)}</style>
  11. <img src="data:image/png;base64...">

原文: https://coolie.ydr.me/introduction/coolie-directive