如果没有 babel 或任何构建工具，create-react-app 工具如何工作？答案

【问题标题】：How does create-react-app tool work without babel or any build tool?如果没有 babel 或任何构建工具，create-react-app 工具如何工作？
【发布时间】：2019-02-07 13:35:05
【问题描述】：

我通常使用 webpack 和 babel 来配置我的 react 项目。最近尝试使用 create-react-app。问题是，当您使用 create-react-app 创建应用程序时，项目上没有安装 babel 或任何构建工具，例如在 package.json 文件中安装的 gulp。那么，如果没有这些工具，ES6 或其他东西如何工作呢？

【问题讨论】：

标签： javascript reactjs create-react-app

【解决方案1】：

像 babel 和 webpack 这样的东西是 react-scripts 包的依赖项，所以即使它们没有直接列在你的 package.json 中，它们也会被 npm（或 yarn）下载，作为安装依赖项的依赖项的一部分，以及它们的依赖关系。

这是react-scripts 的package.json 文件，您可以在那里查看所有依赖项：https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/package.json

这种效果称为依赖关系树，您最终会得到大量您不知道的库。

【讨论】：

非常感谢。有趣的是它是如何在幕后捆绑的

【解决方案2】：

这就是我不使用 babel 的方式

首先是 react js

https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.js
https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.js

然后在其中创建一个jsx 文件，您将获得您的反应代码。

最后

通常当你有 babel 时，你可以像这样调用 react

ReactDOM.render(<ShoppingList name="test" />, document.getElementById('content'));

但是感觉你没有 babel，那么调用会变成这样

ReactDOM.render(React.createElement(ShoppingList,{option}),document.getElementById('content'))

【讨论】：