Webpack/babel和react-scripts之间的区别

Question

最近我开始研究web pack和react-scripts,我想知道使用它们的优缺点以及它们之间的差异.

Answer 1

基本上,它们用于不同的目的,通常一起出现.我将解释他们的目的.

巴别塔

巴贝尔是一个转录者.它可以将各种高版本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的开发人员创建了一个名为npm的软件包react-scripts,其中包含了大多数普通React应用程序所需的大量基本设置.Babel和webpack 作为依赖项包含在中react-scripts

Answer 2

WebPack和react-scripts稍有不同。

Webpack用于为您的Web应用程序编译包，该包可以是自由格式，并且具有某些入口点。然后，webpack与babel预设一起使用，这使您可以在相对较旧的浏览器中使用现代ES6 +构造。另外，webpack负责在一个文件中依赖于程序集的node_modules，并可能对其进行压缩和优化。您可以在此处阅读有关webpack原理的更多信息：https ://webpack.js.org/concepts/

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