基于Polymer 2构建可复用Web组件的polymer-build打包方案咨询

当然可以实现！你之前遇到的复杂HTML问题，核心是把测试页当成了entrypoint——polymer-build默认会把entrypoint当成完整应用来打包，自然会生成包含各种资源引用的复杂页面。但只要调整配置，针对组件本身打包，就能得到可以直接用<link import>导入的组件包，还能把polyfill一并打包进去。

下面是具体的操作步骤：

1. 先理清项目结构 #

把组件代码和测试页面分开，比如：

• 组件核心代码放在src/目录下（比如src/my-custom-component.html）
• 测试/演示页面放在demo/或test/目录，别把它当成打包入口

2. 配置polymer-build的打包任务 #

polymer-build通常和Gulp配合使用，你需要创建一个Gulp任务，把组件文件设为entrypoint，而不是测试页。这里给你一个极简的配置示例：

const gulp = require('gulp');
const polymerBuild = require('polymer-build');

// 初始化项目，指定组件为入口
const project = new polymerBuild.PolymerProject({
  entrypoint: 'src/my-custom-component.html', // 你的组件主文件
  fragments: [], // 如果组件依赖其他子组件，把它们的路径列在这里
  extraDependencies: [
    // 引入webcomponents polyfill，确保兼容性
    'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js'
  ]
});

// 打包任务
gulp.task('build-component', () => {
  return project.sources()
    .pipe(project.splitHtml())
    // 打包所有依赖到组件文件中
    .pipe(polymerBuild.bundleProject(project))
    .pipe(project.mergeHtml())
    // 输出到dist目录
    .pipe(gulp.dest('dist'));
});

3. 执行打包并验证结果 #

运行gulp build-component后，dist/目录下会生成打包后的组件文件（比如dist/my-custom-component.html）。这个文件已经包含了：

• 你的组件代码
• Polymer 2核心依赖
• 必要的webcomponents polyfill

其他应用只需要通过一行代码就能导入使用：

<link rel="import" href="./path/to/dist/my-custom-component.html">

关键注意点 #

• 别把测试页当entrypoint：polymer-build对应用入口和组件入口的打包逻辑完全不同，前者会生成完整应用页面，后者会生成可复用的组件包
• 按需配置polyfill：如果你的目标浏览器已经支持webcomponents，可以去掉extraDependencies里的polyfill，减小包体积
• 子组件处理：如果你的组件依赖其他自定义子组件，一定要把它们加到fragments数组里，否则打包时会漏掉

这样配置后，就能得到开箱即用的可复用组件包，完全不需要在应用里做额外修改~

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