Как создать базовый проект Node.js с материальными компонентами? - PullRequest
Новая
       7

Как создать базовый проект Node.js с материальными компонентами?

0 голосов
/ 26 июня 2018

Я относительно новичок в Node.js.Пока что это очень простая программа, предназначенная для проверки включения material-components-web .Я шаг за шагом следовал инструкциям в readme, и вот что у меня есть:

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, поэтому я попытался изменить это, но все равно не повезло.

1 Ответ

0 голосов
/ 26 июня 2018

Я получил его, запустив

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-полимер-3-последний-превью # packagenames

...