Polymer 3可正常解析模块，切换至Lit Element后失败求助

问题描述 #

此前使用express-transform-bare-module-specifiers与Polymer 3、browser-sync配合正常，但切换到Lit Element后出现模块解析错误：

Uncaught TypeError: Failed to resolve module specifier "lit". Relative references must start with either "/", "./", or "../".

涉及的请求文件包括：

/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js
/node_modules/lit/polyfill-support.js
/app/main-app.js
/node_modules/lit/polyfill-support.js.map

当前使用的browser-sync配置（Polymer 3可用，Lit Element失效）：

const app = express();
const bs = require('browser-sync').create();
app.use('*', transformMiddleware());

bs.init({
  server: true,
  notify: false,
  "files": [

  ],
  middleware: [
    proxyMiddleware,
    historyApiFallback(),
  ],
  port: 4000,
  ui: false,
});

原因分析 #

核心问题是transformMiddleware没有被纳入browser-sync的请求处理链：

• 你虽然在express实例上挂载了transformMiddleware，但并未将这个express实例添加到browser-sync的middleware数组中。
• Polymer 3可能因模块引入路径特性或旧版本工具链的隐式兼容，侥幸绕过了这个配置问题；但Lit Element直接使用import 'lit'这类裸模块规范，必须依赖transformMiddleware将其转换为浏览器可识别的相对路径，缺失后必然报错。

解决方法 #

将挂载了transformMiddleware的express实例加入到browser-sync的middleware数组最前端，确保所有请求先经过模块转换处理：

修改后的配置：

const app = express();
const bs = require('browser-sync').create();
app.use('*', transformMiddleware());

bs.init({
  server: true,
  notify: false,
  "files": [

  ],
  middleware: [
    app, // 显式添加express实例，让请求先经过transformMiddleware处理
    proxyMiddleware,
    historyApiFallback(),
  ],
  port: 4000,
  ui: false,
});

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