如何讓npm lite服務器提供我網頁的全部內容？

Question

我分別使用npm install html5-boilerplate --save-dev和npm install lite-server --save-dev安裝了html5-boilerplate和lite-server模塊。

我必須從node_modules文件夾中復制index.html ，以便使用npm start提供內容。 我所看到的就是<p>標簽，如該圖所示。

這是我的工作目錄的樣子。

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"
  }
}

Answer 1

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 。 這樣，唯一的依賴關系將是精簡服務器，h5bp將准備就緒。 這就是我要做的。 我們通過npm提供該項目，但這並不是其他軟件包作為整個站點或應用程序的起點的依賴 。