├── .gitignore
├── index.html
├── src
├── client.js
├── app.js
└── server.js
├── index.production.html
├── readme.md
├── webpack-dev-server.js
├── package.json
├── webpack.config.js
└── webpack.config.production.js
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | *.log
3 | .DS_Store
4 | build
5 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
--------------------------------------------------------------------------------
/src/client.js:
--------------------------------------------------------------------------------
1 | import ReactDom from 'react-dom';
2 | import React from 'react';
3 | import App from './app';
4 |
5 | ReactDom.render(
6 | ,
7 | document.getElementById('root')
8 | )
9 |
--------------------------------------------------------------------------------
/src/app.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class App extends Component {
4 | render() {
5 | return (
6 | Hi!
7 | )
8 | }
9 | }
10 |
--------------------------------------------------------------------------------
/index.production.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
1 | # Readme
2 |
3 | 最简react运行环境，仅供初学者学习使用。
4 |
5 | ## Install
6 |
7 | ```
8 | npm install
9 | ```
10 | ## Run
11 |
12 | ```
13 | npm start
14 |
15 | ```
16 |
17 | visit http://localhost:3000
18 |
19 | ## build
20 |
21 | ```
22 | npm run build
23 |
24 | ```
25 |
26 | open ./index.production.html
27 |
--------------------------------------------------------------------------------
/src/server.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 | const express = require('express');
3 | const server = express();
4 | const PORT = process.env.PORT || 3000;
5 | const IP = '0.0.0.0';
6 |
7 | server.use('/', express.static('./'));
8 |
9 | server.listen(PORT, IP, () => {
10 | console.log(`server start at ${IP}:${PORT}`);
11 | });
12 |
--------------------------------------------------------------------------------
/webpack-dev-server.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var WebpackDevServer = require('webpack-dev-server');
3 | var config = require('./webpack.config');
4 | var shell = require('shelljs');
5 |
6 | new WebpackDevServer(webpack(config), {
7 | publicPath: config.output.publicPath,
8 | hot: true,
9 | historyApiFallback: true,
10 | proxy: {
11 | '*': { target: 'http://localhost:3001' }
12 | }
13 | }).listen(3000, function () {
14 | shell.env.PORT = shell.env.PORT || 3001;
15 | shell.exec('npm run nodemon src/server.js -e js,jsx', function () {});
16 | console.log('Webpack Dev Server listening on port 3000');
17 | });
18 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "react-tiny-env",
3 | "version": "1.0.0",
4 | "description": "",
5 | "main": "src/server.js",
6 | "scripts": {
7 | "nodemon": "nodemon",
8 | "build": "webpack --config webpack.config.production.js",
9 | "start": "node webpack-dev-server.js"
10 | },
11 | "author": "",
12 | "license": "MIT",
13 | "dependencies": {
14 | "express": "^4.13.3",
15 | "react": "^0.14.3",
16 | "react-dom": "^0.14.3"
17 | },
18 | "devDependencies": {
19 | "babel-core": "^6.3.17",
20 | "babel-loader": "^6.2.0",
21 | "babel-preset-es2015": "^6.3.13",
22 | "babel-preset-react": "^6.3.13",
23 | "babel-preset-react-hmre": "^1.0.1",
24 | "nodemon": "^1.8.1",
25 | "shelljs": "^0.5.3",
26 | "webpack": "^1.12.9",
27 | "webpack-dev-server": "^1.14.0"
28 | }
29 | }
30 |
--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | debug: true,
6 | entry: [
7 | 'webpack-dev-server/client?http://localhost:3000',
8 | 'webpack/hot/only-dev-server',
9 | './src/client.js'
10 | ],
11 | output: {
12 | path: path.join(__dirname, '/build'),
13 | filename: "bundle.js",
14 | publicPath: '/build/'
15 | },
16 | module: {
17 | loaders: [
18 | {
19 | test: /\.(js|jsx)$/,
20 | exclude: /node_modules/,
21 | loader: 'babel',
22 | query: {
23 | presets: ["es2015", "react", "react-hmre"]
24 | }
25 | }
26 | ]
27 | },
28 | devtool: 'inline-source-map',
29 | plugins: [
30 | new webpack.HotModuleReplacementPlugin()
31 | ]
32 | };
33 |
--------------------------------------------------------------------------------
/webpack.config.production.js:
--------------------------------------------------------------------------------
1 | var webpack = require('webpack');
2 | var path = require('path');
3 |
4 | module.exports = {
5 | entry: [
6 | './src/client.js'
7 | ],
8 | output: {
9 | path: path.join(__dirname, '/build'),
10 | filename: "bundle.min.js"
11 | },
12 | module: {
13 | loaders: [
14 | {
15 | test: /\.(js|jsx)$/,
16 | exclude: /node_modules/,
17 | loader: 'babel',
18 | query: {
19 | presets: ["es2015", "react"]
20 | }
21 | }
22 | ]
23 | },
24 | externals: {
25 | "react": "React",
26 | "react-dom": "ReactDOM"
27 | },
28 | devtool: 'source-map',
29 | plugins: [
30 | new webpack.DefinePlugin({
31 | 'process.env': {
32 | NODE_ENV: JSON.stringify('production')
33 | }
34 | }),
35 | new webpack.optimize.DedupePlugin(),
36 | new webpack.optimize.UglifyJsPlugin({
37 | compress: {
38 | warnings: false
39 | }
40 | })
41 | ]
42 | };
43 |
--------------------------------------------------------------------------------