文档 / 组件开发

组件开发

如何在多个工程间共享资源

当工程间需要复用资源（比如一些基础库）的时候，为了避免在不同的项目内多次引入和拷贝相同的资源，我们可以在多个工程间进行资源共享。

工具版本

lighting v1.2.4-20170120 以上的版本可以支持工程间资源共享。

使用场景

  1. 多个工程使用相同的基础库
  2. 多个工程有相同或相似的业务

使用方法

首先，需要在 project.json 文件中配置当前项目所依赖的工程，例如：

{
    "project":"test2",
    "version":"0.0.1",
    "desc":"Just For Fun",
    "type":"light-1.0",
    "plugins":["vue","less"],
    "config":{
        "packager":{
            "env":["uat","sit","prod"],
            "files":["config.${env}.js"]
        },
        "dependency": {
            "dep": {
                "path": "E:\\lightIN"
            }
        }
    }
}

其中，dep代表工程别名，path代表工程的路径（可以是相对路径也可以是绝对路径）。

<!DOCTYPE html>
<html>
<head>
    <snippet id="header" />
    <link rel="stylesheet" href="css/style.css" />
    <link rel="stylesheet" type="text/css" href="@dep/animate.css" />  <!-- 引入样式表 -->
    <title>dep-projext-Just For Fun</title>
</head>
<body>
    <div id="main">
        <view id="index" home="true" />
        <view id="view1" ref="@dep/view1"/>  <!-- 引入视图 -->
        <img src="@dep/select.png">  <!-- 引入图片 注意：select.png对应的是lightIN/src/images目录下的文件  -->
    </div>
    <snippet id="footer" />
    <script type="text/javascript" src="//res.lightyy.com/lighting/framework/light-1.0.min.js"></script>
    <script type="text/javascript" src="config.js"></script>
    <script type="text/javascript" src="@dep/lib/underscore.js"></script>
    <script type="text/javascript">
        Light.start();
    </script>
</body>
</html>

当前支持四种资源的复用，如以上代码所示：

  1. 样式表文件： <link rel="stylesheet" href="@dep/animate.css" />，其中@dep代表使用 project.json 文件中 dep 工程下的 animate.css，对应目录规范的 css 目录。
  2. 图片文件：<img src="@dep/icon.png" alt="">，对应目录规范的 images 目录。
  3. 视图文件：<view id="view1" ref="@dep/view1"/>，代表的工程间资源依赖，对应目录规范的 html/view 和 js/view 目录。
  4. 脚本文件：<script src="@dep/lib/underscore.js"></script>，对应目录规范的 js 目录。

这里需要说明的是，请遵守 lighting 工程的目录规范，以正确、正常地在工程间共享资源。