Question

我最近正在使用Web Components和Polymer，设置一个基本的SPA。

我有不同的自定义组件，包含在我的项目中;我的HTML导入如下所示：

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

我想在我的导入中避免使用相关路径。

我曾经通过Aliasify解决问题，作为Browserify的转换，但它看起来不适合Web组件。

有人可以建议我另类吗？

P.S。我写道“看起来不适合Web组件”，因为我喜欢HTML导入提供的本机延迟加载（所以我不想生成一个包），也不确定Browserify是否乐意处理html文件。

P.P.S。因此，对于上面的示例，我的目标是为文件夹“some / path / to / components /”定义别名“components”，以便能够将导入更改为：

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

Answer 1

一旦我开始深入研究Web组件，答案就变得非常简单了; Vulcanize是Web组件社区中的一个流行工具，可以完成我想要的工作，请在以下示例中查看redirects：

// 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"}));

为了说清楚，采用Vulcanize可悲的意思是没有延迟加载

如何为“html导入”路径设置别名？

1 个答案: