搭建react项目的环境

作者小黄人大侠 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组件。

源起

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

准备

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

开始

由于我的电脑的MacBook不是windows，因此可能安装和操作过程会有略微差异，但是差异不大，下面操作基本通用，不通用的我会指明。或者下面留言即可。

首先，确定你已经了解了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组件，那么就继续跟我这样继续下去吧~

安装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_test

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

推荐拓展阅读

著作权归作者所有

如果觉得我的文章对您有用，请随意打赏。您的支持将鼓励我继续创作！

¥ 打赏支持

喜欢

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

_yuchen震

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

学习，谢谢

喜欢(0)回复

霓源阁

4 楼 · 2016.05.21 20:57

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

喜欢(0)回复

小黄人大侠： @霓源阁不能说代替，就像nodejs不能指望完全代替java、php一样，我们必须知道这些技术擅长的领域，只需要取其所长即可。而且我觉得你可能说的是不是这些开发工具替代你以前用的开发工具？开发工具永远是朝着更加智能，功能强大和方便发展，多学习新的东西会不断提高自己的开发效率~

回复2016.05.22 21:19