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 ，它可以让您在浏览器中看到“原始”或接近原始版本。

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

Answer 2

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

＆＃34; npm start jsx代码转换为浏览器中的js代码。＆＃34;

是的，这是预期的，因为我们的浏览器只能理解js而不是jsx。实际上它不只是JSX，你也有ES6代码，它们需要被转换为ES5。
＆＃34;当我使用npm run build时，它仍然采用jsx格式＆＃34;

我不这么认为。您的所有JavaScript文件都被捆绑，转换和缩小，并存储在build/static/js/
＆＃34;使用转换代码调试我的应用程序并不合适。＆＃34;

不幸的是，如果您在浏览器中进行调试，则必须处理纯JavaScipt。

但是不用担心，你有Source Maps FTW！请参阅此回答https://stackoverflow.com/a/24011617/5069226，其中介绍了如何在Chrome开发工具中启用一些实验性JavaScript功能，以便使用源地图调试代码。

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

2 个答案: