关于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 { ADD_ONE_USER } 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 ADD_ONE_USER = 'ADD_ONE_USER'; export function addOneUser(value) { return dispatch => { return dispatch({ type: 'ADD_ONE_USER', 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', 'http://www.likecs.com/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: '中建八局', 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/cscec_favicon-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 node_modules 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