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

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

posted @ 2019-11-28 22:30  姬无华  阅读(2999)  评论(0编辑  收藏  举报