reactjs学习一(环境搭配react+es6+webpack热部署)
reactjs学习一(环境搭配react+es6+webpack热部署)
本文的源码在这里下载 https://github.com/tianxiangbing/webpack-study 或者使用这个种子项目https://github.com/tianxiangbing/react-seed
reactjs今年在前端圈里很火,用了三四个月,感觉确实很适合前端开发人员使用,值得深入一下,所以这里记录一下我简单的学习过程,首先是react的环境,由于现在react的新版本已经很稳定了,所以推荐使用es6+webpack来搭建开发环境。
首先,安装nodejs,略过,安装gitbrach,略过,直接搜索到相对应软件的官网,下载最新正式版本的软件,然后就下一步下一步完成安装就可以了,很简单的过程,但是不容忽略,如有问题,可以问我。
然后就是安装webpack和一些依赖组件,便于打包,比如,在你的项目文件夹里执行
npm init
然后就是一直回车,新建一个 package.json 的文件,然后添加如下的代码进去:
"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是否安装成功:
webpack -v
如果报错了,可以尝试把webpack安装成全局的
npm install -g webpack
接下来,就是新建一个 webpack.config.js 的配置文件了,然后粘贴如下的代码进去.
var path = require("path");
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
console.log("+++++++++++" + process.env.NODE_ENV + "***********")
var TEST = process.env.NODE_ENV == "test" || process.env.NODE_ENV == "dev";
console.log(TEST)
var filename = TEST ? "[name]" : "[chunkhash:8].[name]";
console.log(filename)
var extractCSS = new ExtractTextPlugin('' + filename + '.css');
//var ignoreFiles = new webpack.IgnorePlugin(new RegExp("^(jquery|react|react-dom)$")); //动态创建html
var HtmlWebpackPlugin = require('html-webpack-plugin');
var htmlPlugin = new HtmlWebpackPlugin({
title: "签到",
filename: '../index.html',
template: "template.html"
});
var modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/cyconfig"];
if (process.env.NODE_ENV == "test") {
modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/config", "app/cyconfig"];
}
var config = {
entry: {
app: ["./app/app.jsx"],
vendor: ["react", "react-dom", 'whatwg-fetch', 'react-router']
},
output: {
path: path.resolve(__dirname, "caiyun/build"),
//publicPath: "/data/assets/build/",
publicPath: "",
filename: filename + ".js"
},
resolve: {
modulesDirectories: modulesDirectories,
extensions: ['', '.js', '.jsx', 'css']
},
module: {
loaders: [{
jsx: /\.(js|jsx)$/,
exclude: /(node_modules|bower_components)/,
loader: 'babel',
query: {
presets: ['es2015', 'react']
}
}, {
test: /\.(eot|woff|ttf|svg)/,
loader: 'file-loader?name=[name].[ext]'
}, {
test: /\.scss$/,
exclude: /(node_modules|bower_components)/,
loader: extractCSS.extract('style-loader', 'css?!sass?includePaths[]=' + path.resolve(__dirname, 'app/scss'))
}, {
test: /\.css$/,
loader: extractCSS.extract('style-loader', 'css?includePaths[]=' + path.resolve(__dirname, 'app/scss'))
}, {
test: /\.html$/,
loader: "html-loader"
}, {
test: /\.png$/,
loader: "file-loader?name=[hash:8].[name].[ext]"
}]
},
plugins: [
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
}),
extractCSS,
//ignoreFiles
new webpack.optimize.CommonsChunkPlugin("vendor", "base.js"), htmlPlugin
]
};
if (process.env.NODE_ENV == "test" || process.env.NODE_ENV == "dev") {
config.devtool = "source-map";
config.output.publicPath = "/";
}
if (process.env.NODE_ENV == "production") {
config.resolve.modulesDirectories = ["web_modules", "node_modules", "bower_components", "app/devconfig", "app/msconfig"];
config.output.path = path.resolve(__dirname, "masheng/build")
}
console.log(config)
module.exports = config
代码有点多,但我们可以尝试的去理解他,因为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的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里的代码,浏览器就会自动刷新为最新结果。而且本地没有生成打包文件,很方便。
参考资料:react中国 http://www.react-cn.com/index.html
reactjs学习一(环境搭配react+es6+webpack热部署)的更多相关文章
- react native 学习一(环境搭配和常见错误的解决)
react native 学习一(环境搭配) 首页,按照http://reactnative.cn/docs/0.30/getting-started.html#content上的介绍,下载安装pyt ...
- Webpack 热部署检测不到文件的变化
最近在用webpack开发,突然发现热部署检测不到文件的变化,相关webpack的代码并没有发生改变,而且同事们的webpack都是正常的,不能热部署严重影响我的开发效率. 网上查了一下原来 Webp ...
- Webpack 热部署检测不到文件变化问题
Webpack 热部署检测不到文件变化问题 今天在用Webpack开发的时候,突然发现文件变动后热部署功能不工作了,感觉好像是webpack检测不到文件的修改了.折腾了半天,开始一直以为是自己的代码有 ...
- React+ES6+Webpack环境配置
转自http://www.cnblogs.com/chenziyu-blog/p/5675086.html 参考http://www.tuicool.com/articles/BrAVv2y Reac ...
- React+ES6+Webpack深入浅出
React已成为前端当下最热门的前端框架之一 , 其虚拟DOM和组件化开发让前端开发更富灵活性,而Webpack凭借它异步加载和可分离打包等优秀的特性,更为React的开发提供了便利.其优秀的特性不再 ...
- Jrebel是一套开发环境,用来实现热部署
http://truemylife.iteye.com/blog/1140921 背景与愿景:开发环境下,tomcat对热布署的支持还不够全面,致使开发人员浪费大量时间在重起服务上.为了提高开发效率, ...
- Java基础学习总结(57)——Jrebel插件热部署
JavaEE开发环境下,Tomcat对热布署的支持还是比较弱,致使开发过程中浪费大量时间在重启服务上.胖先生讨厌来来回回的折腾,所以想看看有没有实时的编译,发现Jrebel的插件付费软件,它对热布署的 ...
- react+es6+webpack环境搭建以及项目入门
前言:拖了这么久,小菜鸟终于开始正式应用react,和es6来开发项目了.之前超喜欢同学的一个博客风格,这里贴一下地址:https://iwenku.net/,PC端是他很久之前做的,最近他重新做了一 ...
- Webpack+React+ES6 最新环境搭建和配置(2017年)
刚刚学习React,发现React在ES6下的语法才是本体,结合ES6新的语言特性,使组件化开发显得更加直观.而且现在的Angular2也开始使用支持强类型的TypeScript,转译(transpi ...
随机推荐
- java接口的应用举例
/* 接口的理解: 接口就是前期定义一个规则!某一个类A,为了扩展自身的功能,对外提供这个接口,后期只要是符合这个接口(规则) 的类(这个类是接口的子类),将子类对象的引用传递给类A中方法(方法中的参 ...
- ECharts+BaiduMap+HT for Web网络拓扑图应用
前一篇谈及到了ECharts整合HT for Web的网络拓扑图应用,后来在ECharts的Demo中看到了有关空气质量的相关报表应用,就想将百度地图.ECharts和HT for Web三者结合起来 ...
- Hive SQL 监控系统 - Hive Falcon
1.概述 在开发工作当中,提交 Hadoop 任务,任务的运行详情,这是我们所关心的,当业务并不复杂的时候,我们可以使用 Hadoop 提供的命令工具去管理 YARN 中的任务.在编写 Hive SQ ...
- JSONP实现跨域
首先提出:什么是跨域?如何解决跨域? 跨域可以简单的理解为从一个域名访问另一个域名,由于javascript的同源政策的限制,出于安全的考虑,不允许浏览器这么做.比如a.com 域名下的js无法操作b ...
- 【转】同一台Windows机器中启动多个Memcached服务
上一篇介绍了Memcached的安装,但是如果手头上只有一台机器,又想做多节点测试咋办? 这就需要在一台机器上启动多个Memcached服务了. 假设Memcached在如下目录:C:\memcach ...
- ASP.NET MVC图片管理(更新)
Insus.NET在ASP.NET MVC专案中,实现了图片管理,上传,预览,显示,删除等功能,还差一个功能,就是更新图片的功能,那这次来完成它.你可以先参考前2篇<ASP.NET MVC图片管 ...
- 控制器描述者(ControllerDescriptor),行为方法描述者(ActionDescriptor),参数描述者(ParameterDescriptor)的小结
Model的绑定是在Action方法绑定参数时发生的,这个绑定的参数过程要用到的元数据来自于控制器,行为方法和参数的描述者ContrllerDescriptor,ActionDescriptor和Pa ...
- Node.js系列之ubuntu环境搭建
ctrl+alt+t打开终端(命令行) 一.准备Node.js所依赖的包(g++,curl,python等) sudo apt-get install g++ curl libssl-dev apac ...
- Ajax学习笔记2之使用Ajax和XML
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Using Ajax wit ...
- java.lang.NullPointerException org.apache.struts2.impl.StrutsActionProxy.getErrorMessage(StrutsActionProxy.java:69)
采用SSH框架时出现了 java.lang.NullPointerException org.apache.struts2.impl.StrutsActionProxy.getErrorMessage ...