Làm thế nào để bạn tạo nội dung cơ bản để chạy trên localhost với Visual Studio Code?

Question

Vì vậy, tôi là noob với hầu hết các công nghệ lưu trữ web vì vậy đây có lẽ là một câu hỏi rất cơ bản. Tôi biết một số tiền phong nha về mã hóa nói chung và cách CSS, Javascript và HTML hoạt động cùng nhau nhưng bị mất với khái niệm lưu trữ/chạy một thứ gì đó và gắn vào nó, so với việc mở trình duyệt bằng tệp (tệp: // /C:/Test/index.html). Tôi biết bạn có thể sử dụng tệp tasks.json có thể chuyển đến trình duyệt yêu thích của bạn và mở một trang trong đó: How to view my HTML code in browser with Visual Studio Code?. Tuy nhiên đó không phải là tạo ra một quá trình chạy trên localhost để đính kèm vào.

Tôi đã cố gắng xem hướng dẫn về Mã Visual Studio tại đây: https://code.visualstudio.com/docs/editor/debugging. Nhưng có vẻ như họ đang nghĩ rằng tôi có khả năng thực hiện một quy trình chạy trên máy chủ cục bộ và đính kèm vào nó, khi tôi không làm vậy.

Tôi đã tải về một phần mở rộng cho trình gỡ lỗi cho Chrome và launch.json của tôi bây giờ trông như thế này:

{ 
"version": "0.2.0", 
"configurations": [ 
    { 
     "name": "Launch Chrome against localhost, with sourcemaps", 
     "type": "chrome", 
     "request": "launch", 
     "url": "http://localhost:3000", 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}" 
    }, 
    { 
     "name": "Attach to Chrome, with sourcemaps", 
     "type": "chrome", 
     "request": "attach", 
     "port": 9222, 
     "sourceMaps": true, 
     "webRoot": "${workspaceRoot}" 
    } 
] 
} 

Tôi đã cố gắng để thay đổi điều này dựa trên hướng dẫn để khởi động nội dung nhưng nó không hoạt động vì có hướng dẫn xác định rằng họ đang làm việc đó với node.js làm ví dụ và tò mò nếu bạn có thể làm một điều cơ bản.

Làm cách nào để lưu trữ mã cho chỉ đơn thuần jane html, javascript và css bằng Visual Studio Code? Tôi muốn chỉ bắt đầu thử nghiệm một chút javascript hơn và hơn với không có NPM, Gulp, hoặc các nền tảng khác. Tôi có thể chỉ chiếm đoạt tệp này hay tệp khác để có được nó và chạy trong IIS hoặc một số nền tảng lưu trữ khác không? Hay nó không quan trọng? Tôi đã làm một hướng dẫn cho Angular 2 với NPM và với npm bạn chỉ cần làm một lệnh console của 'npm start' ở vị trí của bạn và sau đó, bam nó làm tất cả cho bạn và dự trữ một cổng trên máy chủ cục bộ và làm tất cả (http://localhost:3000 hiện đang hiển thị nội dung của tôi). Tôi có thể làm điều đó với một số quy trình trong Mã VS hoặc một số lệnh mà tôi có thể tạo không?

Answer 1

Bạn sẽ cần một số loại máy chủ web. Hướng dẫn quickstart góc 2 sử dụng máy chủ lite. Đây là một máy chủ web dựa trên nút nhỏ. Bạn chỉ có thể cài đặt nó với npm.

npm init 

npm install lite-server --save-dev 

Thần trong package.json bạn thêm video này vào kịch bản

"start": "lite-server" 

Hãy chắc chắn rằng bạn có một tập tin index.html trong thư mục này và hơn chỉ cần chạy

npm start 

Và webserver của bạn bắt đầu và hiển thị trang của bạn trong trình duyệt.

---

Bạn cũng có thể tạo máy chủ web của riêng bạn và sau đó đính kèm các trình gỡ lỗi để đó, nhưng điều này không liên quan đến việc sử dụng nút hoặc một số công cụ khác.

cách dễ dàng để thực hiện là tạo tệp server.js bằng máy chủ tốc độ đơn giản.

Initialize NPM: NPM init

Cài đặt nhanh với NPM: NPM cài đặt nhanh --save

Thần tạo ra một tập tin server.js:

var express = require('express'); 
var app = express(); 

app.listen(3000, function() { 
    console.log('Listening on port 3000'); 
}); 

//Change the './' to point to the root of your angular app 
app.use(express.static(path.resolve('./'))); 

//Send everything to your index.html page 
app.get('/*', function(req, res) { 
    res.sendFile(path.resolve('./index.html')); 
}); 

Bây giờ trong launch.json của bạn thêm cấu hình đúng.Ví dụ:

{ 
     "name": "Launch", 
     "type": "node", 
     "request": "launch", 
     "program": "${workspaceRoot}/index.js", 
     "stopOnEntry": false, 
     "args": [], 
     "cwd": "${workspaceRoot}", 
     "preLaunchTask": null, 
     "runtimeExecutable": null, 
     "runtimeArgs": [ 
      "--nolazy" 
     ], 
     "console": "internalConsole", 
     "sourceMaps": false, 
     "outDir": null 
    }, 

Nếu bạn bắt đầu gỡ rối mã visual studio trang web của bạn sẽ được phục vụ từ localhost: 3000

Hope đây là những gì bạn đang tìm kiếm :)

Answer 2

tôi sử dụng một gói nút gọi reload cho mục đích này. Điều tốt về điều này là nó tự động làm mới trên các thay đổi tập tin và bạn không cần bất kỳ tập tin cấu hình. Vì vậy, việc cung cấp nội dung html tĩnh đơn giản thật dễ dàng.

Trước tiên, bạn cần phải cài đặt tải lại:

npm install [-g] [--save-dev] reload 

Sau đó cd vào một thư mục với index.html để phục vụ các tập tin chỉ mục.

reload -b