珠海网站制作策划,免费搭建平台网站,小型企业网站建设模板,wordpress cron.sh,当前旧项目主要依赖版本介绍#xff1a;这里只贴出重要依赖包的旧版本做展示#xff0c;可以看到版本都相当落后了#xff0c;升级的话会涉及一些API以及依赖的修改或者弃用 次文章只记录当前项目使用#xff0c;其他项目不一定通用
{react: ^15.6.1这里只贴出重要依赖包的旧版本做展示可以看到版本都相当落后了升级的话会涉及一些API以及依赖的修改或者弃用 次文章只记录当前项目使用其他项目不一定通用
{react: ^15.6.1,react-dom: ^15.6.1,react-draft-wysiwyg: ^1.10.0,react-redux: ^5.0.5,react-router: ^4.1.1,react-router-dom: ^4.1.1,redux: ^3.6.0,redux-actions: ^2.0.3,react-dev-utils: ^3.1.0,react-error-overlay: ^1.0.10,babel: ^6.23.0,babel-cli: ^6.24.1,babel-core: 6.25.0,babel-eslint: 7.2.3,babel-jest: ^20.0.3,babel-loader: 7.1.1,babel-plugin-import: ^1.1.1,babel-plugin-transform-decorators-legacy: ^1.3.4,babel-preset-es2015: ^6.24.1,babel-preset-react: ^6.24.1,babel-preset-react-app: ^3.0.2,babel-preset-stage-2: ^6.24.1,babel-runtime: ^6.23.0,css-loader: 0.28.4,file-loader: 0.11.2,postcss-flexbugs-fixes: 3.2.0,postcss-loader: 2.0.6,style-loader: 0.18.2,url-loader: 0.5.9,eslint: 4.4.1,eslint-config-react-app: ^2.0.0,eslint-loader: 1.9.0,eslint-plugin-flowtype: 2.35.0,eslint-plugin-import: 2.7.0,eslint-plugin-jsx-a11y: 5.1.1,eslint-plugin-react: 7.1.0,webpack: 3.5.1,webpack-dev-server: 2.7.1,webpack-manifest-plugin: 1.2.1,html-webpack-plugin: 2.29.0,sw-precache-webpack-plugin: 0.11.4,
}升级之后版本升级之后还多出来了一些依赖包替换了一些依赖包比如mini-css-extract-plugin
{react: ^17.0.2,react-dom: ^17.0.2,react-redux: ^7.2.9,react-router: ^5.3.4,react-router-dom: ^5.3.4,redux: ^4.2.1,redux-actions: ^2.6.5,react-dev-utils: ^6.1.1,react-error-overlay: ^1.0.10,babel/cli: ^7.24.1,babel/core: ^7.0.0,babel/plugin-proposal-class-properties: ^7.0.0,babel/plugin-proposal-decorators: ^7.0.0,babel/plugin-proposal-export-namespace-from: ^7.0.0,babel/plugin-proposal-function-sent: ^7.0.0,babel/plugin-proposal-json-strings: ^7.0.0,babel/plugin-proposal-numeric-separator: ^7.0.0,babel/plugin-proposal-private-property-in-object: ^7.21.11,babel/plugin-proposal-throw-expressions: ^7.0.0,babel/plugin-syntax-dynamic-import: ^7.0.0,babel/plugin-syntax-import-meta: ^7.0.0,babel/preset-env: ^7.0.0,babel/preset-react: ^7.0.0,babel/runtime-corejs2: ^7.0.0,babel-core: ^7.0.0-bridge.0,babel-eslint: ^10.1.0,babel-jest: ^23.4.2,babel-loader: ^8.0.0,babel-plugin-import: ^1.1.1,babel-preset-react-app: ^10.0.1,css-loader: ^4.3.0,postcss-loader: ^3.0.0,file-loader: ^6.2.0,style-loader: ^2.0.0,url-loader: ^4.1.1,eslint: ^6.8.0,eslint-config-react-app: ^5.2.1,eslint-loader: ^4.0.2,eslint-plugin-flowtype: ^4.7.0,eslint-plugin-import: ^2.29.1,eslint-plugin-jsx-a11y: ^6.8.0,eslint-plugin-react: ^7.34.1,eslint-plugin-react-hooks: ^2.5.1,webpack: ^4.47.0,webpack-cli: ^3.3.12,webpack-dev-server: ^3.11.3,webpack-manifest-plugin: ^4.1.1,sw-precache-webpack-plugin: ^1.0.0,html-webpack-plugin: ^4.5.2,mini-css-extract-plugin: ^1.6.2,
}升级步骤及遇到的问题
安装17版本的react、react-dom npm i react17 react-dom17安装5版本的react-router、react-router-dom升级babel:输入命令行npx babel-upgrade --write会自动升级到babel7的版本这也是为什么会多出来一些babel包的原因升级到webpack4版本升级eslint相关的插件到最新版本
以上升级先在控制台执行命令改变package.json文件然后删除node_modules包删除.lock文件执行npm的缓存清除命令然后重新npm install其中清npm缓存命令如下 npm cache clean --force 这个命令将会清除npm缓存目录中的所有数据。请注意–force 参数是必须的因为从npm v5开始运行无参数的npm cache clean不再允许删除所有缓存。 npm cache verify 如果你使用的是npm的较新版本v5及以上你可以使用这个命令这个命令会校验并清理无效或损坏的缓存条目。它不会删除所有缓存但它确实会清理并且优化缓存。
npm i之后运行项目会报错大体分成几类 一、 Cannot find module…找不到包 这种解决方法就是缺什么装什么
二、依赖之间版本不对等问题 解决方法控制台会提示当前依赖关联的那些依赖需要的版本对应升级即可 但是会产生很多不太好解决的问题比如依赖之间形成依赖闭环A-B-C-D-A这种需要先理清楚依赖之间的关系然后从package.json中手动删除这些依赖重新逐个升级
三、webpack的编译问题 分成几种 1. 插件丢弃这就需要自己逐个查找了看插件在新版本中是否还在使用官方文档会有说明 在开发配置和生产配置中找到对应丢弃的插件进行删除那之前对应插件的功能就没有了怎么办不用担心随着版本的升级这些丢弃的功能大多已被集成到新版本中了 2. 插件替换官方同样会说明需要用什么新插件替换如何使用 3. 插件配置变更有的插件还在使用但是配置上略作调整
以下是几个典型的问题
问题Module build failed: Error: .plugins[1][1] must be an object, false, or undefined options: { plugins: [ // “transform-decorators-legacy”, // [‘import’, [{ libraryName: ‘antd’, style: true }]], [“babel/plugin-proposal-decorators”, { “legacy”: true }], // 插件替换 [‘import’, { libraryName: ‘antd’, style: true }], // 插件配置做变更 ], cacheDirectory: true, },
问题Plugin could not be registered at ‘html-webpack-plugin-before-html-processing’. Hook was not found. 升级html-webpack-plugin到4 // 插件版本升级
问题this.htmlWebpackPlugin.getHooks is not a function 插件new InterpolateHtmlPlugin(HtmlWebpackPlugin, env.raw),// 插件配置做变更
问题与eslint相关的插件报错 升级与eslint相关的插件匹配webpack4 // 插件版本升级
问题Error: Failed to load plugin ‘react-hooks’ declared in ‘package.json » eslint-config-react-app’: Cannot find module ‘eslint-plugin-react-hooks’ 安装eslint-plugin-react-hooks2 // 安装缺失插件
问题页面不报错也没有任何输出这个问题是因为之前的配置里面同时使用了html-webpack-plugin和InterpolateHtmlPlugin前面已经将这两个插件进行结合使用以为不需要html-webpack-plugin插件了就将new HtmlWebpackPlugin() 注释掉了但是就没有输出了 检查html-webpack-plugin的使用
插件去除生产环境DefinePlugin、UglifyJsPlugin 插件去除开发环境NamedModulesPlugin
