webpack+react+es6 嵌入已有项目

最新推荐文章于 2022-11-22 17:29:15 发布

zltestliang

最新推荐文章于 2022-11-22 17:29:15 发布

阅读量426

点赞数 1

分类专栏： react前端

本文链接：https://blog.csdn.net/zltestliang/article/details/72823330

版权

react前端专栏收录该内容

1 篇文章 0 订阅

订阅专栏

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