3

谁能指出我使用 Polymer 2 和polymer-buildPolymer CLI 的教程？当我在polymer-starter-kitand use中使用任何示例时polymer serve，它都可以正常工作；但是当我使用polymer build和服务bundledorunbundled目录时，我得到了404错误。我什至已经更新到最新的 alpha 版本polymer-cli。

此外，使用https://github.com/tony19/generator-polymer-init-2-x-app生成器也有同样的问题。

4

2 回答 2

2

我也花了一些时间来解决这个问题。请使用polymer-cli@next代替polymer-cli

Plainpolymer-cli似乎没有最新的构建和优化来支持 Polymer 2.0#Preview 相关功能。

您可以安装polymer-cli@next. 在 Ubuntu 中，您可以简单地使用npm install -g polymer-cli@next

然后，通过生成的应用程序的捆绑和非捆绑版本polymer build就可以正常工作。

编辑：您可以在https://github.com/phani1kumar/phani1kumar.github.io分支 找到我的示例 Polymer2.0#Preview 版本的代码是“devmaster”。

这sw-precache-config.js是初始渲染阻塞。这将加载主页所需的所有资源，以使应用程序可供离线使用。src/lazy-resources.html为下一条路线加载资源。

您需要根据您的布局和主页在以下 3 个文件中进行适当的配置： sw-precache-config.js, polymer.json, src/lazy-resources.html. 这是 Polymer 团队在商店应用程序中遵循的一种做法，您可以选择不同的延迟加载机制。延迟加载的底线是在Polymer.RenderStatus.afterNextRender.

您可能还会发现以下文章很有趣：https ://medium.com/@marcushellberg/how-i-sped-up-the-initial-render-of-my-polymer-app-by-86-eeff648a3dc0#.pi2iucwzi

于 2017-01-24T09:09:47.843 回答
0

我注意到生成器中有一个错误，即starter-kit子生成器缺少对 的依赖webcomponentsjs，这会导致polymer-build. 正如您所发现的，polymer.json它还缺少对 polyfill 支持的依赖项webcomponentsjs，这会在 polyfill 浏览器（例如 Linux Chrome）上导致 404。这一切现在都在v0.0.6.

您还需要一个polymer-build不尝试uglifyJavaScript 的版本，由于无法识别 ES6 而导致失败。repo的new-build-flags分支替换为 ES6 缩小（在PR#525中添加）。您可以查看该分支并自己构建它，或者您可以从这里安装它：polymer-cliuglifybabili

npm i -g tony19-contrib/polymer-cli#dist-new-build-flags

为方便起见，此分支devDependency在生成 2.0 入门套件时添加为generator-polymer-init-2-x-app.

要构建和服务 Polymer 2.0 Starter Kit 项目：

  1. 通过选择生成 2.0 Starter Kit（使用generator-polymer-init-2-x-app或v0.0.6更新版本）2-x-app - starter application template：

    $ polymer init
? Which starter template would you like to use? 
  ...
  2-x-app - (2.0 preview) blank application template 
  2-x-app - (2.0 preview) blank element template 
❯ 2-x-app - (2.0 preview) starter application template

  2. 项目生成器完成后，使用以下命令构建项目yarn build：

    $ yarn build
info:    Deleting build/ directory...
info:    Generating build/ directory...
info:    Build complete!

    请注意，输出仅为build/，而不再是build/bundled/和build/unbundled/。

  3. 提供构建目录的内容，并自动打开浏览器：

    $ polymer serve build -o

    您还可以使用不同的工具为它提供服务，以验证构建输出是否可以在任何 Polymer 工具的上下文之外工作。在 中启动 Python 服务器build/，并手动打开浏览器：

    $ cd build
$ python -m SimpleHTTPServer
于 2017-01-23T15:41:21.663 回答