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:UsersJiXiaoHuaAppDataRoaming pm ode_modulespolymer-cli ode_modulespuppeteer > 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
关于组件化的文章：大话前端组件化，