當我使用npm start時，爲什麼我的jsx代碼在js中編譯？

你能幫助我嗎？我使用React並通過npm構建我的應用程序。你能告訴我爲什麼當我使用「npm start」時，我的jsx代碼在瀏覽器中轉換爲js代碼。但是當我使用「npm run build」時，它仍然是jsx格式。使用轉換代碼調試我的應用程序並不舒服。而且我認爲，當我構建我的應用程序時，必須改變代碼。當我使用npm start時，爲什麼我的jsx代碼在js中編譯？

我的package.json是：

{ 
    "name": "kb_frontend", 
    "version": "0.1.0", 
    "private": true, 
    "devDependencies": { 
    "react-scripts": "0.7.0" 
    }, 
    "dependencies": { 
    "react": "^15.4.1", 
    "react-dom": "^15.4.1", 
    "semantic-ui-css": "^2.2.4", 
    "semantic-ui-react": "^0.61.4" 
    }, 
    "scripts": { 
    "start": "react-scripts start", 
    "build": "react-scripts build", 
    "test": "react-scripts test --env=jsdom", 
    "eject": "react-scripts eject" 
    } 
}

下面的答案後，我明白我需要sourcemap重視我的「故宮啓動」配置。我怎樣才能做到這一點？

謝謝你的幫助。

來源

2016-11-29 Maksim

JSX將始終需要通過當前瀏覽器來理解本地JS的轉譯。我猜想當你運行構建時發生的事情是，儘管它仍然被轉發，但是創建了源代碼，它可以讓你在瀏覽器中看到「原始」或接近原始的。

看起來像你使用create-react-app（很棒的選擇！）。

來源

2016-11-29 11:29:19

謝謝你的回答，馬克。你能告訴我，我應該怎麼做附加sourcemap爲我的「npm start」配置？ – Maksim

自由靈魂在下面提供的鏈接看起來很有希望，它支持Chrome中的一些測試版功能。我想這取決於你需要做多少調試 - 我發現如果你沒有什麼太難處理的話，使用傳輸代碼不會太糟糕。Chrome的React Developer工具擴展也非常有用（如果您開始使用redux，Redux Dev Tools也是如此）。 –

不幸的是，React Developer工具只允許調試元素，而不是源代碼 – Maksim

看起來您已經使用create-react-app來創建您的代碼庫。

「npm start JSX代碼變換到在瀏覽器js代碼」。

是的，這是預期的，因爲我們的瀏覽器可以理解只有js，而不是jsx。其實它不僅僅是JSX，你也有ES6代碼，它們需要被轉換成ES5。
「當我用npm run build它仍然在JSX格式爲」

我不這麼認爲。你所有的JavaScript文件被捆綁，transpiled和精縮，並且將裏面存儲build/static/js/
「這是不舒服使用變換代碼調試我的應用程序。」

是的不幸的是，如果你在瀏覽器中調試，你將不得不處理純JavaScipt。

但是別擔心，你有Source Map FTW！請參閱此回答https://stackoverflow.com/a/24011617/5069226，其中解釋瞭如何在Chrome開發工具中啓用一些實驗性JavaScript功能，以便使用源地圖調試您的代碼。

來源

2016-11-29 11:53:14

當我使用npm start時，爲什麼我的jsx代碼在js中編譯？

回答

相關問題