gpt4 book ai didi

polymer - 为非根路径构建 polymer 应用程序

转载 作者:行者123 更新时间:2023-12-02 02:51:50 25 4
gpt4 key购买 nike

我认为这不是 Serving Polymer App to a /path not at root 的副本,因为它是关于 Polymer-cli 1.8 版和 Polymer 3 的较新版本

我创建了一个非常简单的组件,当从根路径提供服务时,它可以与“polymer serve”和“polymer build”一起工作。

根据文档,您可以使用 --base-path 构建选项为非根路径构建应用程序。然而,这似乎并不适用于所有资源

示例项目在 github 上 https://github.com/anneb/polymer-simple-component/

基础知识:

index.html

<!doctype html>
<html lang="en">
<head>
<title>Simple Polymer app</title>
<base href="/">
</head>
<body>
<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="src/components/simple-component.js"></script>
<simple-component></simple-component>
</body>
</html>

相对于 ../../images/spinner.gif 的简单组件:

import {LitElement, html} from '@polymer/lit-element';
class SimpleComponent extends LitElement {
_render() {
return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;
}
}
customElements.define('simple-component', SimpleComponent);

如果使用

polymer serve

polymer build

但是,当构建时:

polymer build --name es5-bundled --base-path es5-bundled

您现在可以从构建目录(build/es5-bundled 的父目录)提供 es5-bundled 并且代码现在主要使用路径/es5-bundled/,但是引用的 spinner.gif 仍然需要在/images/spinner .gif,为什么?

我的 polymer.json:

{
"entrypoint": "index.html",
"shell": "src/components/simple-component.js",
"sources": [
"images/**/*"
],
"extraDependencies": [
"node_modules/@webcomponents/webcomponentsjs/**"
],
"builds": [
{
"name": "es5-bundled",
"js": {
"compile": "es5",
"minify": true,
"transformModulesToAmd": true
},
"css": {
"minify": true
},
"html": {
"minify": true
},
"bundle": true,
"addServiceWorker": true
}
],
"moduleResolution": "node",
"npm": true
}

最佳答案

示例组件使用相对路径:

return html`<div><img src="../../images/spinner.gif" alt="Spinner"></div>`;

这可能会使用来自 import.meta.url 的模块 URL 进行改进,如下所示:

return html`<div>
<img src$="${new URL('../../images/spinner.gif', import.meta.url).href}" alt="Spinner">
</div>`;

由于 import.meta.url 不受例如 Firefox 的支持,您必须使用选项 polymer build --js-transform-import-meta :

polymer build --name es5-bundled --build-path es5-bundled --js-transform-import-meta

适用于单页应用的 import.meta.url 的另一种解决方法是:

return html`<div>
<img src$="${this.baseURI}/images/spinner.gif" alt="Spinner">
</div>`;

关于polymer - 为非根路径构建 polymer 应用程序,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51922404/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com