ReactJS学习-使用webpack构建工程，使用materialUI构建前端，与hprose后端通讯

最新推荐文章于 2024-03-15 15:25:36 发布

keyunq

最新推荐文章于 2024-03-15 15:25:36 发布

阅读量3k

点赞数

分类专栏：前端文章标签： webpack materialUI hprose

本文链接：https://blog.csdn.net/keyunq/article/details/51613136

版权

前端专栏收录该内容

4 篇文章 0 订阅

订阅专栏

实现目标：

Material-UI 是一套用React写成的，符合Google Material Design 的UI组件库。

http://www.material-ui.com/

前端通过Material-UI构造界面，然后通过hprose-html5调用后端hprose服务取数据

hprose服务参考上一篇hprose实践,

环境配置：

必须先安装nodejs与npm

新建工程目录

mkdir react-workspace
cd react-workspace
npm init

安装依赖

npm install --save react react-dom react-tap-event-plugin material-ui
npm install --save-dev babel-core babel-loader 
npm install --save-dev babel-preset-es2015 babel-preset-react babel-preset-stage-1
npm install --save-dev webpack

第一行是生产用的 React 与 Material-UI 部分。
第二行是Babel转换器的核心部分。
第三行是Babel转换器的三个额外配置：ES2015（ES6），React，Stage1（ES7）。
第四行是Webpack的部分。

第二、三、四行的内容只在工程构建之前有用（用于开发：-dev）。

安装完毕之后呢，可以先检查一下 package.json
应该会看见如下内容

"dependencies": {
    "material-ui": "^0.15.0",
    "react": "^15.1.0",
    "react-dom": "^15.1.0",
    "react-tap-event-plugin": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.9.1",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.9.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "webpack": "^1.13.1"
  },

配置 Babel

在 package.json 中添加一个域”babel”，与之前的”dependencies” 同级。

"babel": {
    "presets": [
      "es2015",
      "react",
      "stage-1"
    ],
    "plugins": []
  }

配置 Webpack

在项目目录新建一个webpack.config.js ，并写入：

var path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel'] }
        ]
    }
}

这里对Webpack的打包行为做了配置，主要分为几个部分：

entry：指定打包的入口文件，每有一个键值对，就是一个入口文件
output：配置打包结果，path定义了输出的文件夹，filename则定义了打包结果文件的名称
resolve：定义了解析模块路径时的配置，常用的就是extensions，可以用来指定模块的后缀，这样在引入模块时就不需要写后缀了，会自动补全
module：定义了对模块的处理逻辑，这里可以用loaders定义了一系列的加载器，以及一些正则。当需要加载的文件匹配test的正则时，就会调用后面的loader对文件进行处理，这正是webpack强大的原因。比如这里定义了凡是.js结尾的文件都是用babel-loader做处理，而.jsx结尾的文件会先经过jsx-loader处理，然后经过babel-loader处理。当然这些loader也需要通过npm install安装
plugins: 这里定义了需要使用的插件，比如commonsPlugin在打包多个入口文件时会提取出公用的部分，生成common.js

当然Webpack还有很多其他的配置，具体可以参照它的配置文档

配置 npm 脚本
现在我们还缺少一个构建脚本，编辑package.json 中的 “scripts” 域：

"scripts": {
    "build": "webpack",
    "build-dev": "webpack -w -d"
  }

接下来我们就可以在项目目录下使用简单的构建脚本了：

$ npm run build

如果是开发中，可以使用监听式的Webpack，差量打包，提升效率。

$ npm run build-dev

按照配置，打包生成的文件为 dist/bundle.js 。

至此，基本的环境已经配置完毕，我们来尝试一下调用Material-UI库。

代码编写

创建Web入口
在项目目录下创建一个index.html，写入：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
    </head>
    <body>
        <script src="dist/bundle.js"></script>
    </body>
</html>

编写Webpack入口
编辑项目目录下的 entry.js，写入：

import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <AppBar title="Hello, Material-UI!" />
  </MuiThemeProvider>
);

let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);

运行构建脚本：

npm run build

输出

现在可以看到目录下有了一个dist/bundle.js

打开index.html

成功

以上内容严重参考：http://blog.csdn.net/zccz14/article/details/51421324

浏览器自动刷新

如果需要一直输入 npm run build 确实是一件非常无聊的事情，幸运的是，我们可以把让他安静的运行，让我们设置 webpack-dev-server。

npm install --save webpack-dev-server

修改package.json文件的scripts：

"scripts": {
        "build": "webpack",
        "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build"
      }

当你在命令行里运行 npm run dev 的时候他会执行 dev 属性里的值。这是这些指令的意思：

webpack-dev-server - 在 localhost:8080 建立一个 Web 服务器
–devtool eval - 为你的代码创建源地址。当有任何报错的时候可以让你更加精确地定位到文件和行号
–progress - 显示合并代码进度
–colors - Yay，命令行中显示颜色！
–content-base build - 指向设置的输出目录
总的来说，当你运行 npm run dev 的时候，会启动一个 Web 服务器，然后监听文件修改，然后自动重新合并你的代码。真的非常简洁！

访问 http://localhost:8080 你会看到效果。

访问发现 “Cannot GET /” 错误

因为我们的index.html不是在build目录下

调整项目结构为

/app
- main.js
- component.js
/build
- bundle.js (自动创建)
- index.html
package.json
webpack.config.js

修改index.html

<!doctype html>
    <html>
        <head>
            <meta charset="utf-8" />
        </head>
        <body>
            <script src="bundle.js"></script>
        </body>
    </html>

将entry.js移动到app/main.js

修改webpack.config.js，将入口文件设置为app/main.js，output设为build目录下的bundle.js,
并新增入口点，使得浏览器在文件修改之后会自动刷新。

var path = require('path');

module.exports = {
    entry: [
      'webpack/hot/dev-server',
      'webpack-dev-server/client?http://localhost:8080',
      path.resolve(__dirname, 'app/main.js')
    ],
    output: {
        path: path.join(__dirname, '/build'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        loaders: [
            { test: /\.jsx?$/, loaders: ['babel'] }
        ]
    }
}

运行命令 npm run dev, 然后访问http://localhost:8080/
看到之前同样页面，然后修改一下main.js
将

<AppBar title="Hello, Material-UI!" />

修改为

<AppBar title="Hello, World!" />

保存一下，再回到浏览器，会发现自动刷新了，内容也变成了Hello, World!

通过hprose-html5取数据

下面通过后端服务取数据，来替代Hello，World！

现已有hprose for php 构建的hprose服务，在远程服务器http://xx.xx.xx.xx:8080/
方法为getUserByID

修改index.html,引入hprose-html5.js，使用的是bootcss提供的cdn

<script type="text/javascript" src="http://cdn.bootcss.com/hprose-html5/2.0.8/hprose-html5.js"></script>

修改main.js

import React from 'react';
import ReactDOM from 'react-dom';
import getMuiTheme from 'material-ui/styles/getMuiTheme';
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider';
import AppBar from 'material-ui/AppBar';

const muiTheme = getMuiTheme();

class App extends React.Component{

  constructor(props){
    super(props);
    this.state = {
      data:"none",
    };
    this.componentDidMount = this.componentDidMount.bind(this);
  }

  componentDidMount() {
      this.setState({data: "block"});
      let self = this;
      let client = hprose.Client.create("http://xx.xx.xx.xx:8080/", ["getUserByID"]);
      client.getUserByID(2, function(result) {
            console.log(result.player_name);
            self.setState({data: result.player_name});
        }, function(name, err) {
            console.log(err);
        });
  }
  render() {
    return (
    <MuiThemeProvider muiTheme={muiTheme}>
    <AppBar title={this.state.data} />
    </MuiThemeProvider>
    );
  }
}

let app = document.createElement('div');
ReactDOM.render(<App />, app);
document.body.appendChild(app);

查看结果

从后端服务取到了数据“keyunqqq”

PS：React在ES6的实现中去掉了getInitialState这个hook函数，规定state在constructor中实现，如下：

Class App extends React.Component {

constructor(props) {
super(props);
this.state = {};
}
…
}

Babel的Blog上还有一种实现方法，即直接使用赋值语句：

Class App extends React.Component {

constructor(props) {
super(props);
}

state = {}
…
}

ES6中this需要手动绑定：

this.componentDidMount = this.componentDidMount.bind(this);

keyunq

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
ReactJS学习-使用webpack构建工程，使用materialUI构建前端，与hprose后端通讯

实现目标：Material-UI 是一套用React写成的，符合Google Material Design 的UI组件库。http://www.material-ui.com/前端通过Material-UI构造界面，然后通过hprose-html5调用后端hprose服务取数据hprose服务参考上一篇hprose实践,环境配置：必须先安装nodejs与npm新建工程目录mkdir react-
复制链接

扫一扫