首页 文章

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

提问于
浏览 次
3

有人能指出我使用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生成器具有相同的问题 .

polymer polymer-2.x

2 回答

  • 2

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

    普通的 polymer-cli 似乎没有最新的构建和优化来支持Polymer 2.0＃Preview相关功能 .

    你可以安装 polymer-cli@next . 在Ubuntu中，您只需使用 npm install -g polymer-cli@next

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

    Edit: 你可以在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

    回复于
  • 0

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

    你还需要一个 polymer-build 的版本，它不会试图使用JavaScript，因为它无法识别ES6而失败 . polymer-cli repo的new-build-flags分支将 uglify 替换为babili，用于ES6缩小（在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 Starter Kit项目：

    • 选择 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
    回复于

相关问题