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

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

普通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＃预览版代码是“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

Answer 2

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

您还需要一个版本polymer-build，但不会尝试uglify JavaScript，因为它无法识别ES6而导致失败。 polymer-cli repo的new-build-flags分支用babili取代uglify进行ES6缩小（在PR#525中添加）。您可以查看该分支并自行构建，或者您可以从此处安装它：

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项目：

选择generator-polymer-init-2-x-app：

，生成2.0入门套件（使用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

项目生成器完成后，使用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
```

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

2 个答案: