react-js开发环境
时间：2016.3.19-12:29
作者：三月懒驴
基于：react版本：0.14
基于：babel版本：6
相关代码：github
开始一个项目
npm init
安装webpack
npm install webpack --save-dev
项目目录(demo架构)
- /app
- main.js
- component.js
- /build
- bundle.js （自动生成）
- index.html
- webpack.config.js
- package.json
设置webpack.config.js
var path = require('path');
module.exports = {
entry:path.resolve(__dirname,'app/main.js'),output:{
path:path.resolve(__dirname,'build'),filename:'bundle.js'
}
};
在package.json里面预设这个命令去启动打包功能
"build":"webpack"
课间练习
//component.js
'use strict'
module.exports = function(){
var a = 'hello word'
return a;
}
//main.js
'use strict'
var component = require('./component.js');
document.body.innnerHTML = component();
使用webpack-dev-server：监听代码自动刷新！
npm install webpack-dev-server --save-dev
在package.json里面配置webpack-dev-server
"dev":"webpack-dev-server --devtool eval --progress --colors --hot --content-base build" //webpack-dev-server 创建一个服务器8080端口的 //devtool eval --为你的代码创建源地址，可以代码快速定位 //progress --显示进度条 //colors --命令行带颜色 //content-base build --指向设置的输出目录 //一旦启动这个就会用服务器去监听代码文件的变化，从而每次变化都自动合并
//配置在webpack.config.js的入口
entry:[
'webpack/hot/dev-server','webpack-dev-server/client?http://localhost:8080',path.resolve(__dirname,'app/main.js');
]
课堂练习
1. npm run dev 启动服务器 2. 打开浏览器－>http://localhost:8080 3. 修改一下前面的课堂练习时候写的代码中的compnent.js的return的东西
配置react / babel
//安装react npm install react --save npm install react-dom --save //安装babel-loader npm install babel-loader --save-dev npm install babel-core --save-dev npm install babel-preset-es2015 --save-dev //支持ES2015 npm install babel-preset-react --save-dev //支持jsx npm install babel-preset-stage-0 --save-dev //支持ES7 //但是还不够 npm install babel-polyfill --save /* Polyfilla是一个英国产品,在美国称之为Spackling Paste(译者注:刮墙的,在中国称为腻子).记住这一点就行:把旧的浏览器想象成为一面有了裂缝的墙.这些[polyfills]会帮助我们把这面墙的裂缝抹平,还我们一个更好的光滑的墙壁(浏览器) */ npm install babel-runtime --save npm install babel-plugin-transform-runtime --save-dev /*减少打包的时候重复代码，以上要注意是放在dev还是非dev上！*/
配置babel
//在入口添加polyfill entry[ 'babel-polyfill','webpack/hot/dev-server','app/main.js') ] //在webpack.config.js的module.exports = {}里面增加 module:{ loaders:[{ 'loader':'babel-loader',exclude:[ //在node_modules的文件不被babel理会 path.resolve(__dirname,'node_modules'),]， include:[ //指定app这个文件里面的采用babel path.resolve(__dirname,'app'),],test：/\.jsx?$/,query:{ plugins:['transform-runtime'],presets:['es2015','stage-0','react'] } }] }
课堂测试
//component.js
'use strict'
import React from 'react'
class Component extends React.Component{
render(){
return <div>Helllo World</div>
}
}
//main.js
'use strict'
//注意！这里引入了新的东西
import 'babel-polyfill'
import React from 'react'
import {render} from 'react-dom'
import Component from './component'
let main = function(){
render(<Component />,document.getElementById('main'));
}
main();
加入CSS ／ iamge / font
// 这里先留个坑！因为暂时来说还是认为外链出来适合现在这个时代。可能在项目正式上线的时候才需要
发布配置：单文件入口版本！
//新建一个webpack.production.config.js //in package.json "deploy": "NODE_ENV=production webpack -p --config webpack.production.config.js" //in webpack.production.config.js //和开发环境不同的是，入口和出口。相应的在HTML的JS源也要进行修改。 var path = require('path') var node_module_dir = path.resolve(__dirname,'node_module'); module.exports = { entry:[ 'babel-polyfill',filename:'app.js' },module:{ loaders:[ { loader:"babel-loader",//加载babel模块 include:[ path.resolve(__dirname,exclude:[ node_module_dir ],test:/\.jsx?$/,query:{ plugins:['transform-runtime'],'react'] } },] } }
发布配置（多文件模式）
库最好就不要打包进来。因为一般库都是不会改动的。所有用户load一次就好了。所以这里就要进行库的分离。
依旧是：webpack.production.config.js
var path = require('path');
var webpack = require('webpack');
var node_module_dir = path.resolve(__dirname,'node_module');
module.exports = {
entry:{
app:[path.resolve(__dirname,react: ['babel-polyfill','react','react-dom']
},]
},plugins: [
new webpack.optimize.CommonsChunkPlugin('react','react.js')
]
}
预计学习搭建时间：1小时！恭喜你！全部课程完成，接下来的话，我们就要开始react的课程了！本课程如果还有什么不懂的话，可以在评论中进行讨论。