REACT+WEBPACK+ES6 Environment Building (custom framework)

Introduction

The current react front-end frame is the hottest this year. React native, based on react, also developed rapidly. React has its unique component function and jsx new syntax to help the front-end design with better design and convenience, and react native is to expand the front-end boundaries.

Speaking of react, you have to say that Webpack, with its excellent features such as asynchronous loading and detachable packaging, is on the way to replace grunt and gulp. And the future-oriented ES6, but also support the modular processing.

I'll share some of the WEBPACK+REACT+ES6 's environmental Build (General) "Additional release"

Preparatory work

The first thing to be prepared is webstorm and the installation of node. js, where I give my own cloud disk, and the pro-test is available. The corresponding address is as follows:

Webstorm: Link: http://pan.baidu.com/s/1o787Av4 Password: z176

node. js: Link: https://nodejs.org/en/official website

Let's run.

1, the new project Echartdemo (I will use some of the relevant Baidu painting components, so named, but here only do frame construction, not introduce Baidu painting components), change files--Set up ES6 environment,:

2. Add the Package.json file and enter the NPM init file to generate the file automatically, as follows:

{  "Name": "React-echart",  "Version": "1.0.0",  "Scripts": {    "Start": "Node Server.js"  },  "description": "React+echart Baidu drawing Components Demo",  "Main": "Index.js",  "Repository": {    ' type ': ' Git ',    "url": "Git+https://github.com/jaminhuang/echartdemo.git"  },  "Author": "Jaminhuang",  "License": "ISC",  "Bugs": {    "url": "Https://github.com/JaminHuang/EChartDemo/issues"  },  "Homepage": "Https://github.com/JaminHuang/EChartDemo#readme"}

View Code

3. After generating the file, add server.js (Service Portal file), Webpack.config.js (config file), Webpack.production.config.js (Release configuration file), and then modify the corresponding scripts to modify the startup and release.

"Scripts": {    "start": "Node Server.js",    "prod": "Webpack--config Webpack.production.config.js "  }

4. New Portal file index.html, and related code framework, as shown below

|--src |----Containers |------index.js Component processing Master file |------root.js  address jump profile |--- - Service |------index.js Service Request main file |------request.js Service Request File |----index.js  main portal file /c8>|--index.html page entry file |--Package.json project information and installation profile |--server.js Service Port entry file |--
    
     webpack.config.js Profile |--webpack.production.config.js (release) configuration file
    

View Code

5, need to install the package, see Package.json for details, as follows:

"Dependencies": {    "Echarts": "^3.2.3",    "Isomorphic-fetch": "^2.2.1",    "Lodash": "^4.15.0",    "React": "^15.3.1",    "React-dom": "^15.3.1",    "React-router": "^2.8.0"  },  "Devdependencies": {    "Babel-core": "^6.14.0",    "Babel-loader": "^6.2.5",    "Babel-polyfill": "^6.13.0",    "Babel-preset-latest": "^6.14.0",    "Babel-preset-react": "^6.11.1",    "Open": "0.0.5",    "React-hot-loader": "^1.3.0",    "Webpack": "^1.13.2",    "Webpack-dev-server": "^1.15.1"  }

View Code

6. New. BABELRC (Babel configuration file), important

{  "presets": ["React", "latest"]}

Add configuration for specific content

1. index.html Configuration

<! DOCTYPE html>
View Code
2. Server.js Configuration
' Use strict ';varOpen = require (' Open ');varWebpack =require (' Webpack '));varWebpackdevserver = require (' Webpack-dev-server '));varConfig = require ('./webpack.config.js '));varcompiler =webpack (config);varServer =Newwebpackdevserver (compiler, {publicPath:config.output.publicPath, hot:true, Historyapifallback:true, quiet:false, Noinfo:false, FileName:"Index.js", Watchoptions: {aggregatetimeout:300, Poll:1000}, headers: {"X-custom-header": "Yes"}, stats: {colors:true}}); Server.listen (3010,function(err, result) {if(Err) console.log (err); Open (' http://localhost:3010 ');});
View Code
3. Webpack.config.js Configuration
' Use strict ';varPath = require (' path ');varWebpack = require (' Webpack '));varConfig ={devtool:' Source-map ', entry: {app: [' webpack-dev-server/client?http://localhost:3010 ', ' webpack/hot/dev-server ', './src/index ']}, Output: {Path:path.join (__dirname,' Public '), Publicpath:'/public/',        //chunkfilename: ' [id].chunk.js ',FileName: "Bundle.js"}, module: {loaders: [{test:/\.js$/, loaders: [' React-hot ', ' Babel '], include: [Path.join (__dirname, ' src '))]}]}, plugins: [NewWebpack. Hotmodulereplacementplugin (),//new Webpack.optimize.CommonsChunkPlugin (' Shared.js '),        NewWebpack. Defineplugin ({' Process.env ': {                ' DEBUG ':true}})]};module.exports= config;
View Code
4. Webpack.production.config.js Configuration
/** * Created: September 19, 2016 10:45:57 * Creator: Jaminhuang * Description: Configuration file (Release version)*/' Use strict ';varPath = require (' path ');varWebpack = require (' Webpack ')); Module.exports={devtool:false, Debug:false, stats: {colors:true, reasons:false}, entry:'./src/index ', Output: {Path:path.join (__dirname,' Public '), Publicpath:'/public/',        //chunkfilename: ' [id].chunk.js ',FileName: ' Bundle.js '}, plugins: [NewWebpack.optimize.DedupePlugin (),NewWebpack. Defineplugin ({' Process.env ': {                ' Node_env ': json.stringify (' production ')),                ' DEBUG ':false            }        }),        //new Webpack.optimize.CommonsChunkPlugin (' Shared.js '),        NewWebpack.optimize.UglifyJsPlugin ({compressor: {warnings:false            }        }),        NewWebpack.optimize.OccurenceOrderPlugin (),NewWebpack.optimize.AggressiveMergingPlugin (),NewWebpack. Noerrorsplugin ()], module: {loaders: [{test:/\.js$/, Loader: "Babel", Exclude:/node_modules/}        ]    }};
View Code
5. Main portal file configuration under SRC file
' Use strict 'react 'react-dom' react-router'./containers/root ' Babel-polyfill '; Reactdom.render (<router history={browserhistory} routes={routes}/>, document.getElementById (' wrapper ') );
View Code
6, service file ( request service, if not called other API interface is not created ) under the relevant configuration
6.1 Index.js
' Use strict '* as Request from './request '; export {    Request}
6.2 Request.js
' use strict ' isomorphic-fetch' = ' http://xxx'function  fetchpost (URL, data) {     return fetch (' ${baseurl}/${url} ', {        headers: {"Content-type": "Application/json"},        ' POST ',        body:JSON.stringify (data)    }). Then (response= {        return Response.json ();    })}
7, Containers file (package) of the relevant configuration
7.1 Index.js
' Use strict 'react 'react-router '; class Container extends Component {    render () {          This . props;         return (<div>{children} This is home </div>) default Container ;     
View Code
7.2 Root.js
'use strict './'default  {    component:index,    '/'}
View CodePostscript
At this point, all the configurations are complete, and if you want to run the view, just type "npm start" and you can debug and check-if you want to post it, just type "npm prod".
Attached to the demo source code address: If you feel OK, please give a star Oh ~
Address: Https://github.com/JaminHuang/EChartDemo
REACT+WEBPACK+ES6 Environment Building (custom framework)