├── .eslintignore ├── .gitignore ├── scripts ├── colors.js ├── index.js └── App.js ├── index.html ├── server.js ├── .eslintrc ├── .babelrc ├── webpack.config.dev.js ├── webpack.config.pro.js ├── package.json └── README.md /.eslintignore: -------------------------------------------------------------------------------- 1 | dist/* 2 | node_modules/* 3 | **/node_modules/* -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | .idea 3 | npm-debug.log 4 | dist -------------------------------------------------------------------------------- /scripts/colors.js: -------------------------------------------------------------------------------- 1 | export const NICE = 'tomato'; 2 | export const SUPER_NICE = 'green'; 3 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Title 6 | 7 | 8 |

9 | 10 | 11 | -------------------------------------------------------------------------------- /scripts/index.js: -------------------------------------------------------------------------------- 1 | /** 2 | * Created by minooo on 2016/3/9. 3 | */ 4 | import React from 'react'; 5 | import {render} from 'react-dom'; 6 | import App from './App'; 7 | 8 | render( 9 | , 10 | document.getElementById('root') 11 | ); 12 | 13 | -------------------------------------------------------------------------------- /server.js: -------------------------------------------------------------------------------- 1 | var webpack = require('webpack'); 2 | var WebpackDevServer = require('webpack-dev-server'); 3 | var config = require('./webpack.config.dev.js'); 4 | 5 | new WebpackDevServer(webpack(config), { 6 | publicPath: config.output.publicPath, 7 | hot: true, 8 | historyApiFallback: true 9 | }).listen(5000, 'localhost', function (err) { 10 | if (err) { 11 | console.log(err); 12 | } 13 | console.log('Listening at localhost:5000'); 14 | }); -------------------------------------------------------------------------------- /.eslintrc: -------------------------------------------------------------------------------- 1 | { 2 | "ecmaFeatures": { 3 | "jsx": true, 4 | "modules": true 5 | }, 6 | "env": { 7 | "browser": true, 8 | "es6": true, 9 | "node": true 10 | }, 11 | "parser": "babel-eslint", 12 | "rules": { 13 | "quotes": [2, "single"], 14 | "strict": [2, "never"], 15 | "babel/generator-star-spacing": 1, 16 | "babel/new-cap": 1, 17 | "babel/object-shorthand": 1, 18 | "babel/arrow-parens": 1, 19 | "babel/no-await-in-loop": 1, 20 | "react/jsx-uses-react": 2, 21 | "react/jsx-uses-vars": 2, 22 | "react/react-in-jsx-scope": 2 23 | }, 24 | "plugins": [ 25 | "babel", 26 | "react" 27 | ] 28 | } -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["es2015", "stage-0", "react"], 3 | "env": { 4 | "development": { 5 | "plugins": [ 6 | "transform-runtime", 7 | ["react-transform", { 8 | "transforms": [ 9 | { 10 | "transform" : "react-transform-hmr", 11 | "imports" : ["react"], 12 | "locals" : ["module"] 13 | }, 14 | { 15 | "transform": "react-transform-catch-errors", 16 | "imports": ["react", "redbox-react"] 17 | } 18 | ] 19 | }] 20 | ] 21 | } 22 | } 23 | } -------------------------------------------------------------------------------- /webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 开发模式的配置 3 | * */ 4 | 5 | var webpack = require('webpack'); 6 | var path = require('path'); 7 | 8 | module.exports = { 9 | entry: [ 10 | 'webpack-dev-server/client?http://localhost:5000', 11 | 'webpack/hot/dev-server', 12 | './scripts/index' 13 | ], 14 | output: { 15 | path: __dirname, 16 | filename: 'bundle.js', 17 | publicPath: '/dist/' 18 | }, 19 | resolve: { 20 | extensions: ['', '.js'] 21 | }, 22 | devtool: 'eval-source-map', 23 | plugins: [ 24 | new webpack.HotModuleReplacementPlugin(), 25 | new webpack.NoErrorsPlugin() 26 | ], 27 | module: { 28 | loaders: [ 29 | { 30 | test: /\.jsx?$/, 31 | loaders: ['babel'], 32 | include: path.join(__dirname, 'scripts') 33 | } 34 | ] 35 | } 36 | }; -------------------------------------------------------------------------------- /webpack.config.pro.js: -------------------------------------------------------------------------------- 1 | /* 2 | * 生产模式配置 3 | * */ 4 | var webpack = require('webpack'); 5 | var path = require('path'); 6 | 7 | module.exports = { 8 | entry: './scripts/index', 9 | output: { 10 | path: path.join(__dirname, 'dist'), 11 | filename: 'bundle.js', 12 | publicPath: '/' 13 | }, 14 | resolve: { 15 | extensions: ['', '.js'] 16 | }, 17 | devtool: 'source-map', 18 | plugins: [ 19 | new webpack.optimize.OccurenceOrderPlugin(), 20 | new webpack.DefinePlugin({ 21 | 'process.env': { 22 | 'NODE_ENV': JSON.stringify('production') 23 | } 24 | }), 25 | new webpack.optimize.UglifyJsPlugin({ 26 | compress: { 27 | warnings: false 28 | } 29 | }) 30 | ], 31 | module: { 32 | loaders: [ 33 | { 34 | test: /\.jsx?$/, 35 | loaders: ['babel'], 36 | include: path.join(__dirname, 'scripts') 37 | } 38 | ] 39 | } 40 | }; -------------------------------------------------------------------------------- /scripts/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import { NICE, SUPER_NICE } from './colors'; 3 | 4 | class Counter extends Component { 5 | constructor(props) { 6 | super(props); 7 | this.state = { counter: 0 }; 8 | this.interval = setInterval(() => this.tick(), 1000); 9 | } 10 | 11 | tick() { 12 | this.setState({ 13 | counter: this.state.counter + this.props.increment 14 | }); 15 | } 16 | 17 | componentWillUnmount() { 18 | clearInterval(this.interval); 19 | } 20 | 21 | render() { 22 | return ( 23 |

24 | Counter ({this.props.increment}): {this.state.counter} 25 |

26 | ); 27 | } 28 | } 29 | 30 | export default class App extends Component { 31 | render() { 32 | return ( 33 |

34 | 35 | 36 |

37 | ); 38 | } 39 | } -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "webpack-es6-react", 3 | "version": "1.0.0", 4 | "description": "webpack-es6-react for learn", 5 | "main": "index.js", 6 | "scripts": { 7 | "start": "node server.js", 8 | "build": "set BABEL_ENV=production && webpack --config webpack.config.pro.js --progress", 9 | "lint": "eslint scripts" 10 | }, 11 | "repository": { 12 | "type": "git", 13 | "url": "git+https://github.com/minooo/webpack-es6-react.git" 14 | }, 15 | "keywords": [ 16 | "webpack", 17 | "es6", 18 | "react" 19 | ], 20 | "author": "minooo", 21 | "license": "ISC", 22 | "bugs": { 23 | "url": "https://github.com/minooo/webpack-es6-react/issues" 24 | }, 25 | "homepage": "https://github.com/minooo/webpack-es6-react#readme", 26 | "devDependencies": { 27 | "babel-core": "^6.6.5", 28 | "babel-eslint": "^5.0.0", 29 | "babel-loader": "^6.2.4", 30 | "babel-plugin-react-transform": "^2.0.2", 31 | "babel-plugin-transform-runtime": "^6.6.0", 32 | "babel-preset-es2015": "^6.6.0", 33 | "babel-preset-react": "^6.5.0", 34 | "babel-preset-stage-0": "^6.5.0", 35 | "eslint": "^1.10.3", 36 | "eslint-plugin-babel": "^3.1.0", 37 | "eslint-plugin-react": "^4.2.1", 38 | "react-transform-catch-errors": "^1.0.2", 39 | "react-transform-hmr": "^1.0.4", 40 | "redbox-react": "^1.2.2", 41 | "webpack": "^1.12.14", 42 | "webpack-dev-server": "^1.14.1" 43 | }, 44 | "dependencies": { 45 | "babel-runtime": "^6.6.1", 46 | "react": "^0.14.7", 47 | "react-dom": "^0.14.7" 48 | } 49 | } 50 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 本项目已作废，替代项目为 [React-Study](https://github.com/minooo/React-Study)，欢迎交流学习。 2 | 这是一个基础的，综合了webpack，es6，react的学习模板。 3 | > 4 | > 本模板也方便你对 react 生态圈中其他相关知识的学习，比如你想学习 `react-router`,`redux` 或是 `css-modules`都可以以此模板为基础进行延伸学习。甚至，你可以单纯的来学习es6! 5 | 6 | # webpack-es6-react 7 | 本模板应用了以下技术 8 | 9 | - [React](https://github.com/facebook/react) 10 | - [Babel 6](http://babeljs.io/) 11 | - [Webpack](http://webpack.github.io/) 我们的构建工具 12 | - [Webpack Dev Server](http://webpack.github.io/docs/webpack-dev-server.html) 13 | - [React Transform](https://github.com/gaearon/react-transform-hmr) 可以让 React 组件局部自动实时更新（而不是刷新页面） 14 | 15 | ## Demo 16 | 17 | ![react-transform-boilerplate](https://raw.githubusercontent.com/minooo/test/master/demo.gif) 18 | 19 | ## 使用方法 20 | ``` 21 | git clone https://github.com/minooo/webpack-es6-react.git 22 | cd webpack-es6-react 23 | npm install 24 | npm start 25 | 打开 http://localhost:5000/ 26 | ``` 27 | 28 | > 注意：package.json 的 scripts 中内置了三个命令 29 | > - `start` 用于开发模式，方便调试，撸码。 30 | > - `build` 开发完毕后，就可以打包文件了。 31 | > - `lint` 检测你的js代码是否规范。 32 | 33 | 34 | ## package.json 中的包/库部分说明 35 | - `babel-core` babel6 的基础模块 36 | - `babel-eslint` [ESLint](https://github.com/eslint/eslint) 是前端JS代码检测利器。而 [babel-eslint](http://npm.taobao.org/package/babel-eslint) 则允许你检测所有的 Babel 代码。 37 | - `babel-loader` 这个包允许你使用 Babel 和 webpack 转译（Transpiling） JavaScript 文件。 38 | - `babel-plugin-react-transform` 这个插件通过任意转换的方式去封装 React 组件。换句话说，你可以随心所欲的摆弄你的组件了。 39 | - `babel-plugin-transform-runtime` 在 Babel 转换过程中，详细的展示引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局。 40 | - `babel-preset-es2015` 此预设包含了所有的 es2015 插件。 41 | - `babel-preset-react` 此预设包含了所有的 React 插件。 42 | - `babel-preset-stage-0` 此预设包含了 stage 0 中的所有插件。 43 | - `eslint` JavaScript 语法检测利器：分析出你代码潜在的错误和非标准用法。 44 | - `eslint-plugin-react` ESLint 中关于 React 语法检测的插件。 45 | - `react-transform-hmr` 一个 React 转换装置，该装置通过引用 Hot Module Replacement API 使热重载 React 的类成为可能。 46 | - `react-transform-catch-errors` 呈现你 React 组件的错误信息。 47 | - `webpack-dev-server` 为 wepack app 提供一个服务器，如果你的代码有任何变化，浏览器将自动刷新显示，极大的方便前期开发。 48 | - `babel-runtime` Babel 自带的运行环境。 49 | 50 | ## 根目录下文件部分说明 51 | - `.babelrc` : 什么是 `.babelrc` 文件呢？熟悉 linux 的同学一定知道，rc 结尾的文件通常代表运行时自动加载的文件，配置等。同样在这里也是有同样作用的。里面的 `env` 字段，可以对 BABEL_ENV 或 NODE_ENV 指定不同的环境变量，进行不同编译。 52 | - `eslintignore` 通知 `eslint` 忽略那些不应该被检测的文件。 53 | - `eslintrc` eslint 配置文件，使 JavaScript 代码规范化，标准化书写。 54 | --------------------------------------------------------------------------------