为什么当我使用 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"
  }
}

经过以下回答后，我了解到我需要将 sourcemap 附加到我的 "npm start" 配置中。我该怎么做？

感谢您的帮助。

Answer 1

JSX 将始终需要转换为当前浏览器可以理解的本机 JS。我想当你运行构建时发生了什么，虽然它仍然被转译，但创建了一个 sourcemap ，它让你看到 'original' 或接近原始的浏览器。

看起来你正在使用 create-react-app（不错的选择！）。

Answer 2

您似乎已经使用 create-react-app 创建了您的代码库。

"npm start jsx code transforms to js code in browser."

是的，这是预期的，因为我们的浏览器只能理解 js 而不是 jsx。其实不只是JSX，你还有ES6代码，需要转ES5。
"when I use npm run build it remains in the jsx format"

我不这么认为。您的所有 JavaScript 文件都已打包、转译和缩小，并将存储在 build/static/js/
"It is not comfortable to debug my application using transform code."

是的，不幸的是，如果您在浏览器中调试，您将不得不处理纯 JavaScipt。

但别担心，您有 Source Maps FTW！请参阅此答案，它解释了如何在 Chrome 开发工具中启用一些实验性 JavaScript 功能，以便使用 Source Maps 调试您的代码。

为什么当我使用 npm start 时我的 jsx 代码在 js 中编译？

Why does my jsx code compile in js when I use npm start?

jsx

node.js

reactjs