react技术栈升级的过程

最新推荐文章于 2024-09-13 08:33:26 发布
最新推荐文章于 2024-09-13 08:33:26 发布
阅读量110 收藏
点赞数
文章标签： javascript webpack json ViewUI
原文链接：https://segmentfault.com/a/1190000016357380
版权

第一阶段：

react15+react-router2+redux3+webpack1 升级到 react16+react-router3+redux4+webpack4

1.react15升级到16 遇到的坑：
在react16中去除contextTypes ，导致this.context.router.push('/*') 需要替换成
this.props.router.push('/*') 。
2.webpack1升级到4遇到的坑：
（1）webpack4 中建议使用min-css-extract-plugin 分离css，sass等文件，取代插件extract-text-webpack-plugin 效率更高
（2）html-webpack-plugin 要升级到2.22.0及以上
（3）webpack4将webpack.optimize.CommonsChunkPlugin移除，使用和entry平级的optimization里的属性splitChunks来把提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html文件中没有，前提必须是mode=prodution 才生效。
（4）webpack4中把内置的webpack.DefinePlugin({'process.env':{NODE_ENV:JSON.stringify("development")}})去掉，添加了和entry平级的mode属性，来区分环境。
mode的value有none/development/production 这3中属性，若要在系统中使用，则用"process.env.NODE_ENV"变量来获取，比较奇葩。
（5）entry的路径原来的path.resolve(path.resolve(path.resolve(path.resolve(__dirname)),'src')，'app') 应替换为相对路径的'./src/App.jsx'。
（6）output的路径原来的
path.resolve(path.resolve(__dirname),"dist") 应替换为 path.join(path.join(__dirname),"dist")。
3. 最终的不同环境配置文件如下：
开发环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchao/dist';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    devtool: '#eval-source-map',
    stats: {
        children: true
    },
    mode:"development",
    entry:{
        app:APP_FILE
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

sit环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchaoSit/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

uat环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchaoUat/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

生产环境：

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin'); //生成html
const MiniCssExtractPlugin = require("mini-css-extract-plugin");//打包css

const APP_FILE = './src/App.jsx'; //根目录文件app.jsx地址
const PUBLIC_PATH = '/huishangchao/dist/';
const ROOT_PATH = path.join(__dirname);
const SRC_PATH = path.join(__dirname, 'src');
const BUILD_PATH = path.join(ROOT_PATH,PUBLIC_PATH); //发布文件所存放的目录

module.exports = {
    stats: {
        children: true
    },
    mode:"production",
    entry: {
        app: APP_FILE,
        common: [
            "react",
            'react-dom',
            'react-router',
            'redux',
            'react-redux',
            'redux-thunk'
        ]
    },
    output: {
        publicPath: PUBLIC_PATH, //编译好的文件，在服务器的路径,这是静态资源引用路径
        path:BUILD_PATH , //编译到当前目录
        filename: '[name].js', //编译后的文件名字
        chunkFilename: 'js/[name].[chunkhash:5].min.js',
    },
    module: {
        rules: [
            {
                test: /\.(scss|css)$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    'postcss-loader',
                    'sass-loader',
                ],
                include: SRC_PATH, //限制范围，提高打包速度
                exclude: /node_modules/
            },
            {
                test:/\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader"
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: [{
                    loader: 'url-loader',
                    options: { // 这里的options选项参数可以定义多大的图片转换为base64
                        limit: 50000, // 表示小于50kb的图片转为base64,大于50kb的是路径
                        outputPath: 'images' //定义输出的图片文件夹
                    }
                }]
            }]
    },
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                NODE_ENV: JSON.stringify('production') //定义编译环境
            }
        }),
        new MiniCssExtractPlugin({
            filename: "[name].css",
            chunkFilename: "css/[name].[hash:6].css",
        }),
        new HtmlWebpackPlugin({  //根据模板插入css/js等生成最终HTML
            filename: '../index.html', //生成的html存放路径，相对于 path
            template: './src/template/index.html', //html模板路径
            inject: 'body',
            hash: true,
        })
    ],
    optimization: {
        //提取出来的样式和common.js会自动添加进发布模式的html文件中，原来的html没有
        splitChunks: {
            cacheGroups: {
                commons: {
                    name: "commons",
                    chunks: "initial",
                    minChunks: 2
                }
            }
        }
    },
    resolve: {
        extensions: ['*','.js', '.jsx', '.less', '.scss', '.css'], //后缀名自动补全
    }
};

4.升级后的package.json文件：

{
  "name": "hsc",
  "version": "1.0.0",
  "description": "hsc",
  "main": "index.html",
  "scripts": {
    "dev": "node server.js",
    "sit": "webpack --config webpack.config.sit.js --progress --colors --watch -p",
    "uat": "webpack --config webpack.config.uat.js --progress --colors --watch -p",
    "dist": "webpack --config webpack.config.dist.js --progress --colors --watch -p"
  },
  "repository": {
    "type": "",
    "url": ""
  },
  "author": "cheer",
  "license": "ISC",
  "bugs": {
    "url": ""
  },
  "homepage": "",
  "dependencies": {
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router": "3.2.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0",
    "@babel/preset-env": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "ajv": "^6.0.0",
    "autoprefixer-loader": "^3.2.0",
    "babel-core": "^6.26.3",
    "babel-loader": "^8.0.2",
    "babel-plugin-transform-class-properties": "^6.24.1",
    "clipboard": "^2.0.1",
    "css-loader": "^1.0.0",
    "express": "^4.16.3",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "isomorphic-fetch": "^2.2.1",
    "jsx-loader": "^0.13.2",
    "mini-css-extract-plugin": "^0.4.2",
    "node-sass": "^4.9.3",
    "postcss-loader": "^3.0.0",
    "promise-polyfill": "^8.1.0",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.0",
    "url-loader": "^1.1.1",
    "webpack": "^4.17.2",
    "webpack-cli": "^3.1.0",
    "webpack-dev-middleware": "^3.2.0",
    "webpack-dev-server": "^3.1.7"
  },
  "browserslist": [
    "defaults",
    "not ie < 11",
    "last 2 versions",
    "> 1%",
    "iOS 7",
    "last 3 iOS versions"
  ]
}
weixin_33881140
关注
react-这个脚手架工程模板用于快速启动基于ReactWebpack为技术栈的前端项目
08-15
React-Hot-Loader 3则是一个让React组件在开发过程中热重载的工具，它可以实时更新代码而无需刷新整个页面，极大地提高了开发效率。 Ant Design是阿里巴巴开源的一套React UI组件库，它提供了丰富的UI样式和组件，...
在2020年提升React应用性能的10条技巧
weixin_26717681的博客
08-25 555
There are different ways of solving the same problem when it comes to programming — whether it be JavaScript, React, Python, or any other language. When you look into someone else’s code, there is alw...
React Native Demo
02-22
React Native的核心理念是“Learn Once, Write Everywhere”，即学习一套技术栈，就能在多个平台上进行开发。 在这个React Native Demo中，你可能会发现以下关键知识点： 1. **组件化开发**：React Native借鉴了...
携程技术2020.pdf
03-11
以大前端为例，在支撑Ctrip/Trip不同多变的业务场景的过程中，建立了前端工程、多端架构、智能化等多个基础技术体系，并对React Native技术栈不断演进和升级，优化用户体验的一致性，提升多技术方案间组件的通用性和...
ReactNative
02-14
ReactNative的核心理念是“Learn once, write anywhere”，即开发者只需掌握一套技术栈，就能编写跨平台的应用程序。 **React Native的关键特性：** 1. **组件化开发**：React Native沿用了React.js的组件化思想，...
native-audiobook-player:使用react-native的有声读物播放器
05-12
五、技术栈与工具 1. **React-Native**：基础框架，负责UI渲染和事件处理。 2. **JavaScript**：编写业务逻辑和交互逻辑的主要语言。 3. **Audio模块**：React-Native内置，用于处理音频播放。 4. **第三方库**：...
软件著作权申请教程（超详细）（2024新版）软著申请
m0_75269526的博客
09-09 2792
软件著作权，软著，软著申请，软用户使用手册：提交登记软件的任何一种文档的连续的前30页和连续的后30页，每页不少于30行。如果是多人合作开发著作权人不是一个人的话，还需要准备一份合作开发协议。首先我们需要在官网里面注册一个账号，并且完成实名认证，一般是注册【个人】的身份。合作开发协议书：这个如果是著作权人有多个（多个人一起开发）就需要提供这个材料。在填报完成之后需要打印一个签章页签字（如果不是个人需要盖章）注册完成后点击下面进行登记，如果没有实名需要先实名认证（源代码：源程序前连续的30页和后连续的30页。
js中【Worker】相关知识点详细解读
2301_79858914的博客
09-11 831
JavaScript 中的 Worker 是一个可以在后台线程中运行代码的 API，这样可以避免主线程（通常是 UI 线程）被阻塞。使用 Worker 时，JavaScript 可以在多线程环境中工作，解决了单线程的瓶颈问题。通常情况下，JavaScript 是单线程的，也就是所有的代码（包括 DOM 操作和事件处理等）都在同一个线程里执行。如果某段代码需要大量计算，或者运行时间过长，会阻塞整个页面，导致界面卡顿甚至崩溃。Worker提供了一种将复杂或耗时的任务分配到后台线程执行的方法。
echarts.js+china.js实现中国地图各省数据案例
qq_58258855的博客
09-11 413
实现中国地图各省数据案例
JS笔记
2201_76100326的博客
09-11 857
javascript中的对象分为3种：自定义对象，内置对象，浏览器对象 JavaScript 中的所有事物都是对象：字符串、数字、数组、日期，等等。在 JavaScript 中，对象是拥有属性和方法的数据。属性是与对象相关的值。方法是能够在对象上执行的动作。.关键词（）
JavaScript基础
zhangh040629的博客
09-10 1274
//** 控制浏览器弹出一个警告框* alert()*/alert;/** 让计算机在页面中输出一个内容*/write;/** 向控制台输出一个内容*/log;</</</</
jEasyUI 创建带复选框的树形菜单
wjs2024的博客
09-10 346
jEasyUI 是一个基于 jQuery 的框架，它为用户提供了一套完整的用户界面组件，包括菜单、窗口、表格等。在本文中，我们将重点介绍如何使用 jEasyUI 创建一个带复选框的树形菜单。
JS的输出语句
最新发布
J3259392566的博客
09-13 184
js中严格区分大小写。
八十多种证件识别接口-JavaScript身份证识别API示例-护照识别-户口页识别
weixin_41711744的博客
09-12 502
证件识别API包含了身份证识别、护照识别、户口页识别、港澳台来往通行证识别等八十多种证件识别类型，提供了快速、精准的证件信息提取功能，广泛应用于实名认证 、机场出入口等场景。身份证识别API常用于在线支付、金融服务、酒店入住等需要进行实名认证和提取身份信息的场景。在这些场景中，通过快速识别和验证身份证信息，可以有效提高处理速度，减少人为错误，增强安全性。八十多种证件识别接口提供了一种高效、精准的识别方式来读取各类证件信息，通过合理应用这些技术，可以大幅提升用户体验和企业运营效率。
echarts饼图内容循环播放实现
qq_39877681的博客
09-12 221
echarts饼图内容循环播放实现
js实现动态生成不固定数量的气泡
丁哒哒的博客
09-10 262
【代码】js实现动态生成不固定数量的气泡。
服装|基于Java+vue的服装定制系统(源码+数据库+文档)
weixin_66413741的博客
09-10 639
服装定制将是广大用户们不可忽视的一块。但是管理好服装定制又面临很多麻烦需要解决,我们可以发现服装定制方面的系统并不是相当普及,在服装定制方面的可以有许多改进。即服装定制系统慢慢的被人们关注。服装定制管理方面的任务繁琐,以至于每年都在服装定制管理这方面投入较多的精力却效果甚微,
常见文档工具对比和选择
qq_41765777的博客
09-09 916
文档工具的本质，其实都是将我们的文档内容标准化，在互联网环境上的文档，一般目前比较主流的是生成文档的 html 网页内容，而文档内容的作者都比较倾向于使用纯文本的 Markdown 进行书写，所以文档工具的核心内容主要就是将 Markdown 转换为一个 html 的网站内容。
【前端】vue+html+js 实现table表格展示，以及分页按钮添加
weixin_43872912的博客
09-09 507
数据条数太多显示到页面上时可能会渲染较慢，因此需要截取数据进行展示。
使用Redux实现的React todoList教程
作者在尝试使用蚂蚁金服的ant-design-pro框架时遇到困难，转向学习Redux，并推荐了《深入React技术栈》一书。项目基于create-react-app构建，文章详细解释了目录结构和应用中的关键数据存储，以及reducer的设计。 ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值