如何使用聚合物CLI构建聚合物2.x项目？

Question

谁能告诉我一个教程，使用聚合物2和polymer-build从聚合物CLI？当我在polymer-starter-kit中使用任何示例并使用polymer serve时，它都能正常工作；但是当我使用polymer build并服务于bundled或unbundled目录时，我会得到404错误。我甚至更新了最新的alpha版本的polymer-cli。

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

Answer 1

我也花了一点时间想办法解决这个问题。请使用polymer-cli@next而不是polymer-cli

普通的polymer-cli似乎没有支持聚合物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.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的多边形填充支持的依赖关系，这导致了多填充浏览器(如Linux )上出现404。现在，在v0.0.6中，这一切都是固定的。

您还需要一个版本的polymer-build，它不尝试uglify JavaScript，因为它无法识别ES6而失败。new-build-flags分支的polymer-cli回购用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。

为了建立和服务一个Polymer2.0初学者工具包项目：

1. 通过选择generator-polymer-init-2-x-app、v0.0.6或更新版本的2-x-app - starter application template生成一个2.0初学者工具包： 聚合物吗？您想使用哪个初学者模板？. 2-x-app - (2.0预览)空白应用程序模板2-x-app - (2.0预览)空白元素模板❯2-x-app - (2.0预览)初学者应用程序模板
2. 项目生成器完成后，使用yarn build构建项目： $纱线生成信息:删除构建/目录..。信息:生成构建/目录。信息:建设完成！ 注意，输出仅为build/，而不再是build/bundled/和build/unbundled/。
3. 提供构建目录的内容，并自动打开该目录的浏览器： $ -o 您还可以使用不同的工具来验证构建输出是否在任何聚合物工具的上下文之外工作。在build/中启动Python服务器，并手动打开它的浏览器： $ cd构建$ python -m SimpleHTTPServer