Webpack/Babel和react-scripts的区别

Question

最近我开始使用Webpack和React Scripts，想了解它们的优缺点以及它们之间的区别。

- user3335796

Answer 1

基本上，它们有不同的目的，通常一起出现。我将解释它们的设计目的。

babel

Babel是一个转译器。它可以将各种高版本ECMAScript（不仅限于ECMAScript，但易于理解）转换为ES5，后者被浏览器更广泛地支持（特别是旧版本）。它的主要工作是将不支持或前沿的语言特性转换为ES5。

Webpack

Webpack是依赖分析器和模块打包工具等等。例如，如果模块A需要依赖B，而模块B需要依赖C，则webpack会生成一个依赖映射，如C -> B -> A。实际上，它比这复杂得多，但总体概念是Webpack将具有复杂依赖关系的模块打包成包。关于webpack与babel的关系：当webpack处理依赖项时，它必须将所有内容转换为javascript，因为webpack在javascript之上工作。因此，它使用不同的加载器将不同类型的资源/代码转换为javascript。当我们需要ES6或ES7功能时，我们使用babel-loader完成此操作。

react-scripts

当我们启动基于react的项目时，设置构建环境是繁琐且耗时的工作。为了帮助解决这个问题，React的开发人员创建了一个名为react-scripts的npm包，其中包括大多数人在普通React应用程序中所需的基本设置。Babel和Webpack作为依赖项包含在react-scripts中。

- Oboo Cheng

Answer 2

WebPack和react-scripts是略有不同的东西。

Webpack用于编译您的Web应用程序的捆绑包，它可以是自由格式的，并且具有某些入口点。此外，Webpack与babel-presets一起使用，允许您在相对旧的浏览器中使用现代ES6+构造。此外，Webpack负责将依赖的node_modules组装成一个文件，并可能进行压缩和优化。您可以在这里阅读有关webpack哲学的更多信息：https://webpack.js.org/concepts/

React-scripts只是启动一些定制的webpack-dev-server的起始工具，该服务器已配置为与提供的React playground样板一起使用。它只是演示目的的东西。大多数现代Web库都有自己的起始工具，甚至服务器端库也有，例如https://github.com/reimagined/resolve/tree/master/packages/resolve-scripts等等

- Vladislav Ihost