Visual Studio Kod ile localhost'ta çalıştırmak için temel içeriği nasıl oluşturuyorsunuz?

Question

Bu yüzden web barındırma teknolojilerinin çoğunda kimse yok, bu muhtemelen çok basit bir soru. Genel olarak kodlama konusunda iyi bir miktar biliyorum ve CSS, Javascript ve HTML'nin birlikte nasıl çalıştığını biliyorum, ancak bir şeyleri barındıran ve çalıştıran bir kavramla kaybolduğumu ve buna bağlı olarak bir tarayıcı açtığını (dosya: // /C:/Test/index.html). Favori tarayıcınıza atlayabileceğiniz ve bir sayfa açabilen task.json dosyasını kullanabileceğinizi biliyorum: How to view my HTML code in browser with Visual Studio Code?. Ancak bu, localhost üzerinde eklenecek bir işlem oluşturmuyor.

Visual Studio Code öğreticilerine şu adreste bakmaya çalışıyorum: https://code.visualstudio.com/docs/editor/debugging. Ama sanıyordum ki, yerel bir sunucu üzerinde bir işlem yapmak için bir yeteneğim var ve bunu yapmadığım zaman, ona bağlı.

Ben Chrome için debugger için bir uzantı indirilen ve benim launch.json şimdi şöyle görünür: Ben içeriği başlatmak için öğreticiler dayanarak bu değiştirmeye çalıştık

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

ama orada öğretici olarak çalışmıyor Örnek olarak node.js ile yaptıklarını ve basit bir işlem yapıp yapamayacağınızı merak ettiler.

Visual Studio Code ile sadece düz jane html, javascript ve css için kodları nasıl barındırabilirim? NPM, Gulp ya da diğer platformlar olmaksızın biraz javascript'i tekrar tekrar test etmeye başlamak istiyorum. IIS'de veya başka bir barındırma platformunda çalışıp bu dosyayı çalıştırmak için bu dosyayı veya başka bir dosyayı ele geçirebilir miyim? Yoksa önemi yok mu? NPM ile Angular 2 için bir öğretici yapıyordum ve npm ile bulunduğunuz konumdaki 'npm start' komut konsolunu yapıyorsunuz ve daha sonra bambunu sizin için yapıyor ve yerel ana makinede bir portu saklıyor ve hepsini yapıyor (http://localhost:3000 şimdi içeriğimi gösterir). Bunu VS Kodunda bazı süreçlerle yapabilir miyim?

Answer 1

Bir çeşit web sunucusuna ihtiyacınız olacak. Açısal 2 hızlı başlangıç ​​kılavuzu, lite-sunucusunu kullanır. Bu küçük bir düğüm tabanlı web sunucusudur. Sadece npm ile kurabilirsiniz.

npm init 

npm install lite-server --save-dev 

sizin package.json içinde daha

"start": "lite-server" 

bu klasör içinde bir index.html dosyası var ve sadece daha

npm start 

Ve sunucusu işletmek emin olun komut eklemek bu sayfanızı tarayıcıda başlatır ve görüntüler.

---

Ayrıca kendi web sunucusu oluşturmak ve sonra da bu hata ayıklayıcı ekleyin ama bu düğüm veya başka araçları kullanarak içeriyor olabilir.

Gitmenin kolay bir yolu, basit bir hızlı sunucuya sahip bir server.js dosyası oluşturmaktır.

başlatma npm: npm init

NPM ile ekspres yükleyin: ekspres --save

bir server.js dosyası oluşturmak Daha npm yükleyin: Şimdi

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')); 
}); 

sizin launch.json eklemek doğru yapılandırma.Eğer web sayfası localhost'tan servis edilecektir görsel stüdyo kodu ayıklayıcısını başlatırsanız

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

: Örneğin: Bu 3000

Hope sen :)

Answer 2

adında bir düğüm paketi kullanmak arayan ne Bu amaç için reload. Bununla ilgili iyi bir şey, dosya değişikliklerinde otomatik olarak yenilenmesidir ve herhangi bir yapılandırma dosyasına ihtiyacınız yoktur. Böylece basit statik html içeriği sunmak kolaydır. dizin dosyasını hizmet etmek index.html ile bir klasöre

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

Ardından cd:

Önce reload yüklemeniz gerekir. https://github.com/Microsoft/:

reload -b