如何在Polymer 3中安装Polymer 2版本的轮播Web组件？

嘿，我完全懂你的困扰——Polymer 3放弃Bower之后，要用上那些只支持Polymer 2的老组件确实有点绕，但有几个实用的方案可以解决，我给你拆解清楚：

方案1：用官方工具转译为Polymer 3兼容格式 #

Polymer团队提供了polymer-modulizer工具，专门用来把Polymer 2的组件转换成ES模块格式，适配Polymer 3的生态：

• 先全局安装转译工具：

  npm install -g polymer-modulizer
  

• 把目标轮播组件的源码克隆到本地项目目录（直接从它的代码仓库拉取即可）
• 进入组件的源码目录，运行转译命令：

  polymer-modulizer
  

  这个工具会自动处理组件的依赖路径、导入方式，把它转换成符合Polymer 3规范的ES模块。
• 转译完成后，你可以把这个处理后的组件作为本地依赖添加到项目的package.json里，比如：

  "dependencies": {
    "l2t-paper-slider": "file:./path/to/translated-l2t-paper-slider"
  }
  

• 最后运行npm install，就能在项目里正常导入使用了。

方案2：保留HTML导入方式（兼容模式） #

Polymer 3虽然推荐ES模块，但依然支持传统的HTML导入，只是需要额外配置：

• 把组件的完整源码复制到项目的某个目录下（比如src/legacy-components/l2t-paper-slider/）
• 在你的主入口文件或者需要使用轮播的组件中，添加HTML导入：

  <link rel="import" href="./src/legacy-components/l2t-paper-slider/l2t-paper-slider.html">
  

• 注意：如果你的项目用了构建工具（比如Webpack、Rollup），需要配置对应的loader来处理HTML导入；如果用Polymer CLI，可以启用legacy模式来兼容这种写法。

方案3：寻找替代的现代组件 #

如果上面的方法觉得麻烦，也可以考虑换成已经适配Polymer 3（或者基于Lit——Polymer的下一代框架）的轮播组件。这类组件通常已经发布到npm，安装和使用都更顺畅，而且维护性更好。

注意事项 #

• 转译后的组件可能需要手动调整部分依赖路径，比如把Bower时代的polymer.html导入换成@polymer/polymer/polymer-element.js
• 如果你遇到依赖缺失的问题，可以查看组件的bower.json，把对应的依赖换成npm上的@polymer/xxx包版本。

内容的提问来源于stack exchange，提问作者Vikram Rawat