我用不同的库尝试了WebComponents并记录了笔记

2 年 ago
宇, 华
4 minutes

使用 web 组件来实现 Hello World

由于在 WEB+DB 上特别推荐了一篇文章，所以我进行了尝试。
为了创建构建环境，我使用了 Docker。
顺便试了试 Angular 和 Elm 等技术。

这个时候的源文件

尺寸比较

由于这只是一个只显示”Hello world”的Web组件比较，所以主要是库的大小方面。

vagrant@ubuntu-bionic[master]: $ ls ../server/dist/ -alh
total 448K
drwxrwxrwx 1 vagrant vagrant    0 May 10 08:33 .
drwxrwxrwx 1 vagrant vagrant    0 May 10 08:33 ..
-rwxrwxrwx 1 vagrant vagrant 3.2K May 10 20:55 tsApp.js
-rwxrwxrwx 1 vagrant vagrant  26K May 10 20:56 elmApp.js
-rwxrwxrwx 1 vagrant vagrant  79K May 10 20:57 vueApp.js
-rwxrwxrwx 1 vagrant vagrant 120K May 10 20:47 reactApp.js
-rwxrwxrwx 1 vagrant vagrant 215K May 10 08:07 angularApp.js

比較描述

Vue是一个流行的JavaScript框架。

<template>
  <div>
    <p>Vue-app</p>
  </div>
</template>

import Vue from 'vue';
import App from './App';
import vueCustomElement from 'vue-custom-element';

Vue.use(vueCustomElement);

Vue.customElement('vue-app', App);

回应

import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  render() {
    return <div>React-app</div>;
  }
}

// Custom ElementとするためにHTMLElementを継承
class CustomElementsApp extends HTMLElement {
  connectedCallback() {
    const mountPoint = document.createElement('div');
    this.attachShadow({ mode: 'open' }).appendChild(mountPoint);
    ReactDOM.render(<App />, mountPoint);
  }
}

customElements.define('react-app', CustomElementsApp);

Elm – 榆树 (Yǔ shù)

module App exposing (main)

import Html exposing (Html, text)


main : Html msg
main =
    text "Elm App"

const { Elm } = require("./App.elm");

class ElmApp extends HTMLElement {
  connectedCallback() {
    Elm.App.init({ node: this });
  }
}

customElements.define("elm-app", ElmApp);

角度/角度的意思

import { Component, Injector } from '@angular/core';
import { createCustomElement } from '@angular/elements';
import { HelloComponent } from './hello/hello.component';

@Component({
  selector: 'angular-app',
  template: ``,
})
export class AppComponent {
  constructor(
    private injector: Injector,
  ) {
    const AppHelloElement = createCustomElement(
      HelloComponent,
      { injector: this.injector }
    );
    customElements.define('angular-app', AppHelloElement);
  }
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-hello',
  templateUrl: './hello.component.html',
  styleUrls: ['./hello.component.css']
})
export class HelloComponent {
  title = 'angular-app';
}

<!--The content below is only a placeholder and can be replaced.-->
<div>
  {{ title }}!
</div>

import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';

import { AppComponent } from './app.component';
import { HelloComponent } from './hello/hello.component';

@NgModule({
  imports: [BrowserModule, FormsModule],
  declarations: [AppComponent, HelloComponent],
  bootstrap: [AppComponent],
  entryComponents: [HelloComponent]
})
export class AppModule { }

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.error(err));

TypeScript是一种编程语言。

class TsApp extends HTMLElement {
  constructor() {
    super();
    const shadow = this.attachShadow({ mode: 'open' });
    const wrapper = document.createElement('span');
    wrapper.setAttribute('class', 'wrapper');
    const info = document.createElement('span');
    info.setAttribute('class', 'info');
    info.textContent = 'ts-app';
    shadow.appendChild(wrapper);
    wrapper.appendChild(info);
  }
}
customElements.define('ts-app', TsApp);

被卡住的地方

据说在最新版本的ts和core-js中，Angular会出现错误。
此外，由于容器中没有安装Chrome，所以需要安装它。这是为了Karma使用的。

FROM node:11.15.0

# コンテナ上の作業ディレクトリ作成
WORKDIR /app

RUN yarn add --dev \
  @angular/compiler-cli \
  @angular-devkit/build-angular \
  @angular/cli \
  @angular/language-service \
  @types/jasmine \
  @types/jasminewd2 \
  @types/node \
  codelyzer \
  jasmine-core \
  jasmine-spec-reporter \
  karma \
  karma-chrome-launcher \
  karma-coverage-istanbul-reporter \
  karma-jasmine \
  karma-jasmine-html-reporter \
  protractor \
  ts-node \
  tslint

RUN yarn add \
  @angular/animations \
  @angular/common \
  @angular/compiler \
  @angular/core \
  @angular/elements \
  @angular/forms \
  @angular/http \
  @angular/platform-browser \
  @angular/platform-browser-dynamic \
  @angular/router \
  rxjs \
  zone.js \
  document-register-element 

# ERROR in The Angular Compiler requires TypeScript >=3.1.1 and <3.3.0 but 3.4.5 was found instead.
RUN yarn add --dev typescript@3.2.x
# core-js 3.0系だとエラー
RUN yarn add core-js@2.6.x
# test用
RUN \
  apt-get update && \
  apt-get install -y wget curl unzip apt-utils && \
  mkdir -p /home/root/src && cd $_ && \
  wget -q -O /tmp/chromedriver.zip http://chromedriver.storage.googleapis.com/`curl -sS chromedriver.storage.googleapis.com/LATEST_RELEASE`/chromedriver_linux64.zip && \
  unzip /tmp/chromedriver.zip chromedriver -d /usr/local/bin/ && \
  apt-get install -y libappindicator1 fonts-liberation libasound2 libnspr4 libnss3 libxss1 lsb-release xdg-utils && \
  touch /etc/default/google-chrome && \
  wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb 
RUN apt-get install -y libappindicator3-1 \
  libatk-bridge2.0-0 \
  libatspi2.0-0 \
  libgtk-3-0 
RUN cd /home/root/src && wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb  && dpkg -i google-chrome-stable_current_amd64.deb && \
  apt-get install -y fonts-migmix

考察以下中文的同义表达，仅提供一种选项：

参考文献中的信息。

Web+DB PRESS第110号
解决单一组件错误
使用Docker Compose快速启动Nginx容器
将Elm与其他框架组合使用
npm
Angular组件
尝试使用docker-compose创建angular-cli的环境
使用Docker构建基于headless-chrome的爬虫环境
在Ubuntu上安装Chrome
karma headless chrome
使用lit-html和纯Web组件实现组件功能
通过”仅使用Web组件”实现新服务，并发现的事情

bannerAds