当我使用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中编译？

回答

相关问题