Tutorial: Membuat aplikasi Node.js dan React di Visual Studio

Dengan Visual Studio, Anda dapat dengan mudah membuat proyek Node.js dan menggunakan IntelliSense dan fitur bawaan lainnya yang mendukung Node.js. Dalam tutorial ini, Anda membuat proyek aplikasi web Node.js dari templat Visual Studio. Kemudian, Anda membuat aplikasi sederhana menggunakan React.

Dalam tutorial ini, Anda akan belajar cara:

Membuat proyek Node.js
Menambahkan paket npm
Menambahkan kode React ke aplikasi Anda
Transpile JSX
Melampirkan debugger

Penting

Mulai dari Visual Studio 2022, Anda dapat membuat proyek React menggunakan jenis proyek berbasis CLI yang direkomendasikan. Beberapa informasi dalam artikel ini hanya berlaku untuk jenis proyek Node.js (.njsproj). Templat yang digunakan dalam artikel ini tidak lagi tersedia mulai Visual Studio 2022 Versi 17.8 Pratinjau 2.

Sebelum memulai, berikut adalah FAQ singkat untuk memperkenalkan Anda pada beberapa konsep utama:

Apa itu Node.js?

Node.js adalah lingkungan runtime JavaScript sisi server yang menjalankan kode JavaScript.
Apa itu npm?

Manajer paket default untuk Node.js adalah npm. Manajer paket memudahkan untuk menerbitkan dan berbagi pustaka kode sumber Node.js. Manajer paket npm menyederhanakan penginstalan pustaka, pembaruan, dan penghapusan instalasi.
Apa itu React?

React adalah kerangka kerja front-end untuk membuat antarmuka pengguna (UI).
Apa itu JSX?

JSX adalah ekstensi sintaks JavaScript yang biasanya digunakan dengan React untuk menggambarkan elemen UI. Anda harus menerjemahkan kode JSX ke JavaScript biasa sebelum dapat berjalan di browser.
Apa itu webpack?

Webpack memaketkan file JavaScript sehingga dapat berjalan di browser, dan juga dapat mengubah atau mengemas sumber daya dan aset lainnya. Webpack dapat menentukan pengkompilasi, seperti Babel atau TypeScript, untuk menerjemahkan kode JSX atau TypeScript ke JavaScript biasa.

Prasyarat

Tutorial ini memerlukan prasyarat berikut:

Visual Studio dengan beban kerja pengembangan Node.js terinstal.

Jika Anda belum menginstal Visual Studio:
1. Buka halaman unduhan Visual Studio untuk menginstal Visual Studio secara gratis.
2. Di Penginstal Visual Studio, pilih beban kerja pengembanganNode.js , dan pilih Instal.
Jika Anda telah menginstal Visual Studio tetapi memerlukan beban kerja Node.js:
1. Di Visual Studio, buka Alat>Dapatkan Alat dan Fitur.
2. Di penginstal Visual Studio, pilih pekerjaan pengembangan Node.js, dan pilih Ubah untuk mengunduh dan menginstal pekerjaan tersebut.
Lingkungan runtime Node.js telah terpasang.

Jika Anda tidak menginstal runtime Node.js, instal versi LTS dari situs web Node.js. Versi LTS memiliki kompatibilitas terbaik dengan kerangka kerja dan pustaka lain.

Alat Node.js di beban kerja Visual Studio Node.js mendukung versi arsitektur Node.js 32-bit dan 64-bit. Visual Studio hanya memerlukan satu versi, dan alat penginstal Node.js hanya mendukung satu versi pada satu waktu.

Visual Studio biasanya mendeteksi runtime Node.js yang diinstal secara otomatis. Jika tidak, Anda dapat mengonfigurasi proyek untuk mereferensikan runtime yang diinstal:
1. Setelah Anda membuat proyek, klik kanan simpul proyek dan pilih Properti.
2. Di panel Properti , atur jalurNode.exe untuk mereferensikan penginstalan global atau lokal Node.js. Anda dapat menentukan jalur ke penerjemah lokal di setiap proyek Node.js Anda.

Tutorial ini diuji dengan Node.js 12.6.2.

Membuat proyek

Pertama, buat proyek aplikasi web Node.js.

Buka Visual Studio.
Buat proyek baru.

Tekan Esc untuk menutup jendela mulai. Ketik Ctrl + Q untuk membuka kotak pencarian, ketik Node.js, lalu pilih Kosong Node.js Aplikasi Web - JavaScript. (Meskipun tutorial ini menggunakan pengkompilasi TypeScript, langkah-langkahnya mengharuskan Anda memulai dengan templat JavaScript .)

Dalam kotak dialog yang muncul, pilih Buat.

Jika Anda tidak melihat templat proyek Blank Node.js Web Application, Anda harus menambahkan beban kerja pengembangan Node.js. Untuk petunjuk terperinci, lihat Prasyarat.

Visual Studio membuat solusi baru dan membuka proyek Anda.

(1) Disorot dalam huruf tebal adalah proyek Anda, menggunakan nama yang Anda berikan dalam kotak dialog Proyek Baru . Dalam sistem file, proyek ini diwakili oleh .njsproj file di folder proyek Anda. Anda dapat mengatur properti dan variabel lingkungan yang terkait dengan proyek dengan mengklik kanan proyek dan memilih Properti (atau tekan Alt + Enter). Anda dapat melakukan proses bolak-balik (round-tripping) dengan alat pengembangan lain, karena file proyek tidak melakukan perubahan khusus pada sumber proyek Node.js.

(2) Di tingkat atas adalah solusi, yang secara default memiliki nama yang sama dengan proyek Anda. Solusi, yang .sln diwakili oleh file pada disk, adalah kontainer untuk satu atau beberapa proyek terkait.

(3) Simpul npm menunjukkan paket npm yang diinstal. Anda dapat mengklik kanan simpul npm untuk mencari dan menginstal paket npm menggunakan kotak dialog atau menginstal dan memperbarui paket menggunakan pengaturan di package.json dan klik kanan opsi di simpul npm.

(4) package.json adalah file yang digunakan oleh npm untuk mengelola dependensi paket dan versi paket untuk paket yang diinstal secara lokal. Untuk informasi selengkapnya, lihat Mengelola paket npm.

(5) File proyek seperti server.js muncul di bawah simpul proyek. server.js adalah file startup proyek dan itulah sebabnya muncul dengan tebal. Anda dapat mengatur file startup dengan mengklik kanan file dalam proyek dan memilih Atur sebagai file startup Node.js.

Menambahkan paket npm

Aplikasi ini memerlukan modul npm berikut untuk berjalan dengan benar:

Bereaksi
react-dom
ekspres
path
ts-loader
typescript
webpack
webpack-cli

Untuk menginstal paket:

Di Penjelajah Solusi, klik kanan simpul npm dan pilih Instal Paket npm Baru.
Dalam kotak dialog Instal Paket npm Baru , cari paket react , dan pilih Instal Paket untuk menginstalnya.

Dalam kotak dialog Instal Paket npm Baru , Anda dapat memilih untuk menginstal versi paket terbaru atau menentukan versi. Jika Anda memilih untuk menginstal versi saat ini, tetapi mengalami kesalahan tak terduga nanti, coba instal versi paket yang tepat yang tercantum di langkah berikutnya.

Jendela Output di panel bawah Visual Studio memperlihatkan kemajuan penginstalan paket. Buka jendela Output dengan memilih Tampilkan>Output atau tekan Ctrl+Alt+O. Di bidang Tampilkan output dari jendela Output , pilih Npm.

Saat diinstal, paket react muncul di bawah simpul npm di Penjelajah Solusi.

Berkas proyek package.json diperbarui dengan informasi paket baru, termasuk versi paket.

Alih-alih menggunakan UI untuk mencari dan menambahkan paket lainnya satu per satu, Anda dapat menempelkan kode paket yang diperlukan ke package.json.

Dari Penjelajah Solusi, buka package.json di editor Visual Studio. Tambahkan bagian berikut dependencies sebelum akhir file:
```
"dependencies": {
  "express": "^4.18.2",
  "path": "^0.12.7",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "ts-loader": "^9.4.2",
  "typescript": "^5.0.2",
  "webpack": "^5.76.3",
  "webpack-cli": "^5.0.1"
},
```
Jika file sudah memiliki dependencies bagian, ganti dengan kode JSON sebelumnya. Untuk informasi selengkapnya tentang menggunakan package.json file, lihat konfigurasipackage.json.
Tekan Ctrl+S atau pilih Simpan File>package.json untuk menyimpan perubahan.
Di Penjelajah Solusi, klik kanan simpul npm di proyek Anda dan pilih Instal Paket npm.

Perintah ini menjalankan perintah instal npm secara langsung untuk menginstal semua paket yang tercantum dalam packages.json.

Pilih jendela Output di panel bawah untuk melihat kemajuan penginstalan. Penginstalan mungkin memakan waktu beberapa menit, dan Anda mungkin tidak segera melihat hasilnya. Pastikan Anda memilih Npm di bidang Tampilkan output dari di jendela Output .

Setelah penginstalan, modul npm muncul di simpul npm di Penjelajah Solusi.

Nota

Anda juga dapat menginstal paket npm dengan menggunakan baris perintah. Di Penjelajah Solusi, klik kanan nama proyek dan pilih Buka Prompt Perintah Di Sini. Gunakan perintah Node.js standar untuk menginstal paket.

Menambahkan file proyek

Selanjutnya, tambahkan empat file baru ke proyek Anda.

app.tsx
webpack-config.js
index.html
tsconfig.json

Untuk aplikasi sederhana ini, Anda menambahkan file proyek baru di akar proyek. Untuk sebagian besar aplikasi, Anda menambahkan file ke subfolder dan menyesuaikan referensi jalur relatif yang sesuai.

Di Penjelajah Solusi, pilih nama proyek dan tekan Ctrl+Shift+A, atau klik kanan nama proyek dan pilih Tambahkan>Item Baru.

Jika Anda tidak melihat semua templat item, pilih Perlihatkan Semua Templat, lalu pilih templat item.
Dalam kotak dialog Tambahkan Item Baru , pilih TypeScript JSX File, ketik nama app.tsx, dan pilih Tambahkan atau OK.
Ulangi langkah-langkah ini untuk menambahkan file JavaScript bernama webpack-config.js.
Ulangi langkah-langkah ini untuk menambahkan file HTML bernama index.html.
Ulangi langkah-langkah ini untuk menambahkan File Konfigurasi JSON TypeScript bernama tsconfig.json.

Menambahkan kode aplikasi

Di Penjelajah Solusi, buka server.js dan ganti kode yang ada dengan kode berikut:
```
'use strict';
var path = require('path');
var express = require('express');

var app = express();

var staticPath = path.join(__dirname, '/');
app.use(express.static(staticPath));

// Allows you to set port in the project properties.
app.set('port', process.env.PORT || 3000);

var server = app.listen(app.get('port'), function() {
    console.log('listening');
});
```
Kode sebelumnya menggunakan Express untuk memulai Node.js sebagai server aplikasi web Anda. Kode mengatur port ke nomor port yang dikonfigurasi dalam properti proyek, yang secara default adalah 1337. Jika Anda perlu membuka properti proyek, klik kanan nama proyek di Penjelajah Solusi dan pilih Properti.

Buka app.tsx dan tambahkan kode berikut:

declare var require: any

var React = require('react');
var ReactDOM = require('react-dom');

export class Hello extends React.Component {
    render() {
        return (
            <h1>Welcome to React!!</h1>
        );
    }
}

ReactDOM.render(<Hello />, document.getElementById('root'));

Kode sebelumnya menggunakan sintaks JSX dan React untuk menampilkan pesan.

Buka index.html dan ganti bagian body dengan kode berikut:
```
<body>
    <div id="root"></div>
    
    <script src="./dist/app-bundle.js"></script>
</body>
```
Halaman HTML ini memuat app-bundle.js, yang berisi kode JSX dan React yang ditranspilasi ke JavaScript biasa. Saat ini, app-bundle.js adalah file kosong. Di bagian berikutnya, Anda mengonfigurasi opsi untuk menerjemahkan kode.

Mengonfigurasi opsi pengkompilasi webpack dan TypeScript

Selanjutnya, Anda menambahkan kode konfigurasi webpack ke webpack-config.js. Anda menambahkan konfigurasi webpack sederhana yang menentukan file input, app.tsx, dan file output, app-bundle.js, untuk menggabungkan dan mentranspilasi JSX ke JavaScript biasa. Untuk menerjemahkan, Anda juga mengonfigurasi beberapa opsi pengkompilasi TypeScript. Kode konfigurasi dasar ini adalah pengantar paket web dan pengompilasi TypeScript.

Di Penjelajah Solusi, buka webpack-config.js dan tambahkan kode berikut.

module.exports = {
    devtool: 'source-map',
    entry: "./app.tsx",
    mode: "development",
    output: {
        filename: "./app-bundle.js"
    },
    resolve: {
        extensions: ['.Webpack.js', '.web.js', '.ts', '.js', '.jsx', '.tsx']
    },
    module: {
        rules: [
            {
                test: /\.tsx$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'ts-loader'
                }
            }
        ]
    }
}

Kode konfigurasi paket web menginstruksikan webpack untuk menggunakan pemuat TypeScript untuk menerjemahkan JSX.

Buka tsconfig.json dan ganti konten dengan kode berikut, yang menentukan opsi pengkompilasi TypeScript:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "module": "commonjs",
    "noEmitOnError": true,
    "removeComments": false,
    "sourceMap": true,
    "target": "es5",
    "jsx": "react"
  },
  "exclude": [
    "node_modules"
  ],
  "files": [
    "app.tsx"
  ]
}

Kode menentukan app.tsx sebagai file sumber.

Tekan Ctrl+Shift+S atau pilih Simpan Semua File> untuk menyimpan semua perubahan.

Konversi JSX

Di Penjelajah Solusi, klik kanan nama proyek dan pilih Buka Prompt Perintah Di Sini.
Pada prompt perintah, masukkan perintah webpack berikut:

node_modules\.bin\webpack --config webpack-config.js

Jendela command prompt menunjukkan hasilnya.

Jika Anda melihat kesalahan menggantikan output sebelumnya, Anda harus mengatasinya sebelum aplikasi Anda dapat berfungsi. Jika versi paket npm Anda berbeda dari versi yang ditentukan tutorial ini, yang dapat menyebabkan kesalahan. Untuk memperbaiki kesalahan, coba yang berikut ini:
- Gunakan versi yang tepat yang ditunjukkan pada langkah sebelumnya, jika Anda belum melakukannya
  
  Atau, jika Anda masih melihat kesalahan:
- Instal versi terbaru paket npm dengan mengklik kanan simpul npm di Penjelajah Solusi dan memilih Instal paket npm.
Jika satu atau beberapa versi paket tidak digunakan lagi dan mengakibatkan kesalahan, Anda mungkin perlu menginstal versi yang lebih baru untuk memperbaiki kesalahan. Untuk informasi tentang penggunaan package.json untuk mengontrol versi paket npm, lihat konfigurasipackage.json.
Di Penjelajah Solusi, klik kanan simpul proyek dan pilih Tambahkan>Folder yang Ada.
Pilih folder dist , lalu pilih Pilih Folder.

Visual Studio menambahkan folder dist , yang berisi app-bundle.js dan app-bundle.js.map, ke proyek.
Buka app-bundle.js untuk melihat kode JavaScript yang ditranspilasi.
Jika diminta apakah akan memuat ulang file yang dimodifikasi secara eksternal, pilih Ya untuk Semua.

Setiap kali Anda membuat perubahan pada app.tsx, Anda harus menjalankan ulang perintah webpack. Untuk mengotomatiskan langkah ini, Anda dapat menambahkan skrip pembangunan untuk mentranspilasi JSX.

Tambahkan skrip build untuk menerjemahkan JSX

Versi Visual Studio yang dimulai dengan Visual Studio 2019 memerlukan skrip build. Daripada mengalihbahasakan JSX di baris perintah, seperti yang ditunjukkan di bagian sebelumnya, Anda dapat mengalihbahasakan JSX saat membangun menggunakan Visual Studio.

Buka package.json dan tambahkan bagian berikut setelah bagian dependencies :
```
"scripts": {
 "build": "webpack-cli --config webpack-config.js"
}
```
Simpan perubahan Anda.

Menjalankan aplikasi

Di toolbar Debug , pilih Server Web (Microsoft Edge) atau Server Web (Google Chrome) sebagai target debug.

Jika Anda tahu target debug pilihan Anda tersedia di komputer Anda, tetapi tidak muncul sebagai opsi, pilih Telusuri Dengan dari daftar dropdown target debug. Pilih target browser default Anda dalam daftar, dan pilih Atur sebagai Default.
Untuk menjalankan aplikasi, tekan F5, pilih tombol panah hijau, atau pilih Debug>Mulai Debugging.

Jendela konsol Node.js terbuka yang menampilkan port yang didengarkan oleh debugger.

Visual Studio memulai aplikasi dengan meluncurkan file startup, server.js.
Tutup browser dan jendela konsol.

Mengatur titik henti dan menjalankan aplikasi

Titik henti adalah fitur paling mendasar dan penting dari debugging yang andal. Titik henti menunjukkan di mana Visual Studio harus menangguhkan kode yang sedang berjalan. Anda kemudian dapat mengamati nilai variabel, perilaku memori, atau apakah cabang kode berjalan.

Di server.js, klik di area gutter di sebelah kiri deklarasi staticPath untuk menetapkan titik henti.
Untuk menjalankan aplikasi, tekan F5 atau pilih Debug>Mulai Debugging.

Debugger dijeda pada titik henti yang Anda tetapkan, dengan pernyataan saat ini disorot. Sekarang, Anda dapat memeriksa status aplikasi dengan mengarahkan mouse ke atas variabel yang saat ini berada dalam cakupan, menggunakan jendela debugger seperti jendela Lokal dan Tonton .
Untuk terus menjalankan aplikasi, tekan F5, pilih Lanjutkan di toolbar Debug , atau pilih Debug>Lanjutkan.

Jika Anda ingin menggunakan Alat Pengembang Chrome atau Alat F12 untuk Microsoft Edge, tekan F12. Anda dapat menggunakan alat ini untuk memeriksa DOM dan berinteraksi dengan aplikasi dengan menggunakan Konsol JavaScript.
Tutup browser dan jendela konsol.

Atur dan tekan titik henti di kode React sisi klien

Di bagian sebelumnya, Anda melampirkan debugger ke kode Node.js sisi server. Untuk melampirkan dan menekan titik henti dalam kode React sisi klien, Anda harus melampirkan debugger ke proses yang benar. Berikut adalah salah satu cara untuk mengaktifkan browser dan mengaitkan proses untuk debugging.

Mengaktifkan browser untuk debugging

Anda dapat menggunakan Microsoft Edge atau Google Chrome. Tutup semua jendela untuk browser target. Untuk Microsoft Edge, tutup juga semua aplikasi Chrome. Karena kedua browser berbagi basis kode Chromium, mematikan kedua browser memberikan hasil terbaik.

Instans browser lainnya dapat mencegah browser terbuka dengan mode debugging diaktifkan. Ekstensi browser mungkin mencegah mode debug penuh. Anda mungkin perlu menggunakan Task Manager untuk menemukan dan mengakhiri semua instans Chrome yang sedang berjalan.

Untuk memulai browser Anda dengan debugging diaktifkan:

Pilih Telusuri Dengan dari daftar dropdown di toolbar Debug .
Pada layar Telusuri Dengan , dengan browser pilihan Anda disorot, pilih Tambahkan.
Masukkan bendera --remote-debugging-port=9222 di bidang Argumen .
Beri browser nama ramah baru seperti Edge dengan penelusuran kesalahan atau Chrome dengan penelusuran kesalahan, lalu pilih OK.
Pada layar Telusuri Dengan , pilih Telusuri.

Atau, Anda dapat membuka perintah Jalankan dengan mengklik kanan tombol Mulai Windows, dan memasukkan:

msedge --remote-debugging-port=9222

or

chrome.exe --remote-debugging-port=9222

Browser dimulai dengan debugging diaktifkan. Aplikasi belum berjalan, sehingga halaman browser kosong.

Lampirkan debugger ke skrip sisi klien

Di editor Visual Studio, pasang titik henti baik di kode app-bundle.js atau app.tsx sumber.
- Untuk app-bundle.js, atur titik henti dalam render() fungsi . Untuk menemukan render() fungsi dalam file app-bundle.js , tekan Ctrl+F atau pilih Edit>Temukan dan Ganti>Pencarian Cepat, dan masukkan render di bidang pencarian.
- Untuk app.tsx, atur titik henti pada fungsi render(), pada pernyataan return.
  
  Jika Anda mengatur titik henti di app.tsx, perbarui juga webpack-config.js untuk mengganti kode berikut, dan simpan perubahan Anda.
  
  Ganti kode ini:
```
output: {
    filename: "./app-bundle.js",
},
```
  Dengan kode ini:
```
output: {
    filename: "./app-bundle.js",
    devtoolModuleFilenameTemplate: '[resource-path]'  // removes the webpack:/// prefix
},
```
  Pengaturan khusus untuk pengembangan ini memungkinkan debugging di Visual Studio. Secara default, referensi webpack dalam file peta sumber menyertakan awalan webpack:/// , yang mencegah Visual Studio menemukan file sumber app.tsx. Pengaturan ini mengambil alih referensi yang dihasilkan dalam file peta sumber, app-bundle.js.map, saat membuat aplikasi. Secara khusus, pengaturan ini mengubah referensi ke file sumber dari webpack:///./app.tsx ke ./app.tsx, yang memungkinkan penelusuran kesalahan.
Pilih browser target Anda sebagai target debug di Visual Studio, lalu tekan Ctrl+F5, atau pilih Debug>Mulai Tanpa Penelusuran Kesalahan, untuk menjalankan aplikasi di browser.

Jika Anda membuat konfigurasi browser yang mendukung penelusuran kesalahan dengan nama yang mudah diingat, pilih browser tersebut sebagai target debug Anda.

Aplikasi terbuka di tab browser baru.
Pilih Lampirkan Debug>ke Proses, atau tekan Ctrl+Alt+P.

Petunjuk / Saran

Setelah melampirkan ke proses pertama kalinya, Anda dapat dengan cepat memasang kembali ke proses yang sama dengan memilih Debug>Pasang Ulang ke Proses atau menekan Shift+Alt+P.
Dalam kotak dialog Lampirkan ke Proses , dapatkan daftar instans browser yang difilter yang dapat Anda lampirkan.

Pastikan debugger yang benar untuk browser target Anda, JavaScript (Chrome) atau JavaScript (Microsoft Edge - Chromium), muncul di bidang Lampirkan ke . Ketik chrome atau edge di kotak filter untuk memfilter hasilnya.
Pilih proses browser dengan port host yang benar, localhost dalam contoh ini. Nomor port 1337 atau localhost mungkin juga muncul di bidang Judul untuk membantu Anda memilih proses yang benar.
Pilih Lampirkan.

Contoh berikut menunjukkan jendela Lampirkan ke Proses untuk browser Microsoft Edge.

Petunjuk / Saran

Jika debugger tidak terhubung dan Anda melihat pesan Tidak dapat melampirkan ke proses. Operasi tidak legal dalam status saat ini., gunakan Task Manager untuk menutup semua instance browser target sebelum menjalankan browser dalam mode debug. Ekstensi browser mungkin berjalan dan mencegah mode debug penuh.
Karena kode dengan titik henti sudah dijalankan, refresh halaman browser Anda untuk mencapai titik henti.

Bergantung pada lingkungan, status browser, dan langkah mana yang Anda ikuti sebelumnya, Anda mungkin mencapai titik henti di app-bundle.js atau lokasi yang dipetakan di app.tsx. Bagaimanapun, Anda dapat menelusuri kode dan memeriksa variabel.

Saat debugger dijeda, Anda dapat memeriksa status aplikasi dengan mengarahkan mouse ke atas variabel dan menggunakan jendela debugger. Untuk menelusuri kode, tekan F11 atau pilih Debug>Step Into, atau tekan F10 atau pilih Debug>Step Over. Untuk terus menjalankan kode, tekan F5 atau pilih Lanjutkan. Untuk informasi selengkapnya tentang fitur penelusuran kesalahan dasar, lihat Pertama-tama lihat debugger.
- Jika Anda tidak dapat memecah kode di app.tsx, coba lagi menggunakan Lampirkan ke Proses untuk melampirkan debugger seperti yang dijelaskan di langkah-langkah sebelumnya. Pastikan lingkungan Anda disiapkan dengan benar:
  - Tutup semua instans browser, termasuk ekstensi Chrome, dengan menggunakan Task Manager. Pastikan Anda memulai browser dalam mode debug.
  - Pastikan file peta sumber Anda menyertakan referensi ke ./app.tsx dan bukan webpack:///./app.tsx, yang mencegah debugger Visual Studio menemukan app.tsx.
  Atau, coba gunakan pernyataan debugger; di app.tsx, atau atur breakpoint di Alat Pengembang Chrome atau Alat F12 untuk Microsoft Edge sebagai alternatif.
- Jika Anda tidak dapat memecah kode di app-bundle.js, hapus file peta sumber, app-bundle.js.map.

Langkah selanjutnya

Menyebarkan aplikasi ke Linux App Service

Saran dan Komentar

Apakah halaman ini membantu?

Last updated on 2025-11-11