如何使用 Polymer CLI 构建 Polymer 2.x 项目？

Question

任何人都可以向我指出使用 Polymer CLI 中的 Polymer 2 和 polymer-build 的教程吗？当我在 polymer-starter-kit 中使用任何示例并使用 polymer serve 时，它工作正常；但是当我使用 polymer build 并提供 bundled 或 unbundled 目录时，我得到 404 错误。我什至已经更新到 polymer-cli.

的最新 alpha 版本

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

Answer 1

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

现在都已修复

您还需要 polymer-build 的一个版本，它不会尝试 uglify JavaScript，因为无法识别 ES6 而失败。 new-build-flags branch of the polymer-cli repo replaces uglify with babili for ES6 minification (added in PR#525）。您可以检查该分支并自己构建它，或者您可以从这里安装它：

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

为方便起见，在使用 generator-polymer-init-2-x-app.

生成 2.0 入门工具包时，将此分支添加为 devDependency

要构建和提供 Polymer 2.0 初学者工具包项目：

通过选择 2-x-app - starter application template:

生成 2.0 入门工具包（使用 generator-polymer-init-2-x-app、v0.0.6 或更新版本）

$ 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

项目生成器完成后，用yarn build构建项目：
```
$ yarn build
info:    Deleting build/ directory...
info:    Generating build/ directory...
info:    Build complete!
```
注意输出只有build/，不再是build/bundled/和build/unbundled/。
提供构建目录的内容，并自动打开浏览器：
```
$ polymer serve build -o
```
您还可以使用不同的工具来为它提供服务，以验证构建输出是否可以在任何 Polymer 工具的上下文之外工作。在 build/ 中启动一个 Python 服务器，然后手动打开浏览器访问它：
```
$ cd build
$ python -m SimpleHTTPServer
```

Answer 2

我也花了一些时间来弄清楚这个问题。请使用 polymer-cli@next 而不是 polymer-cli

Plain polymer-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 初始 render-blocking。这将加载主页所需的所有资源，以使该应用程序可供离线使用。 src/lazy-resources.html 加载下一条路线的资源。

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

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

如何使用 Polymer CLI 构建 Polymer 2.x 项目？

How do I build a Polymer 2.x project with Polymer CLI?

polymer

polymer-2.x