React را از Visual Studio Code اجرا کنید

Summarize this content to 400 words in Persian Lang
نحوه راه اندازی یک برنامه React از Visual Studio Code شامل فایرفاکس و کروم با استفاده از React Script 5.0.1 و Windows

انگیزه

من می خواهم برنامه React خود را از Visual Studio Code با یک کلیک راه اندازی کنم. من از تایپ زیاد در ترمینال برای راه اندازی یک برنامه متنفرم. من ترجیح می دهم از اسکریپت استفاده کنم. تغییری به وجود آمده است react-scripts، بنابراین راه حل های دیگر در وب دیگر کار نمی کنند. بنابراین در اینجا راه حل کاری فعلی من است!

راه حل

اسکریپت های مختلفی را در package.json خود ایجاد کنید تا بسته به نیاز فعلی خود، react-script را با گزینه های مختلف شروع کنید. ابتدا مرورگر را روی هیچ یک برای جلوگیری از react-scripts از راه اندازی خود مرورگر. سپس مرورگر مورد نظر خود را اجرا کنید و سپس برنامه را اجرا کنید. در launch.json خود از Visual Studio Code اسکریپت های npm مناسب را فراخوانی کنید.

در فایرفاکس شروع کنید

“scripts”: {
…
“startfirefox”: “set \”BROWSER=none\” && start firefox http://localhost:3000 && react-scripts start”,
…
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در پنجره خصوصی فایرفاکس شروع کنید

“scripts”: {
…
“startfirefoxprivate”: “set \”BROWSER=none\” && start firefox -private-window http://localhost:3000 && react-scripts start”,
…
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در کروم شروع کنید

“scripts”: {
…
“startchrome”: “set \”BROWSER=none\” && start chrome http://localhost:3000 && react-scripts start”,
…
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

در Chrome ناشناس شروع کنید

“scripts”: {
…
“startchromeincognito”: “set \”BROWSER=none\” && start chrome http://localhost:3000 /incognito && react-scripts start”,
…
},

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

از Visual Studio Code اجرا کنید

اجازه دهید ویژوال استودیو کد یک را ایجاد کند launch.json برای شما. تنظیمات ایجاد شده را با JSON زیر جایگزین کنید:

“configurations”: [
{
“type”: “node”,
“request”: “launch”,
“name”: “Start using Default browser”,
“runtimeExecutable”: “npm”,
“runtimeArgs”: [“run-script”, “start”],
},
{
“type”: “node”,
“request”: “launch”,
“name”: “Start using Chrome”,
“runtimeExecutable”: “npm”,
“runtimeArgs”: [“run-script”, “startchrome”],
},
{
“type”: “node”,
“request”: “launch”,
“name”: “Start using Firefox”,
“runtimeExecutable”: “npm”,
“runtimeArgs”: [“run-script”, “startfirefox”],
},
{
“type”: “node”,
“request”: “launch”,
“name”: “Start using Chrome Incognito”,
“runtimeExecutable”: “npm”,
“runtimeArgs”: [“run-script”, “startchromeincognito”],
},
{
“type”: “node”,
“request”: “launch”,
“name”: “Start using Firefox private”,
“runtimeExecutable”: “npm”,
“runtimeArgs”: [“run-script”, “startfirefoxprivate”],
},
]

وارد حالت تمام صفحه شوید

از حالت تمام صفحه خارج شوید

نتیجه

این راه حل برای ویندوز و نسخه فعلی react-script کار می کند. از آنجایی که فقط از دستورات مخصوص سیستم عامل استفاده می کند، می توانید به راحتی آن را با سیستم عامل خود تطبیق دهید.

نسخه استفاده شده

آموزش بر اساس ایجاد شده است

نمونه ها

من یک نمونه برنامه در GitHub ایجاد کردم:

نمونه برنامه نحوه راه اندازی برنامه React از Visual Studio Code در مرورگرهای مختلف

نمونه برنامه نحوه راه اندازی برنامه React از Visual Studio Code در مرورگرهای مختلف.

مقاله من را ببینید که چگونه این را خودتان ایجاد کنید.

منابع

اعتبار به این نظر می رسد:

https://github.com/facebook/create-react-app/issues/11873#issuecomment-1030708183

"scripts": {
  ...
  "startfirefox": "set \"BROWSER=none\" && start firefox http://localhost:3000 && react-scripts start",
  ...
},

"scripts": {
  ...
  "startfirefoxprivate": "set \"BROWSER=none\" && start firefox -private-window http://localhost:3000 && react-scripts start",
  ...
},

"scripts": {
  ...
  "startchrome": "set \"BROWSER=none\" && start chrome http://localhost:3000 && react-scripts start",
  ...
},

"scripts": {
  ...
  "startchromeincognito": "set \"BROWSER=none\" && start chrome http://localhost:3000 /incognito && react-scripts start",
  ...
},

"configurations": [
    {
      "type": "node",
      "request": "launch",
      "name": "Start using Default browser",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "start"],
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Start using Chrome",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "startchrome"],
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Start using Firefox",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "startfirefox"],
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Start using Chrome Incognito",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "startchromeincognito"],
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Start using Firefox private",
      "runtimeExecutable": "npm",
      "runtimeArgs": ["run-script", "startfirefoxprivate"],
    },
  ]