过去的一年里公司项目需要兼容IE8(主要是一些后台管理系统,所以也无需考虑SEO),技术路线选择了React,但是只能使用 react 0.14 版本来实现。经过了几个多页面项目的摸索,对其中涉及的注意点做个总结。
相关技术栈:webpack
+ react
+ react-router
+ @rematch/core
+ axios
+ antd
+ echarts
+ stompjs-websocket
+ sockjs-client
项目中业务相关的依赖
- echarts 绘制图表
- stompjs-websocket 和 sockjs-client 用于连接 RabbitMQ 消息服务
- moment 处理日期时间
环境搭建
大部分依赖版本都需要调整,直接使用最新版会无法兼容IE8。
因此只能基于 webpack
手动搭建项目。
建议 Node.js 版本使用10.x,否则部分依赖无法正常运行
此处我使用的是 10.16.3
package.json
文件一览
{
"name": "my-project",
"version": "1.3.0",
"description": "",
"main": "index.js",
"scripts": {
"start": "webpack-dev-server --watch-poll --hot --inline --progress",
"build": "webpack --config webpack.prod.config.js",
"test": "echo \"Error: no test specified\" && exit 1",
"ie": "webpack --config webpack.ie.config.js"
},
"keywords": [
"react",
"ie8"
],
"author": "",
"license": "ISC",
"devDependencies": {
"autoprefixer": "^7.2.4",
"babel-core": "^6.26.0",
"babel-loader": "^6.4.1",
"babel-plugin-import": "^1.11.0",
"babel-polyfill": "^6.26.0",
"babel-preset-env": "^1.6.1",
"babel-preset-react": "^6.24.1",
"clean-webpack-plugin": "^0.1.17",
"copy-webpack-plugin": "^3.0.1",
"css-loader": "^0.28.8",
"es3ify-loader": "^0.2.0",
"es3ify-webpack-plugin": "0.0.1",
"es5-shim": "^4.5.13",
"export-from-ie8": "^1.0.5",
"extract-text-webpack-plugin": "1.0.1",
"file-loader": "^1.1.6",
"html-webpack-plugin": "^2.30.1",
"less": "^3.10.3",
"less-loader": "^5.0.0",
"node-sass": "^4.12.0",
"postcss-loader": "0.8.2",
"resolve-url-loader": "^3.1.0",
"sass-loader": "^7.1.0",
"style-loader": "^0.19.1",
"url-loader": "^0.6.2",
"webpack": "^1.15.0",
"webpack-dev-server": "^1.16.5"
},
"dependencies": {
"@rematch/core": "^1.1.0",
"antd": "1.11.6",
"axios": "^0.18.0",
"dom-align": "^1.6.7",
"echarts": "^4.2.1",
"moment": "^2.24.0",
"rc-align": "^2.3.6",
"react": "0.14.9",
"react-dom": "0.14.8",
"react-redux": "^4.4.10",
"react-router": "2.3.0",
"sockjs-client": "^1.3.0",
"stompjs-websocket": "^4.1.7"
}
}
dependencies
中对 antd
的相关依赖(dom-align
和 rc-align
)做了版本降级处理,以便兼容IE8。
-
项目目录结构
- public/ #模板资源目录 - resources/ #CDN资源本地化目录 - favicon.ico - index.html - src - api/ #http请求相关 - config.js #axios配置 - const.js #请求常量配置 - method.js #请求方法封装 - components/ #组件 - routes/ #路由管理 - static/ #静态资源 - css/ - images/ - js/ - const.js #数据常量管理 - polyfill.js #兼容方法封装 - store/ #rematch数据仓库 - utils/ - dateTool.js #日期处理函数 - funcTool.js #工具函数 - views/ #页面视图(每个文件夹对应一个入口对应的页面) - index.js - login.js - .babelrc - .gitignore - .npmrc - package.json - package-lock.json - README.md - webpack.config.js - webpack.prod.config.js - webpack.ie.config.js
-
webpack
配置
-
webpack
开发环境配置const webpack = require('webpack'), path = require('path'), HtmlWebpackPlugin = require('html-webpack-plugin'), CleanWebpackPlugin = require('clean-webpack-plugin'), autoprefixer = require('autoprefixer'), es3ifyPlugin = require('es3ify-webpack-plugin'); const ROOT_PATH = path.resolve(__dirname); const PUBLIC_PATH = path.resolve(ROOT_PATH, 'public'); const SRC_PATH = path.resolve(ROOT_PATH, 'src'); const BUILD_PATH = path.resolve(ROOT_PATH, 'build'); module.exports = { entry: { index: path.resolve(SRC_PATH, './index.js'), login: path.resolve(SRC_PATH, './login.js'), }, output: { path: BUILD_PATH, filename: 'assets/js/[name].[hash:8].js', chunkFilename: 'assets/js/[name].[hash:8].chunk.js' }, resolve: { extensions: ['', '.js', '.jsx'] }, module: { loaders: [ { test: /\.(js|jsx)(\?.*$|$)/, loader: 'babel-loader?cacheDirectory', exclude: /node_modules/, include: path.resolve('src') }, { test: /\.(png|jpg|jpeg|gif)(\?.*$|$)/, loader: 'url-loader?limit=5000&name=assets/images/[name].[hash:8].[ext]' }, { test: /\.(eot|woff|woff2|ttf|svg)(\?.*$|$)/, loader: 'url-loader?limit=5000&name=assets/fonts/[name].[hash:8].[ext]' }, { test: /\.css$/, loader: 'style-loader!css-loader' }, { test: /\.scss$/, loader: 'style-loader!css-loader!postcss-loader!resolve-url-loader!sass-loader?sourceMap' }, { test