npm startを使用するとjsxコードがjsでコンパイルされるのはなぜですか？

Question

お願いします。私はReactを使用し、npmで私のアプリを構築する。 「npm start」を使用すると、jsxコードがブラウザのjsコードに変換される理由を教えてください。しかし、 "npm run build"を使うと、jsx形式のままです。変換コードを使用してアプリケーションをデバッグするのは快適ではありません。逆に、私のアプリケーションをビルドするときには、コードを変換する必要があります。

マイ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" 
    } 
} 

、私は私が私の "NPM開始" 設定にsourcemapを添付する必要があることを理解しています。これどうやってするの？

ありがとうございます。

Answer 1

JSXは常にネイティブJSへの移行を現在のブラウザで理解する必要があります。あなたがビルドを実行するときに何が起きているかは、それがまだ蒸散されているにもかかわらず、sourcemapが作成され、ブラウザで「元の」またはほぼオリジナルのものを見ることができます。

create-react-app（素晴らしい選択肢）を使用しているようです。

Answer 2

create-react-appを使用してコードベースを作成したようです。

• は "npm start JSXコードは、ブラウザでのJSコードに変換します。"

  当社のブラウザのみjsなくjsxを理解することができますので、はいているが、期待されています。実際にはJSXだけではなく、ES6コードもあり、ES5に移行する必要があります。

• は、私はそうは思いません

  "私はnpm run buildを使用する場合には、JSX形式のまま"。すべてのJavaScriptファイルは、バンドルさtranspiledと縮小され、「コードを変換を使用して自分のアプリケーションをデバッグするために快適ではありません。」build/static/js/

• 内部に格納されますされています

  残念ながら、ブラウザでデバッグしている場合、純粋なJavaSciptを処理する必要があります。

  まだ心配しないで、ソースマップFTWがあります。この回答は、https://stackoverflow.com/a/24011617/5069226を参照してください。これは、Chrome Dev Toolsで実験的なJavaScript機能を有効にして、ソースマップでコードをデバッグする方法を説明しています。