做者小黄人大侠 2016.03.25 17:27*

写了3090字，被7人关注，得到了5个喜欢

搭建Amazeui+react+webpack+webstorm开发环境

字数2549 阅读3292 评论25 喜欢5

来段广告

你有没有碰见过垂直居中的问题？有没有据说过flex弹性布局？没听过的赶忙点了解Flex布局，看看flex布局是有多么强大！！！还在发愁flexbox布局不兼容最新的浏览器？点击兼容IE9+、UCBroswer的FlexLayout，获取兼容性的flexlayout react组件。javascript

源起

最近在学习Amazeui-react的开发，发现react着实是一个好东西，可是蛋疼的是webpack这个东西好难配置，稍不注意就会致使自动编译失败，会出现一堆的问题，下面就请跟我一块儿从零开始学习React+webpack配置，而且如何在webstorm中很好的运用它们。php

准备

一、下载webstorm11和nodejs。
下载太慢？直接百度云打包分享吧~~windows mac osxcss

开始

因为个人电脑的MacBook不是windows，所以可能安装和操做过程会有略微差别，可是差别不大，下面操做基本通用，不通用的我会指明。或者下面留言便可。html

首先，肯定你已经了解了react是干什么的，对react还不了解的请移步这里：react快速入门，我大致总结下吧：你就直接把react理解成可以用js实现web前端的组件化开发的一个框架就行了，它经过虚拟DOM来简化DOM操做提高性能，同时更好的实现模块化封装。再深了也不必说了。
其次，你还得知道webpack是干什么的，对webpack不了解的请移步这里：webpack官网。这个网站我没有发现偏官方的中文站点，可是CSDN上应该有不少相关的教程。webpack是一个构建工具，可以把全部的静态资源进行编译打包，好比.js、.css、.png、.less等等吧，反正只要是静态的，不是什么php、jsp之类的动态网站文件都能打包。经过它统一管理资源和模块。
再次，你还得知道点nodejs的知识，这个网站nodejs中文教程会告诉你nodejs干什么用，都有哪些api。nodejs是一个在服务器端的高性能javascript框架，可以快速处理高并发的请求。它主要用的就是回调原理，经过它提供的api能够实现一些web请求处理。其中，nodejs包含了一个npm，全称是node package manager，说白了就是node项目的包管理器，经过npm命令，咱们可使用成千上万的javascript框架。
最后，就是你得会用webstorm了。这个被称为javascript开发神器IDE，可以大大提高你开发web前端的效率。
综上，我以为能进入这篇博客的人想必确定早就知道以上几个工具是干什么用的了，不然还进来干嘛？串门啊？

入门

安装完毕上述几个工具以后，请打开你的命令行工具：windows 按下Windows符号键+R，输入cmd，会弹出命令行工具；mac直接在Launchpad中查找终端便可，Linux跟mac没啥区别，本身找终端去，在下面咱们姑且统一称之为命令行。
首先在命令行中输入：npm -v ，看看是否有版本号出现。若是出现了，证实你的nodejs安装成功了，不须要配置环境变量。若是没出现，那么你还得把环境变量配置一下。不过nodejs默认是给你配置好环境变量的。
配置npm的代理地址：（因为伟大的墙的缘由，会致使下载包很慢很慢~~~）
```
npm config set registry https://registry.npm.taobao.org
```
下面进入正轨了啊！！！提神！注意！看这，看这~~
启动webstorm，初次使用的话会让你导入之前的配置。若是是之前有配置文件就导入，没有就选择初次使用那一项。而后选择，create new project，创建一个新的工程。工程名就叫作：react_webpack_test吧。
点击OK，进入界面。而后打开webstorm的首选项设置（windows是File-settings），在Languages & Frameworks的JavaScript一栏选择JSX Harmony，点击OK。

从新打开命令行，依次输入

sudo npm install webpack webpack-dev-server babel -g sudo npm install react react-dom babel-loader less-loader css-loader style-loader url-loader file-loader babel-preset-es2015 babel-preset-react --save-dev

安装结果会显示一些WARN，无视！可是千万别有Error。

第一条命令是全局安装，模块会安装在/usr/local/,注意全局安装在mac/linux系统须要sudo而后输入密码，而windows不须要sudo哦~~第二条会安装在~/node_modules/下面。

参数解释：
-g：容许包全局使用
--save-dev:将依赖信息写入package.json的devdependencies。
安装的每一个组件解释：
babel：能将es6语法解析成es5（什么是es？？ECMAScript*6*入门本身看去，js是它的子集，说白了就是最新的javascript语法），之前是使用jsx-loader来解析着，如今直接用babel替代就好了。
babel-preset-es2015和babel-preset-react：让babel支持es2015语法和jsx语法的两个预设值。
webpack：这个还用说吗？
react-dom：依赖于react，如今都是经过ReactDOM.render()方法来渲染而不是React.render(),facebook官方已经说了。
webpack-dev-server：webpack开发服务器，帮助开发者实时监控webpack项目的文件更改并反映到浏览器上。这样你就能实时地进行预览啦~
babel-loader css-loader babel-loader style-loader url-loader file-loader：几种webpack须要用到的加载器，方便解析css、es6/jsx、和其余静态文件。
小提示：
全局安装支持直接在命令行中启用安装包的命令，例如：你安装了webpack，那么在命令行输入webpack就会出现相应执行，可是非全局不支持使用这个命令的哦。前端

接下来，再打开webstorm（最好这两个工具你都别关~）。在刚才那个react_webpack_test的工程中建立一个文件，文件名为webpack.config.js，而后在里边写上下面的代码：

var webpack=require('webpack'); var commonsPlugin=new webpack.optimize.CommonsChunkPlugin('common.js'); module.exports={ entry:{index:'./src/js/entry.js'}, output:{ path:'dist', filename:'bundle.js' }, module:{ loaders:[ { test:/\.css$/, loader:'style-loader!css-loader' }, { test:/\.jsx?$/, loader:'babel', exclude: /node_modules/, query:{ presets:['es2015','react'] } }, { test:/\.(png|jpg)$/, loader:'url-loader?limit=8192' }, { test:/\.less$/, loader:'style-loader!css-loader!less-loader' }, { test: /\.woff(2)?(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "url-loader?limit=10000&mimetype=application/font-woff" }, { test: /\.(ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/, loader: "file-loader" } ], plugins:[ commonsPlugin ] }, resolve:{ root:'', extensions:['','.js','.json','.less'], alias:{ AppStore:'js/stores/AppStores.js' } } }

而后在当前工程目录建立一个src文件夹，在src里面建立一个js文件夹，在js文件夹中新建一个entry.js文件，文件内容以下：

var React=require('react'); var ReactDOM=require('react-dom'); ReactDOM.render(<div>Hello world!</div>, document.getElementById("test"));

接下来再在当前工程目录中新建一个dist文件夹，dist文件夹中新建一个index.html文件。内容以下：

<html> <meta charset="utf-8"> <title>React webpack test</title> </head> <body> <div id="test"></div> </div> <script type="text/javascript" src="./bundle.js" charset="utf-8"></script> </body> </html>

最后一步，最后一步了哦~~加入package.json文件，使之成为一个能够用npm命令执行的工程。

{
"name": "react_webpack_test", "version": "1.0.0", "description": "just webpack and react hello world project!", "scripts": { "build": "webpack --progress --profile --colors", "watch": "webpack-dev-server --port 63340 --content-base ./dist/", "test": "echo \"Error: no test specified\" && exit 1" } }

其中最重要的是script标签。
接下来咱们打开webstorm的Terminal功能（在IDE底部）,在里面输入

npm run build

而后，在你的Terminal里面会显示以下的东东

> react_webpack_test@1.0.0 build /Users/你的工程所在目录/react_webpack_test > webpack \--progress \--profile \--color 2m0ms op1ms optimiz12ms emit Hash: 292766b53fb3969afd55 Version: webpack 1.12.14 Time: 5109ms Asset Size Chunks Chunk Names bundle.js 676 kB 0 [emitted] index \+ 159 hidden modules

若是里面出现了红色的Error那么就说明你的工程配置还有一些问题，若是OK的话，打开浏览器，在里面运行你的dist/index.html文件，看看是否有：hello world！输出

实时调试你的代码~
在webstorm的Terminal中输入npm run watch，而后会在里面输出一堆日志，日志中不能出现红色的Error，同时会输出下面两句：
```
http://localhost:63340/webpack-dev-server/ 省略这部分…… webpack: bundle is now VALID.
```
输入：http://localhost:63340/webpack-dev-server/，应该就能够看到你想要的结果，结果以下：
插入图片哦
这个就是用来充数的，光棍节快乐！！

进阶

喝杯茶~
……
到了这能够说你的项目就已经完成了，若是你想跟我同样使用Amazeui-react组件，那么就继续跟我这样继续下去吧~java

安装Amazeui-react

npm install amazeui amazeui-react --save-dev

修改./src/js/entry.js文件，替换成如下代码：

var React=require('react'); var ReactDOM=require('react-dom'); var AMUI=require('amazeui/dist/css/amazeui.min.css'); var AMUIReact = require('amazeui-react'); var button=( <AMUIReact.Button>这是一个按钮</AMUIReact.Button> ); ReactDOM.render(button,document.getElementById("test"));

Ctrl+S，保存当前代码，查看你的浏览器http://localhost:63340/webpack-dev-server/页面有没有变化~~

下面是个人测试工程连接，本身下载下来拿去用吧.
react_webpack_testnode

整整连写带测试折腾了我一下午，为了保证每一处写的没有疏漏，我现卸载掉我电脑上的webstorm和nodejs~~react

25条评论（按时间正序· 按时间倒序· 按喜欢排序）添加新评论

_yuchen震webpack

2 楼 · 2016.04.18 15:02

请问一下为何webpack. config. js里不用require ('path')
还有请问一下package. json里的watch里 /.dist/是什么做用的呢？？😃😃

喜欢(0) 回复

小黄人大侠： @_yuchen震您好，webpack.config.js 里面用到了require，开头这句，var webpack=require('webpack');全部的nodejs依赖若是须要引用外部类，require是不可避免的。watch里的./dist/指的是webpack-dev-server 监听的目录，一直监听当前位置下地dist目录，能够保证当dist目录下有文件改动时实时的从浏览器中可以刷新出来，具体webpack-dev-server的用法请查看http://webpack.github.io/docs/webpack-dev-server.html，他对于webpack并非必须的，只是辅助开发实时查看预览效果而已。

回复 2016.04.19 10:24

_yuchen震： @小黄人大侠好的谢谢博主回答~~ 请问还有木有AmazeUI+react+webpack的项目例程呢，但愿能像博主学习一下

回复 2016.04.19 11:13

_yuchen震：能请问下AMUIReact的模态框怎样写吗？
>var modal = <AMUIReact.Modal title="Amaze UI Modal">这一个 Modal 窗口。</AMUIReact.Modal>;

module.exports =React.createClass ({
render: function() {
return (
<AMUIReact.ModalTrigger modal={modal}>
<AMUIReact.Button amStyle='primary'>打开 Modal 窗口</AMUIReact.Button>
</AMUIReact.ModalTrigger>
);
}

});

这样写只能展现按钮，没有模态框0 0

回复 2016.04.20 13:20

hstonel

3 楼 · 2016.05.17 17:58

学习，谢谢

霓源阁

4 楼 · 2016.05.21 20:57

@小黄人大侠博主，我是后端转前端的，我用的一直是Intellij IDEA，而后我看了一些前端的教程，好多都是自动化的东西 yeomen，grunt，还要webpack等等，可是我以为Intellij IDEA或者webstorm貌似都能替代他们吗？我一直很疑惑，请博主帮忙解答。
还要博主写的文章我很喜欢，方便留个联系方式吗 qq或者邮箱？

小黄人大侠： @霓源阁不能说代替，就像nodejs不能期望彻底代替java、php同样，咱们必须知道这些技术擅长的领域，只须要取其所长便可。并且我以为你可能说的是否是这些开发工具替代你之前用的开发工具？开发工具永远是朝着更加智能，功能强大和方便发展，多学习新的东西会不断提升本身的开发效率~

回复 2016.05.22 21:19

708d0f26b105

5 楼 · 2016.05.24 10:28

webstorm是自动保存的可是自动保存那react的自动刷新就不能用

小黄人大侠： @708d0f26b105 你能够把自动保存功能关闭，设置成ctrl+S快捷键手动保存。

回复 2016.05.24 15:07

小黄人大侠： @708d0f26b105 我这个好像发错了，react自动刷新是使用的webpack-dev-server来测试的~

回复 2016.06.17 22:00

aafff584fec2：设置成手动保存之后，再命令行输入npm run watch 只能检测一次，切换界面后就不起做用了

回复 2016.07.19 10:09

JYoung