前端进阶之路组件化

Posted 2020-11-23 jixiaohua

1、一些感悟

自从踏入编程领域开始，前端水平从刚开始的html，css，javascript，jQuery，bootstrap这几个略有了解的前端点开始，许久过去了，忽然发现还是停留在这里。打开别人的代码一看，发现这已经不是我所认识的JavaScript与HTML，相比于Java，c++等相对稳定的后端语言，JS在Web领域以让人眼花缭乱的节奏绽放，发现自己已经更不上时代了，故打算补充一代点前端知识，以后看见别人的代码不至于一脸懵逼。

2、Web组件化

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