reactjs学习一（环境搭配react+es6+webpack热部署）

reactjs学习一（环境搭配react+es6+webpack热部署）

 

reactjs学习一（环境搭配react+es6+webpack热部署）

reactjs今年在前端圈里很火，用了三四个月，感受确实很适合前端开发人员使用，值得深刻一下，因此这里记录一下我简单的学习过程，首先是react的环境，因为如今react的新版本已经很稳定了，因此推荐使用es6+webpack来搭建开发环境。

首先，安装nodejs，略过，安装gitbrach，略过，直接搜索到相对应软件的官网，下载最新正式版本的软件，而后就下一步下一步完成安装就能够了，很简单的过程，可是不容忽略，若有问题，能够问我。

而后就是安装webpack和一些依赖组件，便于打包，好比，在你的项目文件夹里执行

1

npm init

而后就是一直回车，新建一个 package.json 的文件，而后添加以下的代码进去：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

"devDependencies" : {    "babel-core" :  "^6.7.7" ,    "babel-loader" :  "^6.2.4" ,    "babel-preset-es2015" :  "^6.6.0" ,    "babel-preset-react" :  "^6.5.0" ,    "component-ajax" :  "forbeslindesay/ajax" ,    "css-loader" :  "^0.23.1" ,    "extract-text-webpack-plugin" :  "^1.0.1" ,    "file-loader" :  "^0.8.5" ,    "html-loader" :  "^0.4.3" ,    "html-webpack-plugin" :  "^2.16.1" ,    "moment" :  "^2.13.0" ,    "node-sass" :  "^3.5.3" ,    "react" :  "^15.0.1" ,    "react-cookie" :  "^0.4.6" ,    "react-dom" :  "^15.0.1" ,    "react-helmet" :  "^3.1.0" ,    "react-router" :  "^2.4.0" ,    "sass-loader" :  "^3.2.0" ,    "style-loader" :  "^0.13.1" ,    "url-loader" :  "^0.5.7" ,    "webpack" :  "^1.13.0" ,    "webpack-dev-server" :  "^1.14.1" }

有些不是必须的，但建议都加上，以防后面仍是会用到，再执行 npm install  安装这些依赖到本地，控制台测试下webpack是否安装成功：

1	webpack -v

若是报错了，能够尝试把webpack安装成全局的

1	npm install -g webpack

接下来，就是新建一个  webpack.config.js  的配置文件了，而后粘贴以下的代码进去.

  View Code

代码有点多，但咱们能够尝试的去理解他，由于webpack跟gruntjs有点相似，就是全是配置项，因此更多的须要去参考webpack的api来配置。反正我是看晕了，因此我不建议初学者一直纠结于这个配置，仍是来看个人配置吧，这里使用到了 process.env.NODE_ENV  这个环境变量来做为webpack的参数，方便我打出不一样项目的包，再根据这个特色和  modulesDirectories 的做用，我能够打包的时候指定不一样的js文件夹，这有什么用呢，就是说，个人参数（也就是NODE_ENV  ）是production的时候，js默认的目录是

 ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"];

就是我在代码里import的时候，能够省略掉../../../这种 ，他会先去这几个文件里去查找有没有这个js。其实跟个人这个项目有关，你正常的项目能够忽略掉这一块的配置。

而后我把公用的几个文件打到了一个 base.js 里，

vendor:  ["react", "react-dom", 'whatwg-fetch', 'react-router']

new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin

这里还用到了一个 template.html ,这个是基于这个html模板新建一个打包后的html引用，为何不直接用index.html这个呢，主要是要把Index.html这个留热部署，template会加入js的hash文件引用，防止缓存致使的一些问题。

到这里webpack就算配置完成了，能够使用以下方法：

webpack -w //监听打包
webpack -p //压缩打包

既然有了监听打包，为何还要热部署呢，由于监听打包是会生成文件的，并且速度上也会有影响，接着，咱们建立server.js文件

config.entry.app.unshift("webpack-dev-server/client?http://localhost:8080/");
}
var compiler = webpack(config);
var server = new WebpackDevServer(compiler, {

});
    server.listen(8080);

代码比较少，就是它会建立一个端口号为8080的http服务，并且是自动刷新页面，自带reload装逼技能。打开 http://localhost:8080/  查看是否可以打开！若是没有打开多是由于你尚未启动服务。

而后在index.html里加入以下代码

<div id="app"></div>
    <script src="http://localhost:8080/webpack-dev-server.js"></script>
    <script src="base.js"></script>
    <script src="app.js"></script>

这样基本上一个环境就算搭完了，而后使用 npm start 启动热部署。修改App.jsx里的代码，浏览器就会自动刷新为最新结果。并且本地没有生成打包文件，很方便。