1.1 项目技术

a. 使用react全家桶 + es6 + webpack + antd-mobile

b. 采用模块化、组件化、工程化

c. Node + express + mongodb + socketIO

1.2 开始项目

项目源码设计

1.2.1 移动端在处理点击事件的时候，会有300毫秒的延迟。恰恰是这300毫秒的延迟，会让人有一种卡顿的体验。所以在index.html中引入插件fastclick

<script>if ('addEventListener' in document) {document.addEventListener('DOMContentLoaded', function() {FastClick.attach(document.body);}, false);}if(!window.Promise) {document.writeln('<script src="https://as.alipayobjects.com/g/component/es6-promise/3.2.2/es6-promise.min.js"'+'>'+'<'+'/'+'script>');}
复制代码

2 组件打包

2.1 安装依赖

npm install --save-dev babel-plugin-import react-app-rewired
复制代码

2.2 在更目录下建立 config-overrides.js

const {injectBabelPlugin} = require('react-app-rewired');module.exports = function override(config, env) {config = injectBabelPlugin(['import', {libraryName: 'antd-mobile', style: 'css'}],config);return config;}
复制代码

修改配置: package.json

"scripts": {"start": "react-app-rewired start","build": "react-app-rewired build","test": "react-app-rewired test --env=jsdom","eject": "react-scripts eject"}
复制代码

在index.js中写入

import React from 'react'import ReactDOM from 'react-dom'import {Button} from 'antd-mobile'ReactDOM.render(<Buttontype='primary'>招聘</Button>,document.getElementById('root'))
复制代码

2.3 将主体的背景颜色从 blue 变为 green

添加less-loader要加上版本@2.7.3，否则会加载最新版本， 电脑无法运行

npm install --save-dev less@2.7.3 less-loader
复制代码

配置: config-overrides.js

const {injectBabelPlugin, getLoader} = require('react-app-rewired');const fileLoaderMatcher = function (rule) {return rule.loader && rule.loader.indexOf(`file-loader`) != -1;
}module.exports = function override(config, env) {// babel-plugin-importconfig = injectBabelPlugin(['import', {libraryName: 'antd-mobile',//style: 'css',style: true, // use less for customized theme}], config);// customize themeconfig.module.rules[1].oneOf.unshift({test: /\.less$/,use: [require.resolve('style-loader'),require.resolve('css-loader'),{loader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https://github.com/facebookincubator/create-react-app/issues/2677ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},{loader: require.resolve('less-loader'),options: {// theme vars, also can use theme.js instead of this.modifyVars: {"@brand-primary": "#1cae82", // 正常"@brand-primary-tap": "#1DA57A", // 按下},},},]});// css-modulesconfig.module.rules[1].oneOf.unshift({test: /\.css$/,exclude: /node_modules|antd-mobile\.css/,use: [require.resolve('style-loader'),{loader: require.resolve('css-loader'),options: {modules: true,importLoaders: 1,localIdentName: '[local]___[hash:base64:5]'},},{loader: require.resolve('postcss-loader'),options: {// Necessary for external CSS imports to work// https://github.com/facebookincubator/create-react-app/issues/2677ident: 'postcss',plugins: () => [require('postcss-flexbugs-fixes'),autoprefixer({browsers: ['>1%','last 4 versions','Firefox ESR','not ie < 9', // React doesn't support IE8 anyway],flexbox: 'no-2009',}),],},},]});// file-loader excludelet l = getLoader(config.module.rules, fileLoaderMatcher);l.exclude.push(/\.less$/);return config;
};复制代码

结语 后续更新中...

完整项目地址：github.com/hongzhengzh…