How to set up aliases for "html import" paths?

487 Views Asked by At

I am recently playing with the Web Components and Polymer, setting up a basic SPA.

I have different custom components, included in my project; my HTML imports look like this:

<link rel="import" href="../core-icon/core-icon.html">

I would like to avoid relavite paths in my imports.

I used to solve the problem by Aliasify, as transform of Browserify, but it doesn't look as a good fit for Web Components.

Anybody can suggest me an alternative?

P.S. I wrote "doesn't look as a good fit for Web Components" because I like the native lazy loading provided by HTML imports (so I don't want to generate a bundle) and also not sure Browserify is happy to process html files.

P.P.S. So my goal would be, for the example above, to define the alias "components" for the folder "some/path/to/components/", to be able to change the import as:

<link rel="import" href="components/core-icon/core-icon.html">
1

There are 1 best solutions below

0
On

The answer got pretty easy, once I have started to dig more into Web Components; Vulcanize is a popular tool in the Web Components community and does what I was looking for, check redirects in the following example:

// example of configuration for Gulp
var vulcanize = require("gulp-vulcanize");
var DEST_DIR = "dist/elements";
var SRC_DIR  = "dist/elements/elements.vulcanized.html";

gulp.task("vulcanize", function () {
    return gulp.src(SRC_DIR)
        .pipe(vulcanize({
            strip: true,
            inlineCss: true,
            inlineScripts: true,
            redirects: [
                "/bower_components|dist/bower_components",
                "/elements|dist/elements"
            ]
}))
.pipe(gulp.dest(DEST_DIR))
.pipe($.size({title: "vulcanize"}));

Just to make it clear, adopting Vulcanize sadly means no lazy loading