如何使用Polymer 2构建流程？构建后集成问题求助

兄弟我太懂你这种憋屈的感觉了！Polymer 2的文档在基础自定义元素这块写得挺明白，但构建流程真的像藏起来了一样，我当初折腾这个也踩了一堆坑，给你梳理个一步到位的流程，保证你能搞定！

一、先把工具版本搞对（别踩版本坑） #

Polymer 2对应1.x系列的Polymer CLI，别装最新的3.x版本（那是给Polymer 3用的，完全不兼容）。如果还没装，直接执行这个命令：
npm install -g polymer-cli@1.9.11
（这个版本是我亲测稳定适配Polymer 2的，放心用）

二、检查你的项目结构 #

Polymer CLI对项目结构有要求，不然构建会乱套，你的项目得是这个样子：

• 根目录有bower.json（Polymer 2还是用bower管理依赖，别用npm）
• 自定义元素统一放在src/文件夹下，比如src/my-custom-element.html
• 根目录要有个index.html作为开发时的测试入口（哪怕只是用来验证元素功能）

三、执行正确的构建命令 #

别瞎试各种自定义命令，直接用官方标准构建命令就行：
polymer build
执行完之后，根目录会生成一个build/文件夹，里面有两个子目录：

• es5-bundled：兼容IE11这类旧浏览器的版本，优先选这个
• es6-bundled：只兼容现代浏览器，体积更小一点

四、集成到极简HTML的核心要点（最容易踩坑的地方） #

很多人直接把原元素文件塞到极简HTML里就报错，根本原因是构建后的资源是打包整合过的，你得这么操作：

1. 把build/es5-bundled/里的所有文件（包括bower_components/、src/、打包后的脚本）全部复制到你的极简HTML项目根目录
2. 你的极简HTML里要严格按顺序引入资源，举个示例：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>极简集成测试</title>
  <!-- 第一步：先引入Web Components的polyfill，没有它自定义元素根本跑不起来 -->
  <script src="bower_components/webcomponentsjs/webcomponents-loader.js"></script>
  <!-- 第二步：引入你的自定义元素，如果构建后元素被打包进了bundle，就引入对应的bundle文件 -->
  <link rel="import" href="src/my-custom-element.html">
</head>
<body>
  <!-- 直接用你的自定义元素就行 -->
  <my-custom-element></my-custom-element>
</body>
</html>

📌 小技巧：你可以直接打开build/es5-bundled/index.html，把里面的引入代码抄过来，绝对不会出错！

五、常见坑快速排查 #

• 路径不对：如果控制台报404，检查你的HTML里的资源路径和文件实际位置是否匹配，比如bower_components/是不是和HTML在同一目录
• polyfill没引对：一定要先引webcomponents-loader.js，不能先引元素，不然浏览器还没加载polyfill就识别不了自定义元素
• 版本不兼容：如果构建时报错，大概率是CLI版本不对，卸载重装我上面给的1.9.11版本就行

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