Question

我对Node.js比较陌生。到目前为止，这是一个非常简单的程序，旨在仅测试material-components-web的合并。我按照自述文件中的说明逐步进行操作，到目前为止，这是我的意思：

package.json

{
  "name": "hello-polymer", "version": "0.1.0",
  "description": "Intro to Polymer", "main": "index.js",
  "scripts": { "start": "node index.js" },
  "author": "vcapra1", "license": "ISC",
  "dependencies": { "@webcomponents/webcomponentsjs": "^2.0.2" }
}

index.js

http = require('http')
fs = require('fs')

http.createServer((request, response) => {
  response.statusCode = 200
  response.setHeader('Content-Type', 'text/html')
  let filename = "./" + request.url
  if (request.url.startsWith("/@")) {
    filename = "./node_modules/" + request.url
  } else if (request.url == "/") {
    filename = "./index.html"
  } else {
    response.statusCode = 404;
    response.end("404 Not Found");
  }
  fs.readFile(filename, (err, data) => {
    console.log("Request: ", request.url);
    response.end(data)
  })
}).listen(3000)

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>MWC Test</title>
    <script src="@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
    <script type="module" src="@material/mwc-icon/mwc-icon.js"></script>
  </head>
  <body>
    Hello, World
    <mwc-icon>sentiment_very_satisfied</mwc-icon>
  </body>
</html>

然后我在项目文件夹中运行以下命令：

polymer serve

我也尝试过使用npm启动它：

npm start

这两个命令都允许我访问http://localhost:XXXX上的网页，但是每次我收到的都是文本“ Hello，World sentiment_very_satisfied”，纯文本不显示任何图标。

我不太确定自己缺少什么。我感到奇怪的是，脚本src属性将@webcomponents引用为同级文件夹，而该文件夹实际上位于node_modules目录中，因此我尝试更改它，但还是没有运气。

Answer 1

我通过与

一起运行来使其正常工作

polymer serve --module-resolution=node --npm。

这告诉Polymer-cli在提供文件时将npm样式引用转换为相对引用。尽管由于某种原因它不适用于index.html，所以在那里需要相对路径：

<script src="node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js"></script>
<script type="module" src="node_modules/@material/mwc-icon/mwc-icon.js"></script>

您可以在此处https://www.polymer-project.org/blog/2018-03-23-polymer-3-latest-preview#packagenames

了解更多信息

如何使用materialwebcomponents创建基本的Node.js项目？

1 个答案: