Simple 'hello world' app, showing how to consume and bundle UI5 Web Components with Rollup.
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="./dist/bundle.esm.js" type="module"></script>
</body>
</html>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";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).
- Note: there is one rollup plugin used, called
rollup-plugin-node-resolve. The plugin resolves imports within the app node_modules (exactly where the UI5 Web Components would be installed). - Note: the following build targets browsers, supporting ES6.
import resolve from "rollup-plugin-node-resolve";
export default {
input: "src/main.esm.js",
output: {
file: "./dist/bundle.esm.js",
format: "esm"
},
plugins: [
resolve()
]
};{
"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"
}
}- npm install
- npm run start