Allows to use Web Components using ES modules in your Ember app
Last updated 5 months ago by bbvaengineer .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install ember-cli-webcomponents-bundler 
SYNC missed versions from official npm registry.


Build Status GitHub version NPM version Dependency Status codecov Greenkeeper badge Ember Observer Score



Allows to use Web Components using ES6 modules in an Ember application.


ember install ember-cli-webcomponents-bundler


The addon options can be configured in config/environment.js.

Example config:

'ember-cli-webcomponents-bundler': {
  modules: true,
  entrypointPaths: [

A file named module-imports.js (default value) should exist inside each entry point path with the imports to be bundled. The file name can be configured in entrypointFileName option.

Example entrypoint:

// file: lib/path-one/module-imports.js
import './components/some-component/some-component';
import './components/another-component/another-component';


A bundled file will be generated for each of the entrypointPaths in the directory with the name of the entry point path. For example, the bundle for lib/path-one will be saved in dist/assets/path-one/bundle.js.

Both, the bundle name and the output path can be configured by setting them as outputFileName and outputPath respectively.



type: String
default: module-imports.js

Name of the file used as entry point for ES modules inside each entry point path.


type: String
default: bundle.js

Name of the generated bundle for each entry point path.


type: String
default: assets

Path where the generated bundle will be saved inside the dist folder.


type: Boolean
default: false (true in production env)

Minifies the bundle.


type: Boolean
default: false

Generates two bundles: one for browsers with ES6 modules support and another for the rest of browsers using the build presets of the app.targets.


type: Array
default: []

List of paths where the addon will search for an entry point to generate its corresponding bundle.


type: Boolean
default: true

Writes the script tags for the bundle(s) in index.html. You can disable this option if you want to import the scripts on demand.

When this option is set to false, webcomponents.js polyfill is not included in vendor.js, so you must import it explicitly before the bundle.


type: Boolean
default: false

Allows to import css files in components.


import styles from './some-component.css';

The imported files exports the styles in a template literal that can be interpolated in the component's template. The processed styles are transformed with Autoprefixer using the hosting app targets configured in config/targets.js.


If you want to contribute to this addon, please read the CONTRIBUTING.md.


We use SemVer for versioning. For the versions available, see the tags on this repository.


See the list of contributors who participated in this project.


This project is licensed under the MIT License.

Current Tags

  • 1.1.0                                ...           latest (5 months ago)

2 Versions

  • 1.1.0                                ...           5 months ago
  • 1.0.0                                ...           5 months ago
Maintainers (1)
Today 0
This Week 0
This Month 0
Last Day 0
Last Week 0
Last Month 0
Dependents (0)

Copyright 2014 - 2016 © taobao.org |