LitElement(一)概述

1、一些感悟

自从踏入编程领域开始，从html，css，JavaScript，jQuery，bootstrap开始接触前端，经常用NodeJS，ejs等模板语言来写个简单的页面，感觉蛮简单的，也不怎么放在心上。有一天看了看React的代码，感有种懵逼的赶脚，但也就当JS看了，然而什么虚拟DOM，Native，单向数据流，组件就不太懂了，感觉我可能有点落后了。故打算补充一点前端知识，以后看见别人的代码不至于一脸懵逼。

2、LitElement Start

今天阅读webrtc屏幕共享的example，忽然发现main.js的代码风格由前面几个的纯js变成了自定义组件的风格，一下子看的有点凌乱，于是决定就从这里开始，代码中引用了如下一行

import {LitElement, html} from 'https://unpkg.com/@polymer/lit-element@0.6.2/lit-element.js?module';

拿到自己的环境中一试，果断运行不起来，查了一下发现这个LitElement原来是个前端组件工具，官网地址，先运行其给的 Quick start体验一下，但是一运行

npm install -g Polymer-cli

安装环境，发现需要 下载puppeteer和Chromium，有时有可能下载比较慢，需要耐心等待，或换个时间段下载

> puppeteer@1.18.1 install C:\Users\JiXiaoHua\AppData\Roaming\npm\node_modules\polymer-cli\node_modules\puppeteer
> node install.js

Downloading Chromium r672088 - 141 Mb [===========         ] 53% 2529.8s

关于Puppeteer，见 Puppeteer 初探，前面测试Electron和NWJs的时候用到过这个东西

在我浏览Puppeteer的时候忽然发现了如下一段话，可以换这种方法

安装puppeteer时如果无法下载Chromium，可以使用[puppeteer-cn](https://npm.taobao.org/package/puppeteer-cn)代替的。这个包先检查你本地chrome是否大于59，再决定是否安装Chromium，并且使用国内源安装，速度很快且保证成功。

然后装完了又开始这个，不知道为什么，这个是真个不动，selenium是一个web应用测试工具，参考https://www.jianshu.com/p/3aa45532e179，试了几次都不行，所以我直接ctrl+c掉了，并不需要这东西，其实上面的Puppeteer也应该是不需要的，LitElement好像是对Polymer的简化，所以Polymer构建工具是必须的，Polymer是个和前端三大框架同级的东西，不过不怎么火，官网地址。

----------
selenium-standalone installation starting
----------

然后克隆代码，安装依赖，运行静态服务就可以访问了

npm install -g polymer-cli
git clone https://github.com/PolymerLabs/start-lit-element
cd start-lit-element
npm install
polymer serve

这里关于ploymer server命令相关的东西需要注意一下，详见官网命令部分文档，可以自定义指定启动端口，IP，build构建目录等，然后两个firebase文件是用来部署在谷歌云服务器上的，对我们来说没啥作用。关于目录结构和相关文件的作用见https://blog.csdn.net/weixin_43171402/article/details/82588145。

要部署项目文件，比如说可以选择直接将ploymer build的路径指向node express的public目录，或其他http/https服务器上相关目录下，这样一来就不用server和app起两个服务了。

3、用于生产环境的LitElement构建

虽然用ploymer构建工具可以初始化一个项目并build，但是LitElement可以说是逐渐从ploymer中独立了出来，使用ploymer的构建方式显得有些累赘，好在官网提供了使用Rollup打包的例子，见文档和示例项目，这才是LitElement的正确使用方法。

可以发现Bable+Rollup打包后的项目非常的简洁，没有ploymer相关的东西，只是将依赖模块做了路径转换，并且可以用serve工具启动预览项目，serve文档见npm说明，这是一个很方便的启动http服务的工具，可以自动检测空闲端口。比如说有个html文件夹，下面有一组静态资源，全局安装serve后只需要serve html就可以启动一个静态资源服务器，比node http和tomcat等更加方便。

4、实用的Rollup打包教程

有基本使用方法，多文件输出等等，必备技能，详见：https://segmentfault.com/a/1190000010628352

关于组件化的文章：大话前端组件化，