Webpack/Babel和react-scripts之间的区别 [英] Difference between Webpack/Babel and react-scripts

问题描述

最近，我开始研究Web Pack和react-scripts，我想知道使用它们的优缺点以及它们之间的区别.

Recently i started working on web pack and react-scripts and i would like to know the advantages and disadvantages using them and how they are different from each other.

推荐答案

从根本上讲，它们具有不同的用途，通常会一起显示.我将解释它们的用途.

Basically speaking, they serve different purposes and usually show up together. I will explain what they are designed to do.

Babel是翻译员.它可以将各种高版本的ECMAScript(不仅是ECMAScript，而且很容易理解)转换为ES5，ES5得到了浏览器(尤其是较旧版本)的广泛支持.主要工作是将不受支持或最先进的语言功能转换为ES5.

Babel is a transpiler. It can translate all kinds of high version ECMAScript ( not only ECMAScript, but it's easy to understand) into ES5, which is more widely supported by browsers (especially older versions). It's main job is to turn unsupported or cutting-edge language features into ES5.

Webpack尤其是依赖性分析器和模块捆绑器.例如，如果模块A要求B作为依赖项，而模块B要求C作为依赖项，则webpack会生成一个依赖关系图，例如C-> B->A.实际上，它比这复杂得多，但是一般Webpack的概念是将具有复杂依赖关系的模块打包成束.关于webpack与babel的关系:当webpack处理依赖关系时，它必须将所有内容都转换为javascript，因为webpack可以在javascript之上工作.结果，它使用不同的加载程序将不同类型的资源/代码转换为javascript.当需要ES6或ES7功能时，可以使用babel-loader来实现.

Webpack is, among other things, a dependency analyzer and module bundler. For example, if module A requires B as a dependency, and module B requires C as a dependency, then webpack will generate a dependency map like C -> B -> A. In practice it is much more complicated than this, but the general concept is that Webpack packages modules with complex dependency relationships into bundles. Regarding webpack's relationship with babel: When webpack processes dependencies, it must turn everything into javascript because webpack works on top of javascript. As a result, it uses different loaders to translate different types of resources/code into javascript. When we need ES6 or ES7 features, we use babel-loader to accomplish this.

当我们开始一个基于反应的项目时，设置构建环境是一项艰巨而耗时的工作.为了解决这个问题，React的开发人员创建了一个名为react-scripts的npm软件包，其中包含了大多数人对于普通React应用程序所需的许多基本设置. Babel和webpack被作为依赖项包含在react-scripts

when we start a react-based project, setting up the build environment is tough and time-consuming work. To help with this, the developers of React created an npm package called react-scripts that includes a lot of the basic setup most people will need for an average React app. Babel and webpack are included as dependencies in react-scripts

这篇关于Webpack/Babel和react-scripts之间的区别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！