原文链接：https://www.robinwieruch.de/minimal-react-webpack-babel-setup/
本文对原文进行了粗略的翻译~~旨在帮助刚入门的新手迅速了解构建一个基于webpack打包的react项目。
Project setup 配置项目
1.首先使用下面的命令来创建一个项目：
mkdir minimal-react-boilerplate
cd minimal-react-boilerplate
npm init -y
npm init 会生成一个package.json文件，-y命令则是所有的选项都用默认选项.
2.创建一个分布式（？）文件夹，该文件夹用来为单页应用（SPA）服务，使得应用可以在浏览器环境或者外部服务器被访问到。该文件夹会包括两个文件：一个html和一个js，js会由webpack配置好的js资源来自动生成，你可以手动创建一个html文件作为应用的入口。
注释：这个html和js就是你程序发布的所有内容了。
html的内容如下所示：
<!DOCTYPE html>
<html>
<head>
<title>The Minimal React Webpack Babel Setup</title>
</head>
<body>
<div id="app"></div>
<script src="bundle.js"></script>
</body>
</html>
说明两点：
-
bundle.js会被webpack生成，
-
id=“app”会作为react根节点来找到入口的标识。
接下来要做的就是把所有的资源文件打包成一个bundle.js，创建一个根组件将id=“app”作为文件的入口
Webpack Setup 配置webpack
使用webpack来打包，为了能在localhost环境访问到，并在浏览器里开发，需要同时安装webpack-dev-server，才能启动服务器。
npm install --save-dev webpack webpack-dev-server
现在你应该有node_modules文件夹，这里你可以看到你安装的第三方依赖，因为使用了--save-dev，这些依赖会被写在package.json文件中。
接下来在package.json中配置webpack-dev-server的运行
"scripts":{
"start":"webpack-dev-server --progress --colors --hot --config ./webpack.config.js",
...
},
这个运行脚本定义了你需要使用一些基本的配置来使用webpack-dev-server,需要创建配置文件webpack.config.js
module.exports = {
entry: ['./src/index.js'],
output: {
path:__dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist'
}
};
简单的说这个配置文件做了三件事：
-
1.我们使用src/index.js来做为打包的入口文件
-
2.打包后的文件是bundle.js
-
3.bundle.js生成在dist文件夹下，dist文件夹被用来启动我们的app
我们的项目里还少了一个src/index.js文件，因为它是我们的entry文件么~remember
在src/index.js中输入
The Minimal React Webpack Babel Setup
现在你的项目结构是这样的
- dist
-- index.html
- node_modules
- src
-- index.js
- package.json
- webpack.config.js
接下来就可以运行你的webpack-dev-server了，
通过当前目录下（你项目所在的目录）启动命令行 ，运行项目
npm start
image.png
就可以看到项目已经运行成功了，这时候在浏览器中键入你的localhost地址，如图中，我的运行端口是8081；(一般情况是8080，当被占用时会往后增加)
http://localhost:8081就可以在浏览器的控制台console.log()中看到你写入的文字了~
现在你通过webpack来运行了你的项目，把你的入口文件src/index.js打包成了bundle.js，然后将它引入到了dist/index.html，最后你就可以在console.log中看到你想要的结果了。
虽然目前只有src/index.js被打包了，但是你肯定会在index.js中引入更多的js，这些都会被webpack自动打包到bundle.js中。赞不赞？
Hot Reloading 热加载
react-hot-loader是非常值得推荐给你的，它会大大缩短你开发到看到效果的时间，简单的说，热加载的作用就是当你修改了一部分源代码，这个变化会立刻表现在浏览器上，而无需通过你刷新整个页面。
在根目录安装
npm install --save-dev react-hot-loader
提示：在命令行，按control+c可以取消npm start的运行，然后安装完成后需要再次运行npm start
想要热加载生效，我们还需要在webpack.config.js这个配置文件增加一些配置。
module.exports = {
entry: [
'webpack-dev-server?http://localhost:8081', // 你的应该是8080
'webpack/hot/only-dev-server',
'./src/index.js',
],
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
}
同时在src/index.js文件里还需定义热加载是可以使用的并且需要被使用。
src/index.js文件的内容：
console.log('My Minimal React Webpack Babel Setup');
module.hot.accept();
重新跑一下npm start，webpack的配置文件修改了是需要重新启动的。
运行后你又可以在浏览器的控制台里看到console.log()的内容了，同时还能看到一些与热加载有关的打印，不用去看它们。先来试试我们的热加载好了没，当你修改你的console.log()内容后，保存，看看浏览器是不是自己更新了，恭喜~~
到这里webpack的基本配置已经好了，但是还少了一个重要的模块——Babel
Babel Setup 配置babel
Babel可以使你尽情的使用es6的语法，使用Babel你的代码会被编译成es5，这样的话所有的浏览器，可能只支持部分的es6，也可以支持你的代码。Babel甚至还允许你使用比es6还先进的语法下一代eses7
打开命令行，让我们赶紧使用吧
npm install --save-dev babel-core babel-loader babel-preset-es2015
此外你可能还想使用一些在试验阶段的es6特性（比如对象扩展符{...}），这些可以通过stages来激活。不用担心它的稳定性，因为已经被Facebook用来在create-react-app中使用了。
怎么使用stages?
npm install --save-dev babel-preset-stage-2
最后一步，鉴于你是要用react的，你需要多一些配置来把react的jsx文件转换成js文件，这是为了方便。
npm install --save-dev babel-preset-react
现在所有的node包都已经安装到位，你接下来还需修改一下package.json和webpack.config.js文件，这些变化包括你所有安装的包。
package.json中
...
"keywords": [],
"author": "",
"license": "ISC",
"babel": {
"presets": [
"es2015",
"react",
"stage-2"
]
},
"devDependencies": {
...
webpack.config.js中
module.exports = {
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/only-dev-server',
'./src/index.js'
],
module: {
loaders: [{
test: /\.jsx?$/,
exclude: /node_modules/,
loader: 'react-hot-loader!babel-loader'
}]
},
resolve: {
extensions: ['*', '.js', '.jsx']
},
output: {
path: __dirname + '/dist',
publicPath: '/',
filename: 'bundle.js'
},
devServer: {
contentBase: './dist',
hot: true
}
};
对module模块中的loaders是个数组，表示不同的加载器，test是要匹配的文件后缀为.jsx，exclude是把node_modules排除在外。具体内容本篇文件并未详述。
在此时运行npm start 将会报错，因为你的应用还不识别react。
因为我们马上就要进行第一个react组件的开发了，让我们来修复下~
React Setup 使用React
为了使用react，你还需要安装两个node包，react和react-dom，这两个安装完后npm start 也不会报错了
npm install --save react react-dom
然后在src/index.js中编写你的链接react的第一个组件吧
src/index.js中
import React from 'react';
import ReactDOM from 'react-dom';
const title = 'My Minimal React Webpack Babel Setup';
ReactDOM.render(
<div>{title}</div>,
document.getElementById('app')
);
module.hot.accept();
到今天，不得不说这篇文章已经过时了，因为react和各种node包的版本更新速度太快，这个项目已经跑不起来，如果非要跑起来，可以安装历史版本
npm install react-hot-loader@1.3.1 --save-dev
npm install react@15.3.0 --save-dev
npm install react-dom@15.0.2 --save-dev
所以从今天开始还是要多写博客，多总结，以后再回头看，自己应该有了长足的进步吧，以前写的文章该有多~~
到这里，打开浏览器应该就可以看到页面上输出了内容，而不是再在控制台上了
至此，一个迷你型的react项目就搭建完成了。
网友评论