React+Webpack+ES6環境搭建(自定義框架)

時間 2019-11-10

標籤 react+webpack+es6 react webpack 環境搭建自定義框架欄目 React 简体版

原文原文鏈接

引言

　　目前React前端框架是今年最火的。而基於React的React Native也迅速發展。React有其獨特的組件化功能與JSX的新語法，幫助前端設計有了更好的設計與便捷，而React Native更是擴大了前端的邊界。javascript

　　說道React，那就不得不說一下Webpack憑藉它異步加載和可分離打包等優秀的特性，走在取代Grunt和Gulp的路上。而面向將來的ES6，更是支持模塊化處理。html

　　下面我就分享一下關於Webpack+React+ES6的環境搭建（通用）【附加發布版】前端

準備工做

　　首先須要準備的就是WebStorm以及安裝node.js，這裏我給出本身雲盤上的下載地址，親測可用。對應的地址以下：java

　　WebStorm：連接：http://pan.baidu.com/s/1o787Av4 密碼：z176node

　　node.js：連接：https://nodejs.org/en/ 官網react

讓咱們跑起來

　　一、新建項目EChartDemo（我這裏後續會使用一些相關的百度繪畫組件，故以此命名，但這裏只作框架構建，暫不引入百度繪畫組件），更改文件-->設置 ES6環境，如圖所示：webpack

　　二、添加package.json文件，輸入npm init文件自動生成文件，以下：git

{
  "name": "react-echart",
  "version": "1.0.0",
  "scripts": {
    "start": "node server.js"
  },
  "description": "React+EChart百度繪圖組件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

　　三、生成文件後，添加server.js（服務入口文件）、webpack.config.js（配置文件）、webpack.production.config.js（發佈版配置文件），再進行修改對應的Scripts，用於修改啓動和發佈。github

"scripts": {
    "start": "node server.js",
    "prod": "webpack --config webpack.production.config.js"
  }

　　四、新建入口文件index.html，以及相關代碼框架，以下所示web

　　|--src
　　|----containers
　　|------index.js　　組件處理主文件
　　|------root.js　　  地址跳轉配置文件
　　|----service
　　|------index.js　　服務請求主文件　
　　|------request.js　服務請求文件
　　|----index.js　　  主入口文件
　　|--index.html　　頁面入口文件
　　|--package.json　項目信息與安裝配置文件
　　|--server.js　　　 服務端口入口文件
　　|--webpack.config.js　　配置文件
　　|--webpack.production.config.js　　（發佈版）配置文件

View Code

　　五、須要安裝的包，詳情請看package.json，以下：

"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

　　六、新建.babelrc(babel配置文件)，重要

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

具體內容的添加配置

　　一、index.html配置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="wrapper"></div>
<script src="./public/bundle.js" type="text/javascript"></script>
</body>
</html>

View Code

　　二、server.js配置

'use strict';
var open = require('open');
var webpack =require('webpack');
var WebpackDevServer = require('webpack-dev-server');
var config = require('./webpack.config.js');

var compiler = webpack(config);
var server = new WebpackDevServer(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

　　三、webpack.config.js配置

'use strict';
var path = require('path');
var webpack = require('webpack');

var config = {
    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: [
        new webpack.HotModuleReplacementPlugin(),
        //new webpack.optimize.CommonsChunkPlugin('shared.js'),
        new webpack.DefinePlugin({
            'process.env': {
                'DEBUG': true
            }
        })
    ]
};
module.exports = config;

View Code

　　四、webpack.production.config.js配置

/**
 * 建立時間：2016年9月19日 10:45:57
 * 建立人：JaminHuang
 * 描述：配置文件（發佈版）
 */
'use strict';
var path = require('path');
var webpack = 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: [
        new webpack.optimize.DedupePlugin(),
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production'),
                'DEBUG': false
            }
        }),
        //new webpack.optimize.CommonsChunkPlugin('shared.js'),
        new webpack.optimize.UglifyJsPlugin({
            compressor: {
                warnings: false
            }
        }),
        new webpack.optimize.OccurenceOrderPlugin(),
        new webpack.optimize.AggressiveMergingPlugin(),
        new webpack.NoErrorsPlugin()
    ],
    module: {
        loaders: [
            {test: /\.js$/, loader: "babel", exclude: /node_modules/}
        ]
    }
};

View Code

　　五、src文件下的主入口文件配置

'use strict';
import React from 'react';
import ReactDOM from 'react-dom';
import { browserHistory, Router } from 'react-router'
import routes from './containers/root';
import 'babel-polyfill';

ReactDOM.render(<Router history={browserHistory} routes={routes}/>, document.getElementById('wrapper'));

View Code

　　六、service文件（請求服務，若是沒有調用其餘API接口則不用建立）下的相關配置

　　　　6.1　　index.js

'use strict';
import * as Request from './request';

export {
    Request
}

　　　　6.2　　request.js

'use strict';
import fetch from 'isomorphic-fetch';
const baseUrl = "http://xxx";

export function FetchPost(url, data) {
    return fetch(`${baseUrl}/${url}`, {
        headers: {"Content-Type": "application/json"},
        method: 'POST',
        body: JSON.stringify(data)
    }).then(response=> {
        return response.json();
    })
}

　　七、containers文件（組件包）下的相關配置

　　　　7.1　　index.js

'use strict';
import React,{ Component } from 'react';

import { Link } from 'react-router';

class Container extends Component {
    render() {
        const { children } = this.props;
        return (<div>{children}這裏是首頁</div>)
    }
}


export default Container;

View Code

　　　　7.2　　root.js

'use strict';
import Index from './';
export default {
    component: Index,
    path: '/'
}

View Code

後記

　　至此，全部配置所有都已經完成了，若是想運行查看則只要輸入」npm start「就能夠調試查看啦~若是想發佈則輸入」npm prod「就好了。

　　附上Demo源代碼地址：若是感受能夠的話，請給個Star哦~

　　地址：https://github.com/JaminHuang/EChartDemo

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。