webpack+react+es6 嵌入已有项目

1.库安装包， npm install

{
  "name": "react-es6-webpack","version": "1.0.0","description": "","main": "index.js","author": "","license": "ISC","devDependencies": {
    "babel-core": "^6.7.2","babel-loader": "^6.2.4","babel-preset-es2015": "^6.6.0","babel-preset-react": "^6.5.0","css-loader": "^0.23.1"
  },"dependencies": {
    "react": "^15.5.4","react-dom": "^15.5.4"
  }
}

2. webpack.config.js

var webpack = require("webpack");

module.exports = {
    entry : __dirname + "/main.js",output : {
        path : __dirname + "/out",filename : "index.js"
    },module:{
        loaders :[
            {
                test: /\.js$/,exclude: /node_modules/,loader: 'babel-loader',query:
                {
                    presets:['react','es2015']
                }
            }
        ]
    },externals: {
        'jquery': 'window.$','react': 'React','react-dom': 'ReactDOM'
    },}

externals的目的不想打react的库一起打到index.js.
presets可以方便的是用es6的各种特性

3.组件

import React from 'react';
import ReactDOM from 'react-dom';

class AppComponent extends React.Component {
    render() {
        var list = [];
        for(var i = 0; i < 100000; i++){
            var ele = <h1>{i+1}:{this.props.data}</h1>;
            list.push(ele)
        }
        return <div>{list}</div>;
    }
}

window.renderList = function(list){
    ReactDOM.render(
        <AppComponent data={list}/>,document.getElementById('root')
    );
};

4.html

<!DOCTYPE html>
<html lang="en">
    <head>
        <title></title>
        <Meta charset="UTF-8">
        <Meta name="viewport" content="width=device-width,initial-scale=1">
        <script src="https://cdn.bootcss.com/react/15.5.4/react.min.js"></script>
        <script src="https://cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>


    </head>
    <body>
        <div id="root" style="width: 400px;min-height:200px;float: left;">
        </div>
        <div style="float: left;">
            <button id="addBtn">添加</button>
            <button id="updateBtn">更新</button>
        </div>
        <script src="out/index.js"></script>
        <script>
            document.getElementById("addBtn").onclick = function(){
                renderList("hello react")
            };


            document.getElementById("updateBtn").onclick = function(){
                renderList("hello world")
            };
        </script>
    </body>
</html>

最后webpack编译即可

原文地址：https://www.jb51.cc/react/303888.html

webpack+react+es6 嵌入已有项目

相关推荐