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

来源：互联网发布：学c语言需要什么基础编辑：程序博客网时间：2024/06/01 09:59

Material-UI

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

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

初始化

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

$ mkdir hello-material-ui$ cd hello-material-ui$ npm init1
2
3
1
2
3

安装依赖

按照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 webpack1
2
3
4
1
2
3
4

第一行是生产用的 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"  }1
2
3
4
5
6
7
8
9
10
11
12
13
14
1
2
3
4
5
6
7
8
9
10
11
12
13
14

配置 Babel

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

另一种，可以将.babelrc 与 package.json 合并（个人推荐）：

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

  "babel": {    "presets": [      "es2015",      "react",      "stage-1"    ],    "plugins": []  }1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

这等同于在.babelrc 中写入：

{  "presets": [    "es2015",    "react",    "stage-1"  ],  "plugins": []}1
2
3
4
5
6
7
8
1
2
3
4
5
6
7
8

这样就将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'] }        ]    }}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

看上去很像一个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"  }1
2
3
4
1
2
3
4

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

$ npm run build1
1

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

$ npm run build-dev1
1

按照配置，打包生成的文件为 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>1
2
3
4
5
6
7
8
9
1
2
3
4
5
6
7
8
9

这是最基本的入口，仅设置了编码，并引用了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);1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

然后运行构建脚本：

$ npm run build1
1

输出了：

Hash: bc7d93c87854ed7f539eVersion: webpack 1.13.0Time: 11389ms    Asset     Size  Chunks             Chunk Namesbundle.js  1.12 MB       0  [emitted]  main    + 301 hidden modules1
2
3
4
5
6
1
2
3
4
5
6

可以看到，这个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上。

转载：http://blog.csdn.net/zccz14/article/details/51421324

阅读全文

0 0