搭建react项目的环境

ls0398

简












注册 登录









添加关注
作者 小黄人大侠 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~~







推荐拓展阅读





著作权归作者所有

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

￥ 打赏支持







喜欢
5

分享到微博 分享到微信

更多分享







×
喜欢的用户

• 秋夜已凉2016.09.12 13:42
  
• Remilia2016.09.12 02:20
  
• 摔不碎的玉2016.07.26 09:48
  
• BugFucker2016.06.04 13:29
  
• _yuchen震2016.04.18 08:59
  

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







　　_yuchen震

2 楼 · 2016.04.18 15:02　　请问一下为什么webpack. config. js里不用require ('path')
还有请问一下package. json里的watch里 /.dist/是什么作用的呢？？