lego组件接入记录

[longyiyiyu]

lego组件接入记录 - on mobilev2

1. 准备工作

浏览lego网站，了解以下内容：

• lego是什么
• lego可以提供什么服务
• lego的使用
• 组件的开发
  • 初始化
  • 文档说明
  • 测试
  • 发布
• 组件的使用
  • 资源组织方式
  • 资源使用方式

2. 安装lego

npm install -g lego

顺利安装，没什么问题 安装好lego之后，下面打算接入一个fis组件tip

3. 初始化组件

mkdir tip
cd tip
lego init

但是出现了常见的办公机代理问题：

通过命令lego help config发现配置方式和npm的很像，所以尝试了npm的代理设置方式：

lego config set proxy http://proxy.tencent.com:8080

结果还是不行，没办法，最后只能通过proxifier解决，在初始化的过程中还遇到一个小问题，记录如下：

初始化之后的一些文件还是没有清除干净，还留了spmjs的痕迹，examples/index.md：

4. 组件开发

在开发组件的过程中，最大的困扰点是路径依赖问题，包括图片，css，js，不知道有html的组件怎么办？ 然后就想看看现有的组件是怎么写的，然后悲催的发现现在lego系统上已有的组件都是基础的逻辑组件，根本没有什么依赖，好不容易找到一个可能有依赖的组件，看源代码之后就会发现它是这么处理的：

不是说好的commonJS么，我能说坑么。。

不管一直存在的通用组件的路径依赖问题，也不管fis的路径特性问题，我们在开发组件的时候考虑通用性就好，于是，在各种依赖路径的问题上，我们都是参考node方式，所以有如下代码：

基本就是通过相对路径，去看arale组件的写法也是这样的，不过他们有seajs配合，但是fis就不行了。。 开发完之后怎么测试？反正我不知道。。。 好了，先发布再说：

lego login
lego publish

然后我们可以看到lego系统上就出现了我们的组件：

5.使用组件

怎么使用组件？系统上并没有较详细的说明，反正就一句：类似node 那既然如此，我们来试一下。 随便拉一个公众号的分支或者主干也成，然后到src/modules/文件下执行命令：

lego install tip

然后可以看到有以下目录结构：

然后在首页那里尝试使用：

样式也需要修改一下：

运行，然后就可以看到tip出来了：

然后我们看一下dist文件里面：

可以看到我们通过相对路径实现的css依赖和img依赖都没有问题。

但是我们关于其他组件的依赖是有问题的：

在这里没有报错的原因是系统本身就有zepto库。

综上，如果实现了关于lego组件调用的fis插件的话，业务使用lego组件将会非常简单 只需要2步就可以使用lego组件：

#在适当的位置安装组件
lego install my-com

//在业务代码中
var myCom = require('my-com');

6. 组件更新

组件的更新维护也是很方便的 在测试的过程中，发现组件代码有一些问题，于是我们进行了修改：

修改完毕之后，我们需要修改组件的版本号，这个要在组件根目录下面的package.json里面修改：

最后，我们只需要和之前发布操作一样发布组件就可以更新了：

刷新一下lego网站：

升级维护一个组件是不是很方便？ 组件更新了，那我们业务也可能需要使用最新的组件代码，于是我们回到之前的src/modules/目录下：

lego install tip

这里应该有更新语句的，可能是update吧，不过没必要纠结，只要记住一条命令可以用就成！

可以看到新的组件已经下载下来了，不过并没有覆盖旧的版本：

为了使用新组件的代码：

如果lego组件的fis插件完成的话，我们业务使用的代码将会是：

require('tip').show('初始化...', {interval: 10000});

而fis插件将会帮助我们直接使用本地最新版本的tip组件代码，因此业务只需要更新组件的最新代码，完全不用修改业务源代码就可以使用到最新版本的lego组件。

另一种情况，如果首页使用最新的tip组件代码，但是详情页使用旧版的tip代码，这样也没有问题：

require('tip').show('初始化...', {interval: 10000}); //始终使用本地最新版本代码
require('lego_modules/tip/0.0.2/index').show('初始化...', {interval: 10000});    //使用0.0.1版本的代码

实际上fis插件只是帮助我们简写路径而已

7. 小结

可以看到lego系统基本可用，下面总结一下这次lego组件接入的情况

7.1 槽点

• 使用lego要一直开着proxifier不是很爽
• 开发组件的时候，需要依赖另一个组件时，需要到lego系统上面查找版本号，然后手动修改package.json，能不能开发一个命令，比如lego addDep zepto，然后系统自动帮我们查询zepto组件是否存在，最新版本号是多少，让我们输入依赖版本号之后自动帮助我们修改package.json

7.2 组件开发

组件开发时遵循下面两条即可

• 依赖组件内部资源时写相对路径
• 依赖其他组件时直接写组件路径

7.3 展望

其实lego组件非常适合用在移动端fis构建环境，从上面的接入过程就可以看到，基本没有遇到什么困难，但那是因为在移动端fis构建环境下 通用组件最大的问题在于依赖，其中有两个：

1. css依赖，使用组件的时候，组件的css要怎么使用？是外链到html还是直接打入到main.css？其实不管哪一种，都是需要构建工具帮助我们识别css文件，然后放到合适的位置。但是在移动端fis却不用，因为fis可以把css文件当成js文件来处理，动态插入css代码，依赖js比依赖css简单多了，这里需要注意一点，如果是其他构件工具，需要把js代码里面依赖css的语句干掉。。。
2. img依赖，css中的图片路径问题就不多说了，同样，因为在fis中把css当成了js对待，因此路径依赖也变成了js中的img路径依赖，也变得简单了

这就是为什么在公众号下使用lego组件好像没遇到什么困难的原因。。。 实际上，要在其他环境下使用lego组件是需要很好的构建工具支持的，具体的交给小卡君了。。。

最后提一下公众号这边的展望 目前内链html是通过这样的语法：

<link rel="import" href="modules/common/header/header.html?__inline">

在使用组件时，也希望可以使用这种语法来内链组件的html代码，比如：

<link rel="import" href="tip?__inline">

这里我们需要扩展__inline语法，支持自动在lego_modules文件夹下搜索本地最新版本的组件，并且自动内链组件目录下的index.html代码

另一点关于图片合并问题，不过公众号这边的css sprite工具都还没有，所以暂时就不展望了，不过如果组件包含图片，那这里肯定会有需要解决的问题的，不过一般组件不包含图片，所以优先级不高

[herbertliu]

@longyiyiyu 非常的赞，大概扫了一下，很完整的建议，我慢慢消化。

[webryan]

非常赞的总结。 @herbertliu 尽快排期处理掉遇到的一些问题。

[chyingp]

几点想法：

1. css依赖：结合组件的设想，这里有个初步的想法。假设tip组件内部的机构如下

tip/
tip/header.html
tip/header.css
tip/header.js

那么，组件的引用方可以直接引用组件。无论哪种引用方式，最终目的就是：组件适用方无需关心组件内部依赖了哪些资源。正在思考实现方式，敬请期待。

这样
<link rel="import" href="tip?__inline">

或
<component href="tip">

或
...

[jiangyuan]

@herbertliu

使用lego要一直开着proxifier不是很爽

lego 在开发机使用的门槛太高。

[herbertliu]

@jiangyuan 开发机目前不能访问imweb.io，公司网络环境决定。暂时先用代理解决吧。也可以考虑同步内部源，我们再统一同步。

[herbertliu]

@longyiyiyu 办公网的问题，后面再看看是否通过代理来弄。组件规范后续会加强，严格遵循commonjs，其他的已优化。版本号查找正在排期中。