LitElementとTailwindから始める

11697 ワード
javascripttailwindcs テキストリンク

LitElementとTailwindから始める


LotElementの薄い層をWebサイトのTailwindのCSSユーティリティクラスのほぼ無限の提供と組み合わせることによって、あなたは、完全に美しく、完全にカスタムを作成することができます信じられないほどのパフォーマーデータ駆動のユーザーインターフェイスを簡単に.

ツーリング


我々は可能な限り迅速に、できるだけ開発者の経験として私たちを与えるためのツールの組み合わせを使用する予定です.

  • RollupJS - モジュールのバンドルに対するロールアップのアプローチは、ノードのCommonJSモジュールシステムとは対照的に、ネイティブのJavaScriptモジュール標準ESモジュールに依存します.

  • Babel - Babelは私たちがES 5に私たちのコードをコンパイルすることによって最新のJavaScript機能を使用するのを許します.

  • TypeScript - 生産中のエラーを誘発することよりも、開発中の愚かなエラーを持つ方が良い.Typescriptはバグを減らすことによって私たちの背中を得ました我々のコードで紹介します.
  • ESLint
  • Prettier

    • rolulupjsと初期設定のインストール


    ロールプは優れているstarter-app 我々はすぐに行くために使用できるテンプレート.そのレポをクローンし、我々は出発点として使用します.
    これらのファイルを作成/編集/削除します
  • LICENSE - これは単なるプロトタイプですので、このファイルは必要ありません.
  • README.md - 繰り返しますが、これは単なるプロトタイプですので、どちらも必要ありません.
  • src/update.js - これは削除できます.
  • public/index.html - 私たちは<h1> と<p> タグ.私たちは新鮮に出発します.
  • package.json - 削除するdate-fns 依存.
  • src/main.js - それを更新するので、私たちの設定をテストする単一のコマンドがあります.console.log('Hello, World!')
    • その後、最初のロールアップセットアップをテストしましょう.
  • yarn install or npm install 依存関係をインストールするには
  • yarn dev or npm dev 開発環境を実行するには
  • 移動するlocalhost:5000
  • 我々のテストメッセージを見るためにdevのツールを開きます

    • バベルとタイプスクリプトの設定


    BabelとTypesScriptを設定するには、我々はRollupのバベルを利用しますplugin , そして、Babelを私たちのタイプスクリプトコードをコンパイルするように設定します.
    次の依存関係をインストールします.
  • @babel/core
  • @rollup/plugin-babel
  • @babel/preset-env
  • typescript
  • @rollup/plugin-typescript
  • @babel/preset-typescript
    • 次のファイルを編集します
  • src/main.js 改名src/main.ts
  • rollup.config.js
    • Babelプラグインをインポートして使用し、入力ファイルを.ts ファイル( typescript )
    import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
import { babel } from '@rollup/plugin-babel'

// `npm run build` -> `production` is true
// `npm run dev` -> `production` is false
const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.ts',
  output: {
    file: 'public/bundle.js',
    format: 'es',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    typescript({
      include: ['src/**/*.ts']
    }),
    babel({
      babelHelpers: 'bundled',
      exclude: "node_modules/**"
    }),
    production && terser({ format: { comments: false } }), // minify, but only in production
 ]
};
  • .babelrc - を作成し、セットアップBabelの設定ファイルは、最小のES 5コードにコンパイルする.
    • {
  "presets": ["@babel/preset-env"]
}
  • tsconfig/json - コマンドを使用して、typescript設定ファイルを作成しますyarn tsc --init

    • eslintとprettierの設定


    次の依存関係をインストールします.
  • eslint
  • prettier
  • eslint-config-prettier
  • eslint-plugin-prettier
    • ランyarn eslint --init を作成するには、次のオプションを選択します.eslintrc.js , 設定ファイル.
  • コードスタイルを実施
  • ジャバスクリプト
  • フレームワーク
  • タイプスクリプト
  • ブラウザでプロジェクトが実行される
  • を使用してください
  • config format JavaScript
    • この後、IDE(私のシナリオではVSコード)はeslint構成を認識し、いくつかの問題を私のやり方で投げていることがわかります.

    イン.eslintrc.js
  • 追加'plugin:prettier/recommended' にextends アレイ
  • 追加'prettier' プラグインの配列に
  • 追加"prettier/prettier": "error" ルールオブジェクトに
    • 作成と設定.prettierrc , 設定ファイルの設定.この単一の行は、任意のウィンドウの開発者のため、行のきれいな問題の任意の奇妙な終了を防ぐためです.
    {
  "endOfLine": "auto"
}

    データ要素を用いたユーザインタフェースの作成


    今我々は堅実なツールのセットアップを持って、いくつかのUIをコード化することができますLitElement .
    LitElementは薄いラッパですWeb Components . これは、UIを宣言して状態の関数として記述する方法を提供します.LitElementとReactiveまたはVueのような別のフレームワークの間にあるのは、LITElementがWebのネイティブコンポーネントモデルの上に構築されている点です.
    「こんにちは、世界」の義務をコードしましょう
    まず、インストールlit-element プロジェクトへの依存yarn add lit-elementWebコンポーネントを使用するには、src/main.ts , で新しいコンポーネントを使用しますpublic/index.html .src/main.ts
    import { LitElement, customElement, html } from "lit-element";

@customElement("app-component")
export default class AppComponent extends LitElement {
  render() {
    return html` <h1>Hello, World!</h1> `;
  }
}
    public/index.html
    <!doctype html>
<html>

<head lang='en'>
  <meta charset='utf-8'>
  <meta name='viewport' content='width=device-width'>
  <title>LitElement w/ Tailwind</title>

  <style>
    body {
      font-family: 'Helvetica Neue', Arial, sans-serif;
      color: #333;
      font-weight: 300;
    }
  </style>
</head>

<body>
  <app-component></app-component>
  <script type="module" src='bundle.js'></script>
</body>

</html>
    おそらくいくつかのeslintとtypescriptの問題に実行されます.用心深いのは、

  • タイプスクリプトのデコレータ@customElement() と呼ばれるタイプスクリプトの特徴decorator . それらを使用するには、明示的に機能をあなたのtsconfig.json .

  • クラスメソッド' Render 'によって使用される' this 'を期待します.これは私たちが使用していないことに気付きますthis インスタンスメソッドrender() . 私たちは、私たちに規則を加えることによって特定の機能を無視するようにeslintに言うことができますeslintrc.js
    • あなたが持っている可能性のあるリンギングの問題を解決した後、あなたのハロー、世界を持っている必要があります!

    尾風を持つスタイリング部品


    今、我々は我々のプロジェクトにTailwindを加えるつもりです.
    次の依存関係をインストールします.
  • rollup-plugin-postcss
  • tailwindcss
  • postcss
  • autoprefixer
    • 次のコマンドを実行して、tailwind構成ファイルを生成します.npx tailwindcss init tailwindcss.config.js
    module.exports = {
  purge: [
    './src/**/*.html',
    './src/**/*.js',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {
    extend: {},
  },
  plugins: [],
}
    次のファイルを作成/編集しますrollup.config.js
    import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import { terser } from 'rollup-plugin-terser';
import typescript from '@rollup/plugin-typescript';
import { babel } from '@rollup/plugin-babel'
import postcss from 'rollup-plugin-postcss' // import postcss plugin

const production = !process.env.ROLLUP_WATCH;

export default {
  input: 'src/main.ts',
  output: {
    file: 'public/bundle.js',
    format: 'es',
    sourcemap: true
  },
  plugins: [
    resolve(),
    commonjs(),
    postcss(), // use postcss plugin
    typescript({
      include: ['src/**/*.ts']
    }),
    babel({
      babelHelpers: 'bundled',
      exclude: "node_modules/**"
    }),
    production && terser({ format: { comments: false } }),
  ]
};
    postcss.config.js
    module.exports = {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  }
}
    src/styles.css
    @tailwind base;
@tailwind components;
@tailwind utilities;
    src/main.ts
    import './styles.css' // import the tailwind styles
import { LitElement, customElement, html } from "lit-element";

@customElement("app-component")
export default class AppComponent extends LitElement {
  createRenderRoot() {
    return this; // turn off shadow dom to access external styles
  }
  render() {
    return html` <h1 class="mx-auto my-4 py-4 text-center shadow-lg text-xl w-1/2">Hello, World!</h1> `; // use tailwind css utility classes
  }
}
    私たちの設定の後、私たちは今、LetElement＆Tailwindセットアップを作業している!

    結論


    我々の設定の後、我々は今、両方のlitelementsとtailwind cssによって供給された美しいデータ駆動のユーザーインターフェイスを作成を開始するための強力な基盤を持っている.
    このドットラボは、企業のデジタル変換の努力を実現支援に焦点を当てた現代のWebコンサルティングです.専門家の建築指導、訓練、またはコンサルティング、角度、Vue、Webコンポーネント、Graphql、ノード、バゼル、またはポリマー、訪問thisdotlabs.com .
    このドットメディアは、すべての包括的で教育的なウェブを作成することに集中します.我々は最新のイベント、ポッドキャスト、および無料のコンテンツを介して近代的なWebの進歩と最新の状態に保つ.学ぶthisdot.co .
    UIScene
    初心者のためのパイソン［Disord . py］で、チャックノリスdiscord botを構築してください