Как заставить сервер npm lite обслуживать весь контент моей веб-страницы? - PullRequest
Новая
       94

Как заставить сервер npm lite обслуживать весь контент моей веб-страницы?

0 голосов
/ 27 февраля 2019

Я установил html5-шаблон и lite-server , используя npm install html5-boilerplate --save-dev и npm install lite-server --save-dev соответственно.

Мне пришлось скопировать index.html изпапка node_modules для обслуживания контента с использованием npm start.Все, что я вижу, это тег <p>, отображаемый, как показано на этом рисунке.

this image

Вот так выглядит мой рабочий каталог. 

Directory of D:\Full_Stack_Web_Development

27-02-2019  09:58    <DIR>          .
27-02-2019  09:58    <DIR>          ..
27-02-2019  10:05             1,871 index.html
27-02-2019  09:55    <DIR>          node_modules
27-02-2019  09:55           125,319 package-lock.json
27-02-2019  09:57               739 package.json
               3 File(s)        127,929 bytes
               3 Dir(s)  213,613,010,944 bytes free

D:\Full_Stack_Web_Development>

и вот так выглядит мой package.json файл.index.html можно посмотреть здесь 

{
  "name": "full_stack_web_development",
  "version": "1.0.0",
  "description": "beginning front end development using html5 boilerplate",
  "main": "index.html",
  "scripts": {
    "start": "npm run lite",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lite": "lite-server"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/alokananda-y/Full_Stack_Web_Development.git"
  },
  "author": "alokananda y",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/alokananda-y/Full_Stack_Web_Development/issues"
  },
  "homepage": "https://github.com/alokananda-y/Full_Stack_Web_Development#readme",
  "devDependencies": {
    "html5-boilerplate": "^7.0.1",
    "lite-server": "^2.4.0"
  }
}

1 Ответ

0 голосов
/ 28 февраля 2019

H5BP довольно гибок, поэтому есть несколько способов сделать то, что вы хотите сделать.Вы можете:

  1. Скопировать все содержимое node_modules/html5-boilerplate до корневого уровня вашей папки, а не только в index.html.Базовая структура папок, к которой вы стремитесь, это то, что у нас есть в нашей папке dist .
  2. Вы можете изменить все ссылки в index.html, чтобы они указывали на ресурсы h5bp в node_modules/html5-boilerplate Таким образом, вместо <link rel="stylesheet" href="css/main.css"> вы бы сделали <link rel="stylesheet" href="node_modules/html5-boilerplate/css/main.css">
  3. На самом деле проще всего загрузить последнюю версию , распаковать ее и запустить npm install --save-dev lite-server внутри этой папки.Таким образом, единственной зависимостью будет lite-server, и h5bp будет готов к работе.Это то, что я бы сделал.Мы предлагаем проект через npm, но на самом деле это не зависимость в том смысле, что другие пакеты являются отправной точкой для всего сайта или приложения.
...