Lit-build NPM | npm.io

LIT-ELEMENT

Maak het project aan en install de nodige dependencies

# Create folder
mkdir lit-element-tester
npm init -y
npm i --save-dev polymer-cli
npm i lit-element
polymer serve

Maak een html file om de code te testen, hier laadt je de javascript in als module om npm package te simuleren

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module" src="./index.js"></script>
</head>
<body>
    <my-element></my-element>
</body>
</html>

We voegen css en een afbeelding toe om te zorgen dat alles gepacked wordt

touch index.css

h1 {
    color : red
}

mkdir src/assets
# hier afbeelding toevoegen

Index.js zal dienst doen als module, we laden gewoon alles in

touch index.js

import './src/my-element';

Het lit-element zelf aanmaken gebeurt alsvolgt:

mkdir src && cd src
touch my-element.js

import { LitElement, html } from 'lit-element';

class MyElement extends LitElement {

  render(){
    return html`
        <link rel="stylesheet" href="./index.css">
        <h1>Hello world!</h1>
        <img src="./src/assets/img.jpg">
    `;
  }
}

customElements.define('my-element', MyElement);

BUILD

We gaan alles bundelen met webpack daarvoor hebben we de volgende dependencies:

npm i webpack webpack-cli

We voegen de volgende file toe:

touch webpack.config.js

in package.json voeg je het volgende toe bij scripts:

"build": "webpack --config webpack.config.js"

De config file zelf bevat:

const path = require('path');

module.exports = {
    entry: './index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    }
}

Maar op dit moment zijn er nog geen css of images mee. Dat moeten we alsvolgt gaan opvangen:

npm install --save-dev style-loader css-loader

En in my-element.js import je de css (dit is mogelijk door deze dependencies)

import './index.css'

Voor afbeeldingen en fonts is dit dezelfde logica. Je hebt de volgende dependency nodig:

npm install --save-dev file-loader

De afbeelding importeren:

PUBLISHEN

cd dist
npm login
# invullen
npm init -y
npm publish

GEBRUIKEN

lit-element webpack webpack-cli

2.0.1

4 years ago