search

ilhan007 / rollup-wc

UI5 Web Components + Rollup starter
5 stars 0 forks source link

readme

UI5 Web Components + Rollup starter

Simple 'hello world' app, showing how to consume and bundle UI5 Web Components with Rollup.

Key files

-- index.html

Use the desired UI5 Web Components as regular HTML tags and load the application bundle (bundle.esm.js).

<!DOCTYPE html>
<html>

<body>
    <ui5-button>Press</ui5-button>
    <ui5-textarea show-exceeded-text max-length="8"></ui5-textarea>
    <ui5-select style="width: 180px">
        <ui5-option>Compact</ui5-option>
        <ui5-option>Cozy</ui5-option>
        <ui5-option>Condensed</ui5-option>
    </ui5-select>

    <script src="https://github.com/ilhan007/rollup-wc/raw/master/dist/bundle.esm.js" type="module"></script>
</body>

</html>

--main.esm.js

Import any component available in npm via: import "@ui5/webcomponents/dist/<component_name>";.

import "@ui5/webcomponents/dist/Button";
import "@ui5/webcomponents/dist/TextArea";
import "@ui5/webcomponents/dist/Select";
import "@ui5/webcomponents/dist/Option";

--rollup.config.js

Set up minimal build configuration. Point the entry file of your app sources (main.esm.js) and define the build output file name and format (bundle.esm.js).

import resolve from "rollup-plugin-node-resolve";

export default {
    input: "src/main.esm.js",
    output: {
        file: "./dist/bundle.esm.js",
        format: "esm"
    },
    plugins: [
        resolve()
    ]
};

Necessary dependencies (package.json)

{
    "name": "rollup-wc",
    "version": "1.0.0",
    "description": "",
    "scripts": {
        "build": "rollup -c",
        "start": "npm-run-all --sequential build serve:static",
        "serve:static": "serve"
    },
    "keywords": [],
    "author": "",
    "license": "ISC",
    "dependencies": {
        "@ui5/webcomponents": "^1.0.0-rc.2"
    },
    "devDependencies": {
        "npm-run-all": "^4.1.3",
        "rollup": "^1.19.4",
        "rollup-plugin-node-resolve": "^4.0.0",
        "serve": "^11.1.0"
    }
}

Run the project locally

Demo