资源描述:
《前端四reactredux脚手架搭建》由会员上传分享,免费在线阅读,更多相关内容在应用文档-天天文库。
1、初始化项目基于nodejscdD:code_fetestcnpminit新建index.htmlreact_reduxHelloWorld!
expresnodejswebframeworkweb框架http://expressjs.com/zh-cn/cnpminstallexpress--save-dev新建server.jsvarapp=new
2、(require('express'))()varport=9100app.get("/",(req,res)=>{res.sendFile(__dirname+'/index.html')})app.listen(port,error=>{if(error){console.error(error)}else{console.info("Openuphttp://localhost:%s/inyourbrowser.",port)}})10nodeserver.jspackage.json增加start命令babelBabelisaJavaScriptcompiler.将babel
3、语法编译成普通es2015(es6)https://babeljs.io/cnpminstallbabel-corebabel-loaderbabel-preset-es2015babel-preset-reactbabel-preset-react-hmre--save-dev新建.babelrc增加配置内容{"presets":["es2015","react"],"env":{"development":{"presets":["react-hmre"]}}}webpackwebpacktheflexiblemodulebundlerhttps://webpack.github
4、.io/cnpminstallwebpackwebpack-dev-middlewarewebpack-hot-middleware--save-dev新建webpack.config.js10varpath=require('path')varwebpack=require('webpack')module.exports={devtool:'cheap-module-eval-source-map',entry:['webpack-hot-middleware/client','./index'],output:{path:path.join(__dirname,'dist'),
5、filename:'bundle.js',publicPath:'/static/'},plugins:[newwebpack.optimize.OccurenceOrderPlugin(),newwebpack.HotModuleReplacementPlugin()],module:{loaders:[{test:/.js$/,loaders:['babel'],exclude:/node_modules/,include:__dirname}]}}新建index.jsconstrootEl=document.getElementById('root');rootEl.inne
6、rText="haha!"修改server.js10varwebpack=require('webpack')varwebpackDevMiddleware=require('webpack-dev-middleware')varwebpackHotMiddleware=require('webpack-hot-middleware')varconfig=require('./webpack.config')varapp=new(require('express'))()varport=9100varcompiler=webpack(config)app.use(webpackDev
7、Middleware(compiler,{noInfo:true,publicPath:config.output.publicPath}))app.use(webpackHotMiddleware(compiler))app.get("/",(req,res)=>{res.sendFile(__dirname+'/index.html')})app.listen(port,error=>{if(error){console.error(error)}el