博客
关于我
webpack-3 react-router-4 react-15.6 升级记录
阅读量:637 次
发布时间:2019-03-14

本文共 2560 字,大约阅读时间需要 8 分钟。

webpack-3 react-router-4 react-156 升级记录

说明

本文记录了从 webpack 2.x 升级到 3.x、React Router 4.1.2 升级以及 React 15.6.x 升级的相关变更内容及注意事项。

1. React Router 升级到 4.1.2

React Router 4.1.2 的升级版本对 API 有较大变动,具体变更内容请参考文章《React Router 4 升级攻略》。

2. 从 webpack 2.x 升级到 3.x

webpack 3.x 的升级相对 2.x来说,配置文件无需大幅修改,但新增了多个功能和性能优化。以下是主要变更点:

  • 作用域提升(Scope Hoisting):webpack 3 提供了插件来提升作用域,移除模块封装函数,减少了浏览器 JavaScript 运算负担。

    module.exports = {    plugins: [        new webpack.optimize.ModuleConcatenationPlugin()    ]}

    开发环境下启用该插件会导致 HMR 加载速度减慢,建议仅在生产环境使用。

  • webpack-dev-server URL 问题:升级后可能会出现 http://0.0.0.0:2222/undefined 的问题,需在 dev-server 配置中添加 openPage: '' 来修复。

    devServer: {    contentBase: defPath.DEV_PATH,    publicPath: '/',    historyApiFallback: true,    clientLogLevel: 'none',    host: ip,    port: 8090,    open: true,    openPage: '', // 解决 undefined 链接    hot: true,    inline: true,    compress: true,    stats: {        colors: true,        errors: true,        warnings: true,        modules: false,        chunks: false    }}

3. React 升级到 15.6.x

React 15.6.x 的升级主要是内部优化和功能调整,以下是需注意事项:

  • 第三方组件引用:部分已弃用的 React 组件可能会对外部库产生兼容性问题,需根据具体项目情况进行适配。

升级变化

1. 作用域提升(Scope Hoisting)

webpack 3 引入了作用域提升功能,解决了模块封装函数导致的性能问题。通过启用 ModuleConcatenationPlugin,可以移除不必要的封装函数,减小输出包体积并提升加载速度。

2. webpack-dev-server URL 修复

升级后的 webpack-dev-server 在某些版本中可能会导致自动打开的页面链接出现 undefined 错误。为解决此问题,需在 dev-server 配置中添加 openPage: ''

3. HMR(热模块更新)

升级后,HMR 的配置可能需要相应调整。以下是修复方案:

  • Babel 配置:无需修改,Babel 对 webpack 配置无影响。

  • 项目入口文件:确保入口文件正确引用模块,并保留热模块更新的代码。

    if (module.hot && process.env.NODE_ENV !== 'production') {    module.hot.accept('./routes.js', (err) => {        console.log('module hot');        if (err) {            console.log(err);        }        const NextComponent = require('./routes.js').default;        render(NextComponent);    });}
  • 路由部分代码:请确保路由配置文件正确无误,避免出现 undefined 路由路径。

路由部分代码示例

import React from 'react';import {Route, Switch, Redirect} from 'react-router-dom';import {App, Home, Test} from './containers/index';import createHistory from 'history/createBrowserHistory';const history = createHistory();const Root = () => (    
(
)} />
(
)} />
);export default Root;

以上内容结合了从 webpack 3.x、React Router 4.1.2 和 React 15.6.x 升级后的重要变更和注意事项,供开发者参考使用。

转载地址:http://yfvoz.baihongyu.com/

你可能感兴趣的文章
MySQL中使用IN()查询到底走不走索引?
查看>>
Mysql中使用存储过程插入decimal和时间数据递增的模拟数据
查看>>
MySql中关于geometry类型的数据_空的时候如何插入处理_需用null_空字符串插入会报错_Cannot get geometry object from dat---MySql工作笔记003
查看>>
mysql中出现Incorrect DECIMAL value: '0' for column '' at row -1错误解决方案
查看>>
mysql中出现Unit mysql.service could not be found 的解决方法
查看>>
mysql中出现update-alternatives: 错误: 候选项路径 /etc/mysql/mysql.cnf 不存在 dpkg: 处理软件包 mysql-server-8.0的解决方法(全)
查看>>
Mysql中各类锁的机制图文详细解析(全)
查看>>
MySQL中地理位置数据扩展geometry的使用心得
查看>>
Mysql中存储引擎简介、修改、查询、选择
查看>>
Mysql中存储过程、存储函数、自定义函数、变量、流程控制语句、光标/游标、定义条件和处理程序的使用示例
查看>>
mysql中实现rownum,对结果进行排序
查看>>
mysql中对于数据库的基本操作
查看>>
Mysql中常用函数的使用示例
查看>>
MySql中怎样使用case-when实现判断查询结果返回
查看>>
Mysql中怎样使用update更新某列的数据减去指定值
查看>>
Mysql中怎样设置指定ip远程访问连接
查看>>
mysql中数据表的基本操作很难嘛,由这个实验来带你从头走一遍
查看>>
Mysql中文乱码问题完美解决方案
查看>>
mysql中的 +号 和 CONCAT(str1,str2,...)
查看>>
Mysql中的 IFNULL 函数的详解
查看>>