来来来，让我们从头搭建一个ThinkJS+React+WebPack+material-ui的工程

发表于   |   分类于   |  

  • ThinkJS是一款使用ES6/7特性全新开发的Node.js MVC框架，使用ES7中async/await，或者ES6中的Generator Function特性彻底解决了Node.js中异步嵌套的问题。同时吸收了国内外众多框架的设计理念和思想，让开发Node.js项目更加简单、高效。

  • ReactJS是基于组件化的开发，许多人使用React作为MVC架构的V层，React为了更高超的性能而使用虚拟DOM作为其不同的实现。 它同时也可以由服务端Node.js渲染 － 而不需要过重的浏览器DOM支持

  • Material Design 是谷歌推出的全新的设计理念，采用大胆的色彩、流畅的动画播放，以及卡片式的简洁设计。Material Design 风格的设计拥有干净的排版和简单的布局，容易理解，内容才是焦点。

  • Material UI 是一个 CSS 框架和一组实现谷歌 Material Design 设计规范的 React 组件。可以作为 NPM 安装包，使用 browserify 和 reactify 的依赖管理和 JSX 转换。

  • Babel 能够实现 ES6 到 ES5 的代码转换多亏了 Babel (以前叫 6to5) 以及 Traceur 之类的项目。这些转换器 (更准确地说是源代码到源代码的编译器) 可以把你写的符合 ECMAScript 6 标准的代码完美地转换为 ECMAScript 5 标准的代码，并且可以确保良好地运行在所有主流 JavaScript 引擎中。
    我们这里目前在使用 Babel，主要是因为它对 ES6 的支持程度比其它同类更高

当然，写在前面的永远是官网的东西，熟练应用才能发挥他的真正功能。因为自己在搭建的时候遇到webpack的很多坑，所以有必要来记录一下。

准备工作必须是已经安装了node

1. thinkjs

1.1 安装

通过下面的命令即可安装 ThinkJS：

npm install thinkjs@2 -g --verbose

如果安装很慢的话，可以尝试使用 taobao 的源进行安装。具体如下：

npm install thinkjs@2 -g --registry=https://registry.npm.taobao.org --verbose

安装完成后，可以通过 thinkjs –version 或 thinkjs -V 命令查看安装的版本。

1.2 创建工程

ThinkJS 安装完成后，就可以通过下面的命令创建项目:

thinkjs new project_path; #project_path为项目存放的目录

如果想用 ES6 特性来开发项目的话，可以创建一个 ES6 模式的项目，具体如下：

thinkjs new project_path --es; #project_path为项目存放的目录

如果能看见类似下面的输出，表示项目创建成功了：

create : demo/
create : demo/package.json
create : demo/.thinkjsrc
create : demo/nginx.conf
create : demo/README.md
create : demo/www/
create : demo/www/index.js
create : demo/app
create : demo/app/common/runtime
create : demo/app/common/config
create : demo/app/common/config/config.js
create : demo/app/common/config/view.js
create : demo/app/common/config/db.js
...
create : demo/app/home/logic
create : demo/app/home/logic/index.js
create : demo/app/home/view
create : demo/app/home/view/index_index.html

enter path:
$ cd demo/

install dependencies:
$ npm install

run the app:
$ npm start

1.3 安装依赖

项目安装后，进入项目目录，执行 npm install 安装依赖，可以使用 taobao 源进行安装。

npm install --registry=https://registry.npm.taobao.org --verbose

1.4 启动项目

在项目目录下执行命令

npm start

如果能看到类似下面的内容，表示服务启动成功。

[2015-09-21 20:21:09] [THINK] Server running at http://127.0.0.1:8360/
[2015-09-21 20:21:09] [THINK] ThinkJS Version: 2.0.0
[2015-09-21 20:21:09] [THINK] Cluster Status: closed
[2015-09-21 20:21:09] [THINK] WebSocket Status: closed
[2015-09-21 20:21:09] [THINK] File Auto Reload: true
[2015-09-21 20:21:09] [THINK] App Enviroment: development

2. React

在创建成功的thinkjs工程中加入React依赖

npm install react react-dom

关于-save和save-dev可以省掉你手动修改package.json文件的步骤。

npm install module-name -save 自动把模块和版本号添加到dependencies部分
npm install module-name -save-dve 自动把模块和版本号添加到devdependencies部分

3. Webpack

React开发和模块管理的主流工具Webpack。Webpack确实是功能最为强大的前端模块管理和打包工具,也就是说React作为组件的UI只有通过编译打包之后才能被html解析显示出来。

3.1 安装

Webpack一般作为全局的npm模块安装：

npm install -g webpack

之后便有了全局的webpack命令，直接执行此命令会默认使用当前目录的webpack.config.js作为配置文件。如果要指定另外的配置文件，可以执行：

webpack —config webpack.custom.config.js

尽管Webpack可以通过命令行来指定参数，但我们通常会将所有相关参数定义在配置文件中。

如果要编译对JSX文件，还需要添加对应的依赖Babel和Babel的一堆插件(babeljs中国)，配置较多，建议添加至package.json文件统一npm install:

"babel-core": "6.x.x",
"babel-preset-es2015":"^6.9.0",
"babel-preset-es2015-loose": "6.x.x",
"babel-preset-react": "^6.5.0",
"babel-preset-stage-0": "^6.5.0",
"babel-preset-stage-1": "6.x.x",
"babel-runtime": "6.x.x",
"babel-cli": "6.x.x",
"babel-eslint": "^4.1.8",
"babel-loader": "^6.2.4",
"babel-plugin-transform-runtime": "6.x.x",

3.2 配置

在工程目录下创建 webpack.config.js 文件

var path = require('path');
var webpack = require('webpack');
module.exports = {
  // entry 入口文件
  entry: './www/static/src/App.jsx',
  // output 编译后的js输出目录及名称
  output: {
    path: path.join(__dirname, '/www/static/js/'),
    filename: 'bundle.js'
  },
  plugins: [
  ],
  //resolve 指定可以被 import 的文件后缀。比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用。
  resolve: {
    extensions: ['', '.js', '.jsx']
  },
  module: {
  //loaders 指定 babel编译后缀名为 .js 或者 .jsx 的文件，这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
    loaders: [
      {
        test: /\.jsx?$/,
        loader: 'babel',
        cacheDirectory: false,
        // query 指定babel的一些插件等
        query: {
          presets: ['react', 'es2015-loose', 'stage-0'],
          plugins: ['transform-runtime']
        },
        exclude: /node_modules/
      },
    ]
  }
}

此时有必要贴一下工程目录图

4. 配置html

修改index_index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>My App</title>
  </head>
  <body>
  <div id="content"></div>
  <script type="text/javascript" src="/static/js/bundle.js"></script></body>
</html>

5. App.jsx

5.1 安装Material UI

使用命令

npm install material-ui

添加react-tap-event-plugin

npm install react-tap-event-plugin

react-tap-event-plugin

Our components use react-tap-event-plugin to listen for touch / tap / clickevents. This dependency is temporary and will go away once the official React version is released. Until then, be sure to inject this plugin at the start of your app.

import injectTapEventPlugin from 'react-tap-event-plugin';

// Needed for onTouchTap
// Check this repo:
// https://github.com/zilverline/react-tap-event-plugin
injectTapEventPlugin();

react-tap-event-plugin provides onTouchTap() to all React Components. It’s a mobile-friendly onClick() alternative for components in Material-UI, especially useful for the buttons.

5.2 修改App.jsx

// 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 MyAwesomeReactComponent from './MyAwesomeReactComponent';

const App = () => (
  <MuiThemeProvider muiTheme={getMuiTheme()}>
    <MyAwesomeReactComponent />
  </MuiThemeProvider>
);

ReactDOM.render(
  <App />,
  document.getElementById('content')
);

5.2 添加组件 MyAwesomeReactComponent.jsx

import React from 'react';
import RaisedButton from 'material-ui/RaisedButton';

const MyAwesomeReactComponent = () => (
<RaisedButton label="Default" />
);

export default MyAwesomeReactComponent;

6. 跑一下

上述所有配置完成后运行命令:

webpack

出现:

Version: webpack 1.13.1
Time: 7151ms
    Asset     Size  Chunks             Chunk Names
bundle.js  1.07 MB       0  [emitted]  main
    + 291 hidden modules

证明编译成功

再启动工程：

npm start


[2016-05-29 01:18:49] [THINK] Server running at http://127.0.0.1:8360/
[2016-05-29 01:18:49] [THINK] ThinkJS Version: 2.2.4
[2016-05-29 01:18:49] [THINK] Cluster Status: closed
[2016-05-29 01:18:49] [THINK] WebSocket Status: closed
[2016-05-29 01:18:49] [THINK] File Auto Compile: false
[2016-05-29 01:18:49] [THINK] File Auto Reload: true
[2016-05-29 01:18:49] [THINK] App Enviroment: development


运行正常，配置成功

git: thinkjs-material-ui

webpack资料:

坚持原创技术分享，您的支持将鼓励我继续创作！