[React] react+redux+router+webpack+antd环境搭建一版

新建/app/component/FromContent.js

import React from 'react'; import {Modal, Button, Form, Input} from 'antd'; const FormItem = Form.Item; import {increaseAction} from './content01.action'; class FromContent01 extends React.Component { constructor(props) { super(props); this.handleSubmit = (e) => { e.preventDefault(); this.props.form.validateFields((err, values) => { if (!err) { console.log('Received values of form: ', values); this.props.submit(values); } }); } } render() { const {getFieldDecorator} = this.props.form; const {closeModal, date} = this.props; return (

{getFieldDecorator('name', { rules: [{required: true, message: 'Please input your name!'}], })( )} {getFieldDecorator('age', { rules: [{required: true, message: 'Please input your age!'}], })( )} {getFieldDecorator('phone', { rules: [{ required: true, message: 'Please input your phone!', }], })( )} {getFieldDecorator('email', { rules: [{ required: true, message: 'Please input your email!', }], })( )} Log in ) } } const FromContent = Form.create()(FromContent01); export default FromContent;

09.更好的使用redux

redux-freeze运行时报错机制

redux-thunkredux的异步中间件

redux-logger日志中间件

redux-immutable在不可变数据类型中合并reducer

redux-create-reducer使用action和reducer的关联变的简单

关于redux中间件的讲解

安装依赖插件

npm i --save redux-immutable redux-freeze redux-thunk redux-logger immutable redux-create-reducer

修改/app/store/store.js

import {createStore, applyMiddleware, compose} from 'redux'; import {combineReducers} from 'redux-immutable'; import freeze from "redux-freeze" import thunk from 'redux-thunk' import logger from 'redux-logger' import {Map} from 'immutable'; import reducers from './reducers'; let middlewares = []; middlewares.push(thunk); middlewares.push(logger); middlewares.push(freeze); //添加中间件 let middleware = applyMiddleware(...middlewares); //添加redux dev tools,可以在谷歌商城里直接安装工具,搜索名字 middleware = compose(middleware, window.devToolsExtension()); const reducer = combineReducers(reducers); const store = createStore( reducer, Map({}), middleware ); export default store;

新建/app/store/reducers.js

import user from '../components/content01.reducer'; export default { user }

修改/app/component/content01.reducer.js

import {createReducer} from 'redux-create-reducer'; import {fromJS} from 'immutable'; import { ADDONEUSER } from './content01.actions'; const initState = fromJS({ data: [{ name: 'doudou', age: 32, phone: 123456789, email: '123456789@163.com', key: 1, }] }); const handlers = { [ADD_ONE_USER]: (user, action) => { return user.set('data', user.get('data').push(fromJS(action.payload))); } }; export default createReducer(initState, handlers);

修改/app/component/content01.action.js

export const ADDONEUSER = 'ADDONEUSER'; export function addOneUser(value) { return dispatch => { return dispatch({ type: 'ADDONEUSER', payload: value }) } }

修改/app/component/content01.js

const mapStateToProps = (state) => { return { data: state.get('user').get('data'), } }; const mapActionCreators = { addOneUser }; export default connect(mapStateToProps, mapActionCreators)(Content01);

10.优化环境

下载需要的依赖

npm i extract-text-webpack-plugin copy-webpack-plugin clean-webpack-plugin webpack-merge html-webpack-plugin postcss-smart-import postcss-loader precss --save-dev

将webpack.config.js拆分

webpack.common.js

const path = require('path'); const ROOTPATH = path.resolve(__dirname, '.'); module.exports = { context: path.resolve(ROOTPATH, 'app'), resolve: { extensions: ['.js', '.jsx'], //后缀名自动补全,可以使用jsx的文件后缀 modules: [path.resolve(ROOTPATH, "node_modules")], alias: { COMPONENTS_PATH: './components', } }, entry: { app: ['babel-polyfill', './app.js'] }, module: { rules: [ { test: /.(js|jsx)$/, exclude: /(node_modules|bower_components)/, use: { loader: 'babel-loader', options: { presets: ['env', 'react'], } } }, { test: /./*.(gif|png|jpe?g|svg)$/, use: [{ loader: 'url-loader', options: { limit: 10000, name: 'images/[name].[ext]' } }, { loader: 'image-webpack-loader' }] }, { test: /.html$/, use: [{ loader: 'html-loader', options: { minimize: false } }], }, { test: /.(woff|svg|eot|ttf)??./*$/, use: [{ loader: 'url-loader', options: { limit: 50000, } }] } ] }, devServer: { contentBase: path.resolve(ROOTPATH, './app'),//为一个目录下的文件提供本地服务器，在这里设置其所在目录 historyApiFallback: true,//跳转将指向index.html inline: true,//开启自动刷新页面 port: 1234,//设置默认监听端口，如果省略，默认为"8080" hot: true,//开启热替换 }, plugins: [], };

webpack.dev.js

const merge = require('webpack-merge'); const common = require('./webpack.common.js'); const webpack = require('webpack'); const path = require('path'); const ROOTPATH = path.resolve(__dirname, '.'); module.exports = merge(common, { output: { path: path.resolve(ROOTPATH, 'dist'), //打包的文件夹 filename: '[name].js', publicPath: '' }, module: { rules: [ { test: /.css$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader' }], }, { test: /.scss$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'sass-loader', options: { sourceMap: true, outputStyle: 'expanded', sourceMapContents: true } }] }, { test: /.less$/, use: [{ loader: 'style-loader' }, { loader: 'css-loader', options: { sourceMap: true } }, { loader: 'less-loader', options: { sourceMap: true, outputStyle: 'expanded', sourceMapContents: true, } }] }, { test: /index.html/, use: [{ loader: 'file-loader', options: { name: 'index.[ext]' } }] } ] }, plugins: [], });

webpack.pro.js

const path = require('path'); const merge = require('webpack-merge'); const common = require('./webpack.common.js'); const webpack = require('webpack'); const ExtractTextPlugin = require('extract-text-webpack-plugin'); const CleanWebpackPlugin = require('clean-webpack-plugin'); const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin; const HtmlWebpackPlugin = require('html-webpack-plugin'); const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin; const ROOTPATH = path.resolve(dirname, '.'); module.exports = merge(common, { output: { path: path.resolve(ROOTPATH, 'dist'), //打包的文件夹 filename: '[name].[hash].bundle.js', publicPath: '' }, module: { rules: [ { test: /.css$/, use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader']}), }, { test: /.scss$/, use: ExtractTextPlugin.extract({ use: [{ loader: 'css-loader' }, { loader: 'sass-loader' }] }) }, { test: /.less$/, use: ExtractTextPlugin.extract({ use: [{ loader: "css-loader", options: {importLoaders: 1} }, { loader: "postcss-loader" }, { loader: 'less-loader' }] }) }, ] }, plugins: [ new webpack.DefinePlugin({ 'process.env': { NODE_ENV: JSON.stringify('production') } }), new ExtractTextPlugin({ filename: '[name].[contenthash].css', allChunks: true, // don't contain embedded styles }), //加入js压缩的实例 new UglifyJsPlugin({ mangle: { mangle: false }, compress: { sequences: true, dead_code: true, conditionals: true, booleans: true, unused: false, if_return: true, join_vars: true, drop_console: false, warnings: false }, }), new HtmlWebpackPlugin({ title: 'xxx局', filename: path.resolve(ROOTPATH, 'dist/template.html'), // the path to create html template: path.resolve(ROOTPATH, 'app/public/template.html'), //the path of template html, minify: false, // favicon: path.resolve(dirname, 'app/images/cscecfavicon-2.ico') }), new CleanWebpackPlugin(['dist', 'dist.zip', 'dist.rar'], {exclude: ['lib']}), new CommonsChunkPlugin({ name: 'vendor', filename: 'vendor.bundle.js', minChunks: function (module, count) { // any required modules inside nodemodules are extracted to vendor return ( module.resource && /.js$/.test(module.resource) && module.resource.indexOf( path.join(__dirname, './node_modules') ) === 0 ) } }), ], });

创建app/public/template.html

修改package.json

"scripts": { "build": "set NODE_ENV=production&&webpack -p --config webpack.pro.js", "start": "webpack-dev-server --devtool eval --progress --colors --config webpack.dev.js " },

创建postcss.config.js

module.exports = { plugins: [ require('postcss-smart-import')({ //* ...options /*/ }), require('precss')({ //* ...options /*/ }), require('autoprefixer')({ //* ...options /*/ }) ] };

执行npm run build

生成的代码已经进过了分离，压缩，添加了版本号，能够利用缓存提升加载速度

11.在react中使用jsplumb、jquery和jquery-ui。

方法1.ProvidePlugin

自动加载模块，不用再每个组件使用require和import new webpack.ProvidePlugin({ "$": "jquery", "jQuery": "jquery", "window.jQuery": "jquery" })

此时可以使用全局变量$和jQuery了,可以在任意一个组件中

console.log($)就可以看到一个函数

import jp from '../../plugins/jsplumb/jsplumb'; import "jquery-ui/ui/widgets/draggable";

接下来就可以使用jquery和jquery的插件了

$(el).draggable({ helper: "clone", containment: ".js-layout",//设置拖动的范围 scroll: false, cursor: "pointer",//设置拖动光标总是在中心 cursorAt: {top: 30, left: 60}, start: function (ev) { wh = { w: $(this).width() / 2, h: $(this).height() / 2 } }, drag: function (ev) { offset = $(this).offset(); }, stop: function (ev) { console.log('鼠标的位置', {top: ev.clientY, left: ev.clientX}); console.log('拖放元素的位置', {top: offset.top, left: offset.left}); let pos = {x: ev.clientX - offset.left - wh.w - 9, y: ev.clientY - offset.top - wh.h - 100 - 8}; movecb(pos) } });

webpack文档

方法2.expose-loader

使用expose-loader可以暴露全局变量module: { rules: [ { test: require.resolve('jquery'), use: [{ loader: 'expose-loader', options: 'jQuery' }, { loader: 'expose-loader', options: '$' }] }, ] },

此时的效果和方法一的一样webpack文档

使用jquery-ui的方法

使用npm

npm i jquery-ui --save import "jquery-ui/ui/widgets/draggable";

需要一个个引入你需要的方法，也可以做一个总文件进行引入

直接下载

从官网下载jquery-ui，然后放到项目中的一个文件夹下import "../../plugins/jquery-ui"

这样可以直接引入生效，但是打包的文件会大不少

查看文章

webpack多页应用架构系列（四）：老式jQuery插件还不能丢，怎么兼容？Webpack引入jquery及其插件的几种方法

12.开发常用工具

• prop-types
• classnames

附1.依赖

搭建框架

babel 官网 中文网站 api文档

webpack

webpack-dev-server

babel基本

• [babel-cli]
• babel-core 可以对一些代码直接调用Babel的API进行转码
• babel-loader 使babel在webpack中支持
• babel-preset-env 最新的标准版本取代stage0，1，2，3等等
• babel-preset-react 预设包含了所有的 React 插件
• babel-polyfill

babel其他

• babel-plugin-react-transform 任意转换的方式去封装 React 组件
• babel-plugin-transform-object-rest-spread 使对象支持Object rest spread，展开运算符
• babel-plugin-transform-remove-strict-mode 将"use strict"去掉，看需求可用可不用 官网
• babel-plugin-transform-runtime 在 Babel 转换过程中，详细的展示引用的相关辅助工具和内置命令，并自动的聚合填充你的代码而不会污染全局

react

react

react-router

react-router

[react-router-dom]

redux

redux

react-redux

redux-freeze运行时报错机制

redux-thunkredux的异步中间件

redux-logger日志中间件

redux-immutable在不可变数据类型中合并reducer

redux-create-reducer使用action和reducer的关联变的简单

关于redux中间件的讲解

ant-design

在react.js上使用antd-design

antd-design

babel-plugin-import 用于antd按需加载

loader

less-loader

css-loader

style-loader

babel-polyfill

[file-loader]

[url-loader]

[image-webpack-loader]

html-webpack-plugin

[extract-text-webpack-plugin] 将css单独打包