使用webpack和Babel设置一个特别牛掰React环境

转自-------Web趣事分享 2017-04-24 00:03（感谢分享）

使用webpack和Babel设置一个特别牛掰React环境

让我们为您建立令人惊叹的React应用程序的设置。
源码： https://github.com/scotch-io/hello-world-react**
文章更新为webpack 2

React是Facebook的JavaScript库，用于构建用户界面。这是一个提供如此众多优势的炸弹图书馆，但最大的挫折之一就是陡峭的学习曲线。当我开始的时候，其中一件让我很烦的事情是，大部分教程跳过了React环境设置。
所以这里我们去，这篇文章最适合初学者谁不害怕让他们的手脏脏设置一个反应环境，从头开始。我的第一个任务是保持这篇文章的简单易懂。我不会用任何boilerplates，你可以找到我的GitHub库的整个设置在这里。我们将使用以下内容：
Webpack - 模块绑定器

Babel - 一个Javascript编译器

ES6 - 相对较新的Javasript标准

纱 - 包裹经理

反应 - 如预期

本文最适合初学者，他们不怕从头开始设置一个React环境。
在教程结束之前，我们将设置一个工作的React环境，只是为了好玩，我们将有一个简单的网页显示Hello World。
支撑自己一些乐趣！
＃先决条件
在我们潜入项目之前，我们需要在我们的机器上预先安装纱线和节点。
如上所述，我们将使用纱线包管理器。它与npm非常相似，并且具有与npm相同的命令。它还附带了几个不提供的额外功能。只是为了赶上你，我使用纱线的几个主要原因是：
如果您以前已经安装了软件包，则可以重新安装它，而无需任何互联网连接。除了您可以离线安装软件包外，还可以提高分期付款的速度。

任何机器都安装相同的完全依赖关系。这基本上意味着在一台机器上的安装将在任何其他机器上以相同的方式工作。

有关更多信息，您可以浏览纱线文档。
对于Mac Os用户，以下命令将足以安装纱线，并且因为我拥有所有后台，任何使用任何其他操作系统的人都可以前往Yarn安装页面，以获取正确的安装说明。

使用webpack和Babel设置一个特别牛掰React环境

＃入门
打开你的终端并创建一个新的文件夹。你可以按照你的意愿命名。浏览文件夹并运行初始化项目yarn init。yarn init就像npm init将会给你一些提示，只需按enter直到最后或配置它，你想要的。

使用webpack和Babel设置一个特别牛掰React环境

什么时候yarn init完成，你会注意到你的文件夹，在这种情况下，你好，你会有一个新的文件package.json，就像你已经完成npm init。
＃的WebPack安装和配置
接下来，我们需要安装webpack和一些依赖关系。

使用webpack和Babel设置一个特别牛掰React环境

在“hello-world-react”里面yarn.lock创建一个新的文件。该文件是Yarn用于锁定在另一台机器上使用的确切依赖关系，您不需要担心此文件会自动生成。
现在我们已经安装了webpack，我们需要一个配置文件来给出说明该怎么做。webpack.config.js在项目文件夹上创建一个新文件，并在首选文本编辑器上打开它。

使用webpack和Babel设置一个特别牛掰React环境

然后我们可以更新配置文件：

使用webpack和Babel设置一个特别牛掰React环境

基本上，要获得webpack的运行实例，我们需要指定一个entry点和一个output。
entry：指定捆绑程序启动捆绑过程的条目文件。

output：指定要保存捆绑的Javascript代码的位置。

然而，我们也有装载机。这些是需要的，因为我们希望我们使用的浏览器能够插入和运行JSX代码（对于React）和在ES6中编写的代码。
loaders：它们是在我们的应用程序中应用于文件的转换。

的loaders关键属性采用在装载机的阵列。对于我们的基本设置，我们指定babel-loader通过并遍历每个以文件夹中的文件.js或.jsx扩展名结尾的文件node_modules。您可以随时添加更多装载机。例如，如果您的项目中有单独的样式表，则需要一个CSS加载器。所有这些装载程序都可以在webpack 文档中找到。随意测试一下。
＃设置宝贝
在我们的webpack配置中，我们指定我们正在使用babel-loader。当这是否babel-loader来自你问？那么我们需要安装它，然后设置一些配置。

使用webpack和Babel设置一个特别牛掰React环境

这些都是我们为巴别塔所需要的依赖。注意我们已经安装了babel-preset-es2015，并且babel-preset-react预设是Babel插件，只是告诉Babel要注意什么，并转换成简单的香草Javascript。
我们然后必须配置Babel，我们可以在一个我们将要命名的新文件中执行此操作.babelrc。

使用webpack和Babel设置一个特别牛掰React环境

然后我们可以将文件更新为：

使用webpack和Babel设置一个特别牛掰React环境

这就对了。现在在babel-loaderwebpack配置文件中被调用时，它知道该怎么做。
＃设置我们的反应组件
到目前为止，我们的文件结构如下所示：

使用webpack和Babel设置一个特别牛掰React环境

它的高时间我们添加了反应方，你不觉得吗？我们将创建一个新文件夹client并添加一个index.js文件和一个index.html文件。

使用webpack和Babel设置一个特别牛掰React环境

现在我们有这个：

使用webpack和Babel设置一个特别牛掰React环境

接下来我们需要添加一些代码。我们将从简单的开始开始，以验证我们的设置到目前为止的工作。
打开index.js并添加：

使用webpack和Babel设置一个特别牛掰React环境

更新index.html到：

使用webpack和Babel设置一个特别牛掰React环境

这index.html是在浏览器中加载我们的React Components的实际网页。我之前提到过，我们需要babel为了将我们的代码编译成浏览器支持的语法。我们使用React组件编码JSX，在我们的例子中我们也将使用它们 ES6。因此，大多数浏览器不支持这两个模块的语法，因此我们必须通过该代码运行babel loaders，然后捆绑的输出就是我们要在index.html上显示的内容。
将捆绑文件添加到HTML的一种方法是插入script标签，并将捆绑文件的位置传递到脚本标签中。一个更好的方法是使用这个漂亮的包名叫做html-webpack-plugin。它为您提供所有HTML生成的简单方法。所有您需要的是标准的HTML骨架，只需几个配置即可实现脚本插入。接下来我们来做
＃Html-Webpack-Plugin
首先，我们将安装该插件。确保你的终端正在读你是根项目文件夹hello-world-react，然后输入以下命令：

使用webpack和Babel设置一个特别牛掰React环境

然后打开你的webpack.config.js并添加一些配置。

使用webpack和Babel设置一个特别牛掰React环境

配置非常简单。我们需要html-webpack-plugin然后创建一个新的实例，并将我们的骨架HTML设置为template。filename指的是插件将生成的HTML的名称。inject身体告诉插件将任何JavaScript添加到页面的底部，就在结束body标签之前。
＃运行它
我们几乎在终点线。让我们尝试运行我们的设置。我们只需要先做一件小事。打开你的package.json，让我们添加一个开始脚本。

使用webpack和Babel设置一个特别牛掰React环境

现在我们可以到我们的终端运行：

使用webpack和Babel设置一个特别牛掰React环境

打开你的浏览器 http://localhost:8080/。如果您检查您的控制台，您将看到我们的消息"Hey guys and ladies!!"。我们使用localhost：8080的原因是因为webpack-dev-server提供端口上的所有文件8080。webpack-dev-server当我们执行我们的启动脚本时，会运行注意事项。

使用webpack和Babel设置一个特别牛掰React环境

我们来添加一个简单的React Component，看看会发生什么。
＃反应，反应，反应
我会做一个非常基本的Hello World React组件。我们需要先安装React依赖项。

使用webpack和Babel设置一个特别牛掰React环境

接下来在client文件夹中我们可以添加一个文件夹，components并创建一个文件App.jsx。

使用webpack和Babel设置一个特别牛掰React环境

所以我们的文件结构如下所示：

使用webpack和Babel设置一个特别牛掰React环境

在React约定中命名组件文件是为了使用PascalCase这个文件名为什么我们的文件名以大写字母开头。扩展名可能是.jsx或者.js，我发现更好地明确地使用.jsx扩展名，我打算使用JSX语法的文件。
接下来我们来更新App.jsx文件：

使用webpack和Babel设置一个特别牛掰React环境

最后，我们从我们的起始文件中渲染我们的组件index.js。我们来替换一下console.log()：

使用webpack和Babel设置一个特别牛掰React环境

打开bash并启动我们的项目。确保您的终端读取您在项目根文件夹中。

使用webpack和Babel设置一个特别牛掰React环境

我擦它大爷的，成功啦！！！
＃结论
我们现在有一个工作的反应环境设置。我希望本教程阐述了配置真正做什么以及为什么需要它们。此外，如果设置在每个项目中都有任务执行，您可以随时分配我的回购站，并有一个基础从头开始。
请随时尝试使用不同的Webpack配置，并在评论部分发现的任何酷炫的东西。
最后，您可以并且应该尝试建立一个更深入的React项目后教程。干杯！！