基于React Webpack的前端开发方案

主要内容

前端框架选择
打包方案
开发流程方案
组件复用方案
干货时间
一些思考

前端框架选择

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

GitHub Star 60635 (2017.2.26)

Example

Life Cycle

React只负责UI部分

程序状态如何维护？

Store

程序如何操作Store中的数据？

Flux

Redux is a predictable state container for JavaScript apps

GitHub Star 29455 (2017.2.26)

相关开发者工具

Redux DevTools

打包方案

Farewell seajs！

Hello webpack2!

node v6.9.5

nvm

nvm-windows

Entry

Output

Loaders

Plugins

const webpack = require('webpack'); //to access built-in plugins
const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin()
  ]
};

module.exports = config;

Example

开发流程方案

Farewell JDF！

Hello npm scripts!

开发流程方案