能够使用Polymer 3解析模块，但不能使用Lit Element

Question

我一直能够使用https://github.com/nodecg/express-transform-bare-module-specifiersPolymer 3和浏览器同步。但现在我在设置和点亮元件时遇到了错误

未捕获类型错误：未能解析模块说明符"点亮"；。相对引用必须以"或"开头/&"&"/&"；，或"/&"；。

它用于请求的以下文件：

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

发生了什么变化？模块就是模块。。。。这应该和P3 一样适用于发光元件

请不要推荐wds，虽然它是一个很好的工具，但它不适合我的用例

我的浏览器同步配置，适用于Polymer 3模块，但不适用于Lit:

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,
});

Answer 1

您可以在浏览器中尝试同步配置：

app.use('*', transformMiddleware({
transform: (code, id) => {
if (id.endsWith('.js')) {
return code.replace(/from 'lit'/g, 'from 'lit/index.js'');
//return code.replace(/from 'lit'/g, `from 'lit/index.js'`);
}
return code;
}
})); 

另一种选择：

const app = express();
const bs = require('browser-sync').create();
app.use('*', transformMiddleware());
bs.init({
server: true,
notify: false,
"files": [
],
middleware: [
proxyMiddleware,
historyApiFallback(),
expressTransformBareModuleSpecifiers
],
port: 4000,
ui: false,
}); 

Answer 2

我意识到我在middleWare数组中没有放置应用程序。。。。在数组中放入app解决了这个问题，现在浏览器同步可以很好地与lit元素和express转换裸模块说明符配合使用。

const historyApiFallback = require('connect-history-api-fallback');
const httpProxy = require('http-proxy');
const path = require('path');
const express = require('express');
const transformMiddleware =
require('express-transform-bare-module-specifiers').default;
const app = express();
const bs = require('browser-sync').create();
app.use(transformMiddleware());
bs.init({
server: true,
notify: false,
"files": [
'app/**/**/**/*',
'app/**/**/*',
'app/**/*',
'app/*',
],
middleware: [
historyApiFallback(),
app,
],
port: 4000,
ui: false,
});