框架的流程:
1、下载安装Node.js
2、安装webpack(含服务器等) npm install webpack webpack-dev-server babel -g
注意:-g表示第一条命令是全局安装
3、添加package.json文件(目前只知道是放一些项目的描述信息),进入项目目录
命令:npm init
4、添加库文件(–save-dev:将依赖信息写入package.json的devdependencies),babel-polyfill可解决部分es6兼容问题
例子:npm install react react-dom –save-dev(多个插件空格分开)
所有库如下:
webpack
react
react-dom
babel-loader
less-loader
css-loader
style-loader
url-loader
file-loader
babel-preset-es2015
babel-preset-react
react-router
redux
react-redux
redux-devtools
redux-thunk
babel-polyfill
第三方UI
material-ui
react-tap-event-plugin
react-swipeable-views
5、跟目录新建webpack.config.js配置文件
6、打包:node进入你的项目跟目录执行打包命令:webpack –config webpack.config.js
ps:webpack.config.js配置如下
var webpack=require('webpack'); module.exports={ devtool:'#eval-source-map', //入口文件,多个的话将按顺序执行 entry:[ 'babel-polyfill','./App/js/index.jsx' ], output:{ path:'App', //打包后文件的存放路径 publicPath:'/App/', //服务器根路径 filename:'bundle.js' //打包后的文件名 }, module:{ loaders:[ {test:/\.css$/,loader:'style-loader!css-loader'}, {test:/\.less$/,loader:'style-loader!css-loader!less-loader'}, {test:/\.js?$/,loader:'babel',exclude: /node_modules/}, { test:/\.jsx?$/, loader:'babel', exclude: /node_modules/, query:{ presets:['es2015','react'] } } ] }, watch: true, //观察模式,每次修改保存webpack.config.js中引用文件,bundle.js的文件会自动更新 //指定可以被 require 的文件后缀,比如 Hello.js 这样的文件就可以直接用 require(./Hello) 引用 resolve:{ root:'', extensions:['','.js','.jsx','.json','.less','.css'] ////定模块的后缀,这样在引入模块时就不需要写后缀了,会自动补全 } }