create-react-app 中的 JSX 文件答案

【问题标题】：JSX files in create-react-appcreate-react-app 中的 JSX 文件
【发布时间】：2017-06-24 22:13:10
【问题描述】：

只是想知道 create-react-app 如何使用 .js 文件而不是 .jsx 来进行 jsx 标记。是不是因为特殊的 webpack 配置？顺便说一句，我在哪里可以找到我用 create-react-app 创建的项目的 webpack 和 babel 配置？

【问题讨论】：

.jsx works out of the box with create react app. Just restart the server.

标签： javascript reactjs webpack jsx create-react-app

【解决方案1】：

文件扩展名没有什么特别之处；这只是通过 Babel 运行的内容的问题。例如：

  module: {
    loaders: [
      {
        test:    /\.jsx?$/, 
        exclude: /(node_modules)/,
        loader:  'babel',
        query:   {
          presets: [
            'react',
            'es2015',
            'stage-0'
          ],
          plugins: [
            ["transform-decorators-legacy"],
          ]
        },
      }

这会使用 React 预设通过 Babel 运行 .js 和 .jsx。

Webpack 和 Babel 配置在 create-react-app 中。

您可以通过以下方式弹出它们：

npm run eject 让它们“外化”，但只有在你真正想要的时候才这样做。

https://github.com/facebookincubator/create-react-app#user-content-converting-to-a-custom-setup

【讨论】：

该模式与.js 或.j 不匹配吗？你的意思是/\.jsx?$/？
@Aaron 嗯。是的。在我的辩护中，我没有编写我们的 webpack 配置：/
@DaveNewton，所以你不能在不弹出它们的情况下对那些 Webpack 和 Babel 配置进行任何更改？
@Horak 从技术上讲，您可能可以访问 node_modules 并更改它，但这似乎是一个非常糟糕的主意。
@DaveNewton，我明白了；所以标准协议就是弹出，嗯？