React示例(支持node、ES6、JSX、Webpack)

在 node下搭建起react的示例（支持ES6，JSX），webpack管理。

github源代码

基础准备

# 新建一个项目文件
mkdir react_example
# 进入文件目录
cd react_example
# 初始化node项目
npm init
# JSX,ES6支持
npm install babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
＃ react支持
npm install react react-dom --save-dev
# ES6支持文件
touch .babelrc
#文件中添加{ "presets": ["es2015"] }

安装 Webpack

npm install webpack --save-dev
# webpack-dev-server安装（用作服务器）
npm install webpack-dev-server --save-dev

创建webpack管理文件webpack.config.js

touch webpack.config.js

webpack基本配置如下：
参考淘宝cnpm源

var path = require('path');

module.exports = {
    entry: './entry.js',
    output: {
        path: path.join(__dirname, '/dist'),
        filename: 'bundle.js'
    },
    // # resolve 指定可以被 import 的文件后缀。
    // # 比如 Hello.jsx 这样的文件就可以直接用 import Hello from 'Hello' 引用。
    resolve: {
        extensions: ['', '.js', '.jsx']
    },
    module: {
        // # loaders 指定 babel-loader 编译后缀名为 .js 或者 .jsx 的文件，这样你就可以在这两种类型的文件中自由使用 JSX 和 ES6 了。
        loaders: [
            {
              test: /\.js|jsx$/,
              exclude: /node_modules/,
              loader: 'babel',
              query: {
                presets: ['react', 'es2015']
              }
            }
        ]
    }
}

入口文件

touch entry.jsx

监听编译:

pakckage.json中添加指令

"scripts": {
    "start": "webpack-dev-server --hot --progress --colors",
    "build": "webpack"
  }

执行指令

npm run build
npm run start

项目启动