感谢原文链接 https://www.valentinog.com/blog/react-webpack-babel/
源码 可以查看github地址 https://github.com/rayyuan90/webpack-with-react-
目录
如何建立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:你将学到什么
如何安装和配置的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输入采用以下属性:
类型
类
ID
值
需要
所有这些都将成为道具,容器组件将传承给其表象的孩子。
由于输入拥有自己的状态,我们必须确保阵营将照顾它。一个HTML输入变为在阵营控制的部件。
说起道具,这是很好的做法与记录您的React的组分道具类型。
通过运行安装包:
NPM我丙种--save-dev的
NPM我丙种--save-dev的
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运行构建
NPM运行构建
NPM运行构建
给的WebPack第二,看包来的生活!
束将被放置到
./dist/main.js
./dist/main.js
./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的
NPM我的HTML的WebPack-插件HTML装载机--save-dev的
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>
<HTML 郎= “EN”>
<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>
<DIV 类=“容器”>
<DIV 类= “行MT-5”>
<DIV 类= “COL-MD-4偏移-MD-1”>
<P>创建一个新的文章
<DIV ID = “创建-文章形式”>
<! - 表 -
>
</ DIV>
</ DIV>
</ DIV>
</ 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运行构建
NPM运行构建
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的
NPM我的WebPack-DEV-服务器--save-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启动
NPM启动
NPM启动
你应该看到的WebPack启动浏览器内你的应用程序。
的WebPack开发服务器将自动地在每次修改文件刷新窗口!
如何建立React,的WebPack和Babel:结束了
React大多用于创建单页的应用程序。但它也可以装到任何网站。
通过组合的WebPack和巴别能够一堆React的组分变换成适合于被分发束。
在上述指南中,我们已经看到:
如何安装和配置的WebPack
如何安装和配置通天塔
如何安装阵营
如何创建两个按照集装箱/表象原则React的组分
如何将得到的束到HTML页面
如何安装和配置的WebPack开发服务器
截至去年底,你应该能够从头与React,以及的WebPackBabel开始。
为了更多地了解的WebPack退房的WebPack 4教程,从零到CONF生产模式。
谢谢阅读!
原文
教程:如何建立反应,4的WebPack和巴贝尔7(2018)
提供更好的翻译建议