Material-UI + React + Babel + Webpack 环境配置

原创 2016年05月16日 03:40:13

Material-UI

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

此库在编写的时候用到了ES6与ES7的一些特性,并用Babel构建,于是我稍作研究,给出最小的环境配置来使用Material-UI这套库。

初始化

创建一个项目目录并初始化项目(如果没有的话)

$ mkdir hello-material-ui
$ cd hello-material-ui
$ npm init

安装依赖

按照npm的提示初始化完毕这个目录后,开始安装依赖

$ 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

npm init 之后,目录中就会有一个 package.json

如果安装顺利,里面应该有至少这样一些部分:

版本号不重要,各位配置的时候说不定已经出了新的版本。
如果确认跟随本文配置失败,那可以试试完全按照我的版本号来配置。

  "dependencies": {
    "material-ui": "^0.15.0",
    "react": "^15.0.0",
    "react-dom": "^15.0.0",
    "react-tap-event-plugin": "^1.0.0"
  },
  "devDependencies": {
    "babel-core": "^6.8.0",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-stage-1": "^6.5.0",
    "webpack": "^1.13.0"
  }

配置 Babel

配置Babel的方案有两种,一种是在目录中新建一个.babelrc 的文件,然后按照JSON格式写入规则。

另一种,可以将.babelrcpackage.json 合并(个人推荐):

package.json 中添加一个域"babel",与之前的"dependencies" 同级。

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

这等同于在.babelrc 中写入:

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

这样就将Babel配置好了,接下来考虑一下配置Webpack。

配置 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'] }
        ]
    }
}

看上去很像一个JSON,但它其实不是,它是一个JS对象,你可以把webpack.config.js 当成一个模块。

比起JSON,用JS模块来作为配置更灵活。因为JS模块可以进行运算,甚至配置一些自定义函数。而JSON只能配置一些比较死的东西。

其实也大致能猜出一二的,整个项目的入口是./entry.js ——与webpack.config.js 同个目录下的一个JS文件。

具体各个域都有什么用,更多的配置,参见官方文档

配置 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库。


Hello, Material-UI!

接下来用一个简洁的方式构建一个Web页面。

创建Web入口

在项目目录下创建一个index.html,写入:

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

这是最基本的入口,仅设置了编码,并引用了JS。

编写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

输出了:

Hash: bc7d93c87854ed7f539e
Version: webpack 1.13.0
Time: 11389ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.12 MB       0  [emitted]  main
    + 301 hidden modules

可以看到,这个Webpack构建一次还是相当花费时间的,bundle.js也不小。

对于Web应用来说,一开始就加载一个MB级别的资源不是一件好事。最好将bundle.js进一步压缩,并发布到CDN上加速。最好再写一个轻量的加载动画来提升用户体验。

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

运行

打开index.html

运行效果

成功!如此我们就生成了一个HTML入口以及一个浏览器可以运行的前端JS文件。理论上来说可以配合任何的Web应用的后端进行开发。无论是使用PHP,Java Servlet、NodeJS(Express等)、Python、Ruby……都没有问题。

甚至可以部署到github.io上。

版权声明:CopyRight 2016, Heley Chen, Follow CC BY-NC-SA License

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

实现目标:Material-UI 是一套用React写成的,符合Google Material Design 的UI组件库。http://www.material-ui.com/前端通过Materia...
  • keyunq
  • keyunq
  • 2016年06月08日 14:53
  • 2057

React升级后带来的两个小问题及处理

一 :MuiThemeProvider升级到react@15.2.1 后,按照往常操作,出现了报错: Failed Context Types: Required context muiTheme...
  • Beijiyang999
  • Beijiyang999
  • 2016年07月09日 17:37
  • 1291

React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI)

React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI) ReactJs提供了JSX、UI更新机制、组件化原则等底层支持,但是正如我们在所有的程序语言...
  • loveu2000000
  • loveu2000000
  • 2016年09月21日 22:35
  • 4339

mobx前期配置工作让webpack支持ES7的修饰器的转码

MobX 是一个简单、方便扩展、久经考验的状态管理解决方案。使用了观察者(observable)与被观察者(observer)的概念,本人不介绍MobX的使用(本人也在努力研究之中),仅仅是介绍web...
  • kuangshp128
  • kuangshp128
  • 2017年03月16日 09:07
  • 732

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

实现目标:Material-UI 是一套用React写成的,符合Google Material Design 的UI组件库。http://www.material-ui.com/前端通过Materia...
  • keyunq
  • keyunq
  • 2016年06月08日 14:53
  • 2057

React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI)

React实战-一个非常棒的React与Material风格相结合的UI控件库(Material-UI) ReactJs提供了JSX、UI更新机制、组件化原则等底层支持,但是正如我们在所有的程序语言...
  • loveu2000000
  • loveu2000000
  • 2016年09月21日 22:35
  • 4339

React+Webpack+Babel开发环境的搭建

1、首先,确定你已经了解了react是干什么的,对react还不了解的请移步这里:react快速入门,我大体总结下吧:你就直接把react理解成能够用js实现web前端的组件化开发的一个框架就好了,它...
  • JavaReact
  • JavaReact
  • 2017年02月14日 17:36
  • 844

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)

ES6 + Webpack + React + Babel 如何在低版本浏览器上愉快的玩耍(上)起因某天,某测试说:“这个页面在 IE8 下白屏,9也白。。”某前端开发: 吭哧吭哧。。。一上午的时间就...
  • a324539017
  • a324539017
  • 2016年09月12日 16:32
  • 2156

一步一步进入React的世界(React+Webpack+ES6组合配置)

看了很多博客,大都是把配置文件一笔带过,或者干脆不给出配置文件,然而环境搭建对于新手来说是既困难又重要,显然网络上的博客不利于新手开始学习。 BZ打算从从头开始,一步一步配置webpack,能够使用...
  • future_todo
  • future_todo
  • 2016年11月04日 16:44
  • 4374

react+webpack 下使用eslint以及eslint插件在sublime下的安装使用

1、eslint环境的搭建 1)在已有react+webpack+babel的环境下,进入到项目的package.json文件所在的目录,安装eslint、eslint-load相关包。如下:"de...
  • whbwhb1
  • whbwhb1
  • 2016年12月07日 11:26
  • 3299
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Material-UI + React + Babel + Webpack 环境配置
举报原因:
原因补充:

(最多只允许输入30个字)