如何设置React，webpack 4和Babel 7（2018 最新教程）

感谢原文链接 https://www.valentinog.com/blog/react-webpack-babel/

源码可以查看github地址 https://github.com/rayyuan90/webpack-with-react-

如何建立React，的WebPack和Babel：你将学到什么

如何建立React，的WebPack和Babel：建立项目

如何建立React，的WebPack和Babel：设立的WebPack

如何建立React，的WebPack和Babel：建立Babel

如何建立React，的WebPack和Babel：写作React的组分

如何建立React，的WebPack和Babel：在HTML的WebPack插件

如何建立React，的WebPack和Babel：的WebPack开发服务器

如何建立React，的WebPack和Babel：结束了

如何建立React，的WebPack和Babel：你将学到什么

如何安装和配置的WebPack

如何安装和配置通天塔

如何安装阵营

如何创建两个按照集装箱/表象原则React的组分

如何将得到的束到HTML页面

如何安装和配置的WebPack开发服务器

应对不限于完全成熟的SPA。这是可能的库集成到任何现有的网站。

React可以在任何一个CDN或一个模块捆绑拉。

对于大多数我的项目我使用的WebPack：结合React，是的WebPack容易，因为一件轻而易举的事。

你可以这样做，有一个工作的WebPack 4 -在几分钟内做出React的环境：这里是给你一个简短的教程。

如何建立 react，WebPack和Babel：建立项目

通过创建项目的目录开始：mkdir webpack-react-tutorial && cd webpack-react-tutorial

用于固定代码创建一个最小的目录结构：mkdir -p src

Inizialize通过运行项目：npm init -y

开始吧。

如何建立React，WebPack和Babel的项目

WebPack是现代Web发展的支柱之一。这是一个令人难以置信的强大的工具。

如何使用的WebPack是与React工作的根本。

WebPack摄取原React的组分用于生产JavaScript代码（几乎）所有浏览器都能理解。

让我们通过运行安装：npm i webpack --save-dev

您还需要 WebPack-CLI 运行npm~命令：npm i webpack-cli --save-dev

接下来在添加 webpack命令到 package.json：

"scripts": {

"build": "webpack --mode production"

}

在这一点上，没有必要定义配置文件的WebPack。

年长的WebPack的版本并自动寻找的配置文件。

以来第4版已不再的情况下：您可以开始开发straigh了。

在下一节中，我们将安装和transpiling我们的代码配置通天塔。

如何建立React，的WebPack和Babel：建立Babel

React的组分大多以JavaScript写成ES6。

因为他们去那里是需要某种变换的浏览器不能理解React的组分。

的WebPack不知道如何进行转型，但它有装载机的概念：认为他们作为变压器。

一的WebPack装载机需要的东西作为输入，并产生别的东西作为输出。

巴贝尔装载机Babel装载机是的WebPack装载机负责获取在ES6代码，使之理解的首选浏览器。

ObsviuslyBabel-loaderbabel-loadermakes使用通天。而Babel必须配置为使用一串预设的：

Babel preset ENV 编译的Javascript代码ES6下降到ES5（请注意，Babel预设-ES2015现在已经过时）

Babel preset React 编译JSX和其他的东西下来的Javascript

让我们把与依赖关系 dependencies 加入项目执行：npm i @babel/core babel-loader @babel/preset-env @babel/preset-react --save-dev

不要忘了配置Babel！创建一个名为.babelrc 文件在项目文件夹中：

{

"presets": ["@babel/preset-env", "@babel/preset-react"]

}

在这一点上我们就可以界定一个最小的WebPack配置。

创建一个名为webpack.config.js 文件填补像以下文件：

module.exports = {

module: {

rules: [

{

test: /\.js$/,

exclude: /node_modules/,

use: {

loader: "babel-loader"

}

]

}

};

配置是相当简单的。

对于具有.js.jsextension的WebPack管道通过通天塔- loaderbabel加载器的代码转化器ES6下降到ES5每个文件。

有了这个地方，我们已经准备好写我们的React的组分。

让我们头以上下一节。

如何建立React，的WebPack和Babel：写作React的组分

我喜欢写我按照集装箱/表象原则React的组分。

我建议考虑看看容器组件和聪明和愚蠢的组件由丹·阿布拉莫夫学习更多。

总之，集装箱/表象原则是React的组分的模式。

该容器组件是携带所有的逻辑的一个：用于处理状态的变化，内部组件状态等的功能。

在对比度的表象的部件仅仅是用于显示所期望的标记。表象组分通常是纯箭头功能和从所述容器部件作为接收数据道具。

你会看到他们是怎么看起来像下面的例子。

对于这个职位的范围，我想建立一个超级简单的形式做出React具有单个文本输入。

触摸之前的任何代码，让我们在运行：

npm i react react-dom --save-dev

然后创建组织的组件最小目录结构：

mkdir -p src/js/components/{container,presentational}

接下来，让我们创建一个容器组件：

有它自己的状态

渲染HTML表单

创建组件到SRC / JS /组件/容器/ SRC / JS /组件/容器/：

触摸的src / JS /组件/容器/ FormContainer.js

触摸的src /

JS /组件/容器/ FormContainer.js

触摸的src / JS /组件/容器/ FormContainer.js

该组件将如下所示：

进口反应，{元器件}从“反应”;

从 “反应-DOM” 进口ReactDOM;

类FormContainer延伸元器件{

构造（）{

超（）;

this.state = {

标题：“”

};

}

渲染（）{

返回（

<表格ID =“文章形式”>

）;

}

出口默认FormContainer;

进口React，{元器件}从“React”;

进口 ReactDOM从“React-DOM”;

类 FormContainer扩展组件{

构造（）{

超（）;

this.state= {

标题：“”

};

}

渲染（）{

返回（

<表格ID =“文章形式”>

</形式>

）;

}

出口默认FormContainer;

进口反应，{元器件}从“反应”;

从 “反应-DOM” 进口ReactDOM;

类FormContainer延伸元器件{

构造（）{

超（）;

this.state = {

标题：“”

};

}

渲染（）{

返回（

<表格ID =“文章形式”>

）;

}

出口默认FormContainer;

该组件什么也不做，在这一刻。它只是结束了子组件的骨架。

实际上，如果没有它的表象子容器组件几乎是无用的。

让我们来解决这个问题。

创建的src / JS /组件/表象/ src目录中的新组件/ JS /组件/表象/：

触摸的src / JS /组件/表象/ Input.js

触摸的src /

JS /组件/表象/ Input.js

触摸的src / JS /组件/表象/ Input.js

我们的第一个表象作出React组件将是一个文字输入。我们知道，一个HTML输入采用以下属性：

类型

类

值

需要

所有这些都将成为道具，容器组件将传承给其表象的孩子。

由于输入拥有自己的状态，我们必须确保阵营将照顾它。一个HTML输入变为在阵营控制的部件。

说起道具，这是很好的做法与记录您的React的组分道具类型。

通过运行安装包：

NPM我丙种--save-dev的

回React，我们的表象成分为HTML的输入将如下所示：

进口从“反应”反应;

从“道具类型”进口PropTypes;

常量输入=（{标签，文本，类型，识别符，值，handleChange}）=>（

<标签htmlFor = {标签}> {文本} </标签>

<输入

类型= {}类型

类名=“形式控制”

ID = {ID}

值= {}值

的onChange = {handleChange}

需要

）;

Input.propTypes = {

标签：PropTypes.string.isRequired，

文本：PropTypes.string.isRequired，

类型：PropTypes.string.isRequired，

ID：PropTypes.string.isRequired，

值：PropTypes.string.isRequired，

handleChange：PropTypes.func.isRequired

};

出口默认输入;

进口从“React”React;

进口从“道具类型” PropTypes;

常量输入=（{标签，文本，类型，识别符，值，handleChange}）=>（

<格的className =“形式的基团”>

<标签htmlFor = {标签}> {文本} </标签>

<输入

类型= {}类型

类名=“形式控制”

ID = {ID}

值= {}值

的onChange = {handleChange}

需要

</DIV>

）;

Input.propTypes = {

标签：PropTypes.string.isRequired，

文本：PropTypes.string.isRequired，

类型：PropTypes.string.isRequired，

ID：PropTypes.string.isRequired，

值：PropTypes.string.isRequired，

handleChange：PropTypes.func.isRequired

};

出口默认的输入;

进口从“反应”反应;

从“道具类型”进口PropTypes;

常量输入=（{标签，文本，类型，识别符，值，handleChange}）=>（

<标签htmlFor = {标签}> {文本} </标签>

<输入

类型= {}类型

类名=“形式控制”

ID = {ID}

值= {}值

的onChange = {handleChange}

需要

）;

Input.propTypes = {

标签：PropTypes.string.isRequired，

文本：PropTypes.string.isRequired，

类型：PropTypes.string.isRequired，

ID：PropTypes.string.isRequired，

值：PropTypes.string.isRequired，

handleChange：PropTypes.func.isRequired

};

出口默认输入;

在这一点上，我们就可以更新我们的容器组件，包括文本输入：

进口反应，{元器件}从“反应”;

从 “反应-DOM” 进口ReactDOM;

从“../presentational/Input”进口输入;

类FormContainer延伸元器件{

构造（）{

超（）;

this.state = {

seo_title：“”

};

this.handleChange = this.handleChange.bind（本）;

}

handleChange（事件）{

this.setState（{[event.target.id]：event.target.value}）;

}

渲染（）{

常量{seo_title} = this.state;

返回（

<表格ID =“文章形式”>

<输入

文字=“搜索引擎优化称号”

标签= “seo_title”

类型=“文本”

ID = “seo_title”

值= {seo_title}

handleChange = {this.handleChange}

）;

}

出口默认FormContainer;

进口React，{元器件}从“React”;

进口 ReactDOM从“React-DOM”;

进口从“../presentational/Input”输入;

类 FormContainer扩展组件{

构造（）{

超（）;

this.state= {

seo_title：“”

};

this.handleChange =

this.handleChange.bind（本）;

}

handleChange（事件）{

this.setState（{ [event.target.id]：event.target.value}）;

}

渲染（）{

常量{seo_title} = this.state;

返回（

<表格ID =“文章形式”>

<输入

文字=“搜索引擎优化称号”

标签= “seo_title”

类型=“文本”

ID = “seo_title”

值= {seo_title}

handleChange = {this.handleChange}

</形式>

）;

}

出口默认FormContainer;

进口反应，{元器件}从“反应”;

从 “反应-DOM” 进口ReactDOM;

从“../presentational/Input”进口输入;

类FormContainer延伸元器件{

构造（）{

超（）;

this.state = {

seo_title：“”

};

this.handleChange = this.handleChange.bind（本）;

}

handleChange（事件）{

this.setState（{[event.target.id]：event.target.value}）;

}

渲染（）{

常量{seo_title} = this.state;

返回（

<表格ID =“文章形式”>

<输入

文字=“搜索引擎优化称号”

标签= “seo_title”

类型=“文本”

ID = “seo_title”

值= {seo_title}

handleChange = {this.handleChange}

）;

}

出口默认FormContainer;

时间连线的事情了。

预计的WebPack切入点是./src/index.js./src/index.js

创建./src/index.js./src/index.jsand放置一个import指令到它需要容器组件：

进口FormContainer从“./js/components/container/FormContainer”;

进口 FormContainer从“./js/components/container/FormContainer”;

进口FormContainer从“./js/components/container/FormContainer”;

有了这个地方，我们已经准备好运行创造我们的包：

NPM运行构建

给的WebPack第二，看包来的生活！

束将被放置到

./dist/main.js

现在，让我们把我们做出React的实验生活由包括捆绑到HTML页面。

如何建立React，的WebPack和Babel：在HTML的WebPack插件

为了显示我们的形式作出React，我们必须告诉的WebPack生成一个HTML页面。将所得的束将放在一个<SCRIPT> </

SCRIPT> <SCRIPT> </ SCRIPT>标记内。

Webpacks需要处理HTML另外两个组成部分：HTML-的WebPack-插件和HTML装载机。

添加依赖与：

NPM我的HTML的WebPack-插件HTML装载机--save-dev的

然后更新的WebPack配置：

常量HtmlWebPackPlugin =需要（ “HTML-的WebPack-插件”）;

module.exports = {

模块：{

规则：

{

测试：/\.js$/，

排除：/ node_modules /，

使用：{

装载机：“巴别塔装载机”

}

}，

{

测试：/\.html$/，

使用：[

{

装载机：“HTML装载机”

}

]

}

]

}，

插件：

新HtmlWebPackPlugin（{

模板：“./src/index.html”

文件名：“./index.html”

}）

]

};

常量 HtmlWebPackPlugin =需要（ “HTML-的WebPack-插件”）;

module.exports = {

模块：{

规则：

{

测试：/\.js$/，

排除：/

node_modules /，

使用：{

装载机：“巴别塔装载机”

}

}，

{

测试：/\.html$/，

使用：[

{

装载机：“HTML装载机”

}

]

}

]

}，

插件：

新 HtmlWebPackPlugin（{

模板：“./src/index.html”

文件名：“./index.html”

}）

]

};

常量HtmlWebPackPlugin =需要（ “HTML-的WebPack-插件”）;

module.exports = {

模块：{

规则：

{

测试：/\.js$/，

排除：/ node_modules /，

使用：{

装载机：“巴别塔装载机”

}

}，

{

测试：/\.html$/，

使用：[

{

装载机：“HTML装载机”

}

]

}

]

}，

插件：

新HtmlWebPackPlugin（{

模板：“./src/index.html”

文件名：“./index.html”

}）

]

};

接下来reate一个HTML文件到./src/index.html./src/index.html(feel自由使用你喜欢的任何CSS库）：

<！DOCTYPE HTML>

<HTML语言= “EN”>

<元的charset = “UTF-8”>

<链路的rel = “样式表的” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>

如何设置反应，的WebPack，和巴别</ TITLE>

创建一个新的文章

<！ - 表- >

<！DOCTYPE HTML>

<HEAD>

<元字符集= “UTF-8”>

<链接的rel = “样式表的” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>

<TITLE>如何建立React，的WebPack和Babel

</ HEAD>

<BODY>

<P>创建一个新的文章

<！ - 表 -

</ DIV>

</ BODY>

</ HTML>

<！DOCTYPE HTML>

<HTML语言= “EN”>

<元的charset = “UTF-8”>

<链路的rel = “样式表的” href = “https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css”>

如何设置反应，的WebPack，和巴别</ TITLE>

创建一个新的文章

<！ - 表- >

最后一件事是失踪了！我们要告诉我们的阵营组件本身挂钩到<DIV ID = “创建-文章形式”> </ DIV> <DIV ID = “创建-文章形式”> </ div>上。

打开./src/js/components/container/FormContainer.js./src/js/components/container/FormContainer.jsand添加以下的文件的底部：

常量包装=的document.getElementById（ “创建-物品形式”）;

包装器？ReactDOM.render（<FormContainer />，包装器）：假;

常量包装=的document.getElementById（ “创建-物品形式”）;

包装器？ReactDOM.render（<FormContainer />，包装器）：假;

常量包装=的document.getElementById（ “创建-物品形式”）;

包装器？ReactDOM.render（<FormContainer />，包装器）：假;

关闭并保存文件。

现在再次运行编译：

NPM运行构建

看一看在./dist./distfolder。你应该可以看到生成的HTML。

随着的WebPack有没有需要包括在HTML文件中你的Javascript：捆绑将被自动注入到该页面。

打开./dist/index.html./dist/index.htmlin您的浏览器：你应该看到的作出React形式。

如何建立React，的WebPack和Babel：的WebPack开发服务器

你不想打字NPM运行buildnpm运行更改文件buildevery时间。

只需3配置的线路有一个开发服务器运行起来。

一旦配置的WebPack将推出浏览器中您的应用程序。

此外，每次保存修改的WebPack WEV服务器后的文件将自动地刷新浏览器窗口。

要设置的WebPack dev的服务器安装软件包：

NPM我的WebPack-DEV-服务器--save-dev的

打开package.jsonpackage.jsonto加入启动脚本：

“脚本”：{

“开始”： “的WebPack-DEV-服务器--open --mode发展”，

“建”： “的WebPack”

}

“脚本”：{

“开始”： “的WebPack-DEV-服务器--open --mode发展”，

“建立”： “的WebPack”

}

“脚本”：{

“开始”： “的WebPack-DEV-服务器--open --mode发展”，

“建”： “的WebPack”

}

保存并关闭文件。

现在，通过运行：

NPM启动

你应该看到的WebPack启动浏览器内你的应用程序。

的WebPack开发服务器将自动地在每次修改文件刷新窗口！

如何建立React，的WebPack和Babel：结束了

React大多用于创建单页的应用程序。但它也可以装到任何网站。

通过组合的WebPack和巴别能够一堆React的组分变换成适合于被分发束。

在上述指南中，我们已经看到：

如何安装和配置的WebPack

如何安装和配置通天塔

如何安装阵营

如何创建两个按照集装箱/表象原则React的组分

如何将得到的束到HTML页面

如何安装和配置的WebPack开发服务器

截至去年底，你应该能够从头与React，以及的WebPackBabel开始。

为了更多地了解的WebPack退房的WebPack 4教程，从零到CONF生产模式。

谢谢阅读！

原文

教程：如何建立反应，4的WebPack和巴贝尔7（2018）

提供更好的翻译建议

如何设置React，webpack 4和Babel 7（2018 最新教程 ）

如何建立React，的WebPack和Babel：你将学到什么

如何建立React，WebPack和Babel的项目

如何建立React，的WebPack和Babel：建立Babel

如何建立React，的WebPack和Babel：写作React的组分

如何设置React，webpack 4和Babel 7（2018 最新教程）