1资源分配特点

coolie 是前端工程的构建方案，以页面（html）为导向，JS 和 CSS 都是 HTML 的描述文件。

  1. <!--app.html-->
  2. <!doctype html>
  4. <link href="style.css" rel="stylesheet">
  6. <script src="app.js"></script>

如上，style.css是app.html的样式修饰，app.js是app.html的行为修饰。

2资源关系图

因此，coolie 构建的之后的资源关系图就是这样划分的，来看看一个教完整的示例：

  1. {
  2.     "/html/app1.html": {
  3.         "main": [
  4.             {
  5.                 "src": "/static/js/app/app1.js",
  6.                 "dest": "../dest/static/js/app/app1_file_version.js",
  7.                 "deps": [
  8.                     "/static/js/libs1/1.js",
  9.                     "/static/js/libs1/2.js"
  10.                 ]
  11.             }
  12.         ],
  13.         "async": [
  14.             {
  15.                 "src": "/static/js/async/app1.js",
  16.                 "dest": "../dest/static/js/async/app1_file_version.js",
  17.                 "deps": [
  18.                     "/static/js/libs1/1.js",
  19.                     "/static/js/libs1/2.js"
  20.                 ]
  21.             }
  22.         ],
  23.         "js": [
  24.             {
  25.                 "dest": "../dest/static/js/jquery_file_version.js",
  26.                 "deps": [
  27.                     "/static/js/3rd/jquery.js"
  28.                 ]
  29.             }
  30.         ],
  31.         "css": [
  32.             {
  33.                 "dest": "../dest/static/css/css1_file_version.css",
  34.                 "deps": [
  35.                     {
  36.                         "src": "/static/css/libs/0-normalize.css",
  37.                         "res": []
  38.                     },
  39.                     {
  40.                         "src": "/static/css/libs/1-base.css",
  41.                         "res": []
  42.                     }
  43.                 ]
  44.             },
  45.             {
  46.                 "dest": "../dest/static/css/css2_file_version.css",
  47.                 "deps": [
  48.                     {
  49.                         "src": "/static/css/modules/erp/header.css",
  50.                         "res": [
  51.                             "/static/img/modules/front/public.png"
  52.                         ]
  53.                     },
  54.                     {
  55.                         "src": "/static/css/modules/erp/sidebar.css",
  56.                         "res": [
  57.                             "/static/img/modules/erp/sidebar_icon.png"
  58.                         ]
  59.                     },
  60.                     {
  61.                         "src": "/static/css/modules/erp/footer.css",
  62.                         "res": [
  63.                             "/static/img/modules/front/public.png"
  64.                         ]
  65.                     }
  66.                 ]
  67.             }
  68.         ]
  69.     }
  70. }

首先，按照页面的路径为键分成不同的对象：

  1. {
  2.     "app1.html": {},
  3.     "app2.html": {}
  4. }

然后，在每一个 HTML 文件里依赖了各种描述文件。

  1. "app1.html": {
  2.     "main": [],
  3.     "async": [],
  4.     "js": {},
  5.     "css": {}
  6. }

以上，分别为：

  • main：同步模块入口文件数组（一个 html 模板文件可以使用模板引擎条件判断输出不同的同步入口模块文件）
  • async：异步模块入口文件数组（一个同步模块文件可以使用脚本条件判断载入不同的异步入口模块文件）
  • js：非模块化的脚本分组文件
  • css：link 分组的样式文件
    接续往下看
  1. "main": [
  2.     {
  3.         "src": "/static/js/app/app1.js",
  4.         "dest": "../dest/static/js/app/app1_file_version.js",
  5.         "deps": [
  6.             "/static/js/libs1/1.js",
  7.             "/static/js/libs1/2.js"
  8.         ]
  9.     }
  10. ]

同步入口模块的信息：

  • src：同步入口模块的原始文件路径
  • dest：同步入口模块构建之后的文件路径
  • deps：同步入口模块依赖的模块数组
    异步模块里的信息与同步模块一致。
  1. "js": [
  2.     {
  3.         "dest": "../dest/static/js/jquery_file_version.js",
  4.         "deps": [
  5.             "/static/js/3rd/jquery.js"
  6.         ]
  7.     }
  8. ]

JS 里配置的是非模块化脚本的分组合并情况，如上

  • dest：合并之后的文件路径
  • deps：待合并的文件数组
    CSS 的配置与之一致，只是 css 里多了一个引用资源信息：
  1. "css": [
  2.     {
  3.         "dest": "../dest/static/css/css2_file_version.css",
  4.         "deps": [
  5.             {
  6.                 "src": "/static/css/modules/erp/header.css",
  7.                 "res": [
  8.                     "/static/img/modules/front/public.png"
  9.                 ]
  10.             },
  11.             {
  12.                 "src": "/static/css/modules/erp/sidebar.css",
  13.                 "res": [
  14.                     "/static/img/modules/erp/sidebar_icon.png"
  15.                 ]
  16.             },
  17.             {
  18.                 "src": "/static/css/modules/erp/footer.css",
  19.                 "res": [
  20.                     "/static/img/modules/front/public.png"
  21.                 ]
  22.             }
  23.         ]
  24.     }
  25. ]
  • dest：合并之后的文件路径
  • deps：待合并的文件数组
    • src：待合并的文件路径
    • res：待合并的文件引用的资源数组

原文: https://coolie.ydr.me/introduction/resource-relationship-map