webpack+react+es6 嵌入已有项目

来源：互联网发布：游戏源码交易平台编辑：程序博客网时间：2024/05/17 09:46

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编译即可

阅读全文

0 0