vue-cli3升级到vue-cli4

DragonBalls
565 阅读4分钟

背景

主要是最近在补前端项目的单元测试用例(之前项目没有)，但是在这个过程中遇到各种比较恶心的问题耽误了不少的时间，最后调整了一下思路，一怒之下升级了vue-cli版本以及部分依赖的版本。这样也好，省得以后升级跨步过大。下面也顺便记录下补测试用例过程中遇到的问题。

测试用例中遇到的问题

问题的起源：SyntaxError: Cannot use import statement outside a module。

但是，我看项目中的jest配置文件jest.config.js中有babel-jest。

开始的时候以为是本地的配置有什么问题，于是用完全相同的vuecli版本(3.9.2)搭建了带Jest的demo项目，一一对着下发现没有什么不同(毕竟项目初始的时候也是vuecli搭建的)，甚至把我们的工具函数塞进去npm run test:unit也是可以正常用的(并且项目可以正常启动)。自己对比只有babel-jest 版本不太一样(不确定是不是项目后面升级过)。下面是我的心塞过程：

  1. babel-jest 目前是24.8.0版本，但是npm run test:unit会报错

  2. 用同样版本的Vue-cli，搭建出来的babel-jest版本是23.6.0，所以降级到该版本，此时npm run test:unit不会报错，但是项目起不来了，报错：Error: Cannot find module 'monaco-editor/esm/vs/editor/contrib/gotoSymbol/goToCommands'

  3. 查询上面的报错，官方issue给的建议是升级monaco相关的依赖："monaco-editor": "^0.19.0" ，"monaco-editor-webpack-plugin"： "^1.8.1"，详见相关issue1，issue2，issue3

  4. 删除lock.json和node_modeules重新install，npm run serve报错，是@antv/g6相关的报错，看了下是node_modeules里面的@antv/g6少了很多东西

1.PNG

2.PNG 5. 么得办法，换个思路。Vuecli3升级到Vuecli4。最终问题解决。

升级前的package.json

{
  "name": "XXX",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "build_xxx": "vue-cli-service build && rm -r dist/js/*test*",
    "lint": "vue-cli-service lint",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "@antv/g6": "^3.1.5",
    "axios": "^0.19.0",
    "cnchar": "^2.2.5",
    "core-js": "^2.6.5",
    "jquery": "^3.4.1",
    "jszip": "^3.2.2",
    "lodash": "^4.17.15",
    "lodash.words": "^4.2.0",
    "moment-timezone": "^0.5.33",
    "monaco-ace-tokenizer": "^0.2.1",
    "monaco-editor": "^0.17.1",
    "monaco-editor-webpack-plugin": "^1.7.0",
    "vue": "^2.6.10",
    "vue-i18n": "^8.12.0",
    "vue-matomo": "^3.13.4-1",
    "vue-router": "^3.0.3",
    "vue-virtual-scroller": "^1.0.10",
    "vuetify": "^2.3.19",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.9.0",
    "@vue/cli-plugin-eslint": "^3.9.0",
    "@vue/cli-plugin-unit-jest": "^3.9.0",
    "@vue/cli-service": "^3.9.0",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^24.8.0",
    "compression-webpack-plugin": "^3.1.0",
    "deepmerge": "^4.0.0",
    "eslint": "^7.16.0",
    "eslint-plugin-vue": "^7.3.0",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.4",
    "sass": "^1.22.9",
    "sass-loader": "^7.3.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "terser-webpack-plugin": "^2.3.5",
    "vue-cli-plugin-vuetify": "^0.5.0",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.0.5",
    "webpack-bundle-analyzer": "^3.6.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "eslint --cache --fix",
      "git add"
    ]
  }
}

vuecli升级过程

比较简单，基本照着官方文档来就行了。

npm install -g @vue/cli

vue upgrade

建议在vue upgrade之前代码都commit或者revert

可能会有报错：

3.PNG

不要慌，这是因为当前目录没有npm install，npm install之后继续进行

升级之后，

  1. ESLint规则修复
  2. npm run serve报了很多warning

4.PNG

关于这个warning的解释，另一个解释

解决： github.com/vuejs/vue-c…

或者我的解决是可以删除css中的extract，因为其默认值生产环境下是 true，开发环境下是 false。

vue cli 4 主要升级点总结

  1. @vue/cli-plugin-babel, @vue/cli-plugin-eslint, @vue/cli-service由 v3 的版本升级到了 v4

  2. sass-loader由 v7 的版本升级到了 v8

  3. core-js由 v2 的版本升级到了 v3

  4. webpack-chain由 v4 的版本升级到了 v6

  5. css-loader由 v1 的版本升级到了 v3

  6. url-loader由 v1 的版本升级到了 v2

  7. file-loader由 v3 的版本升级到了 v4

  8. copy-webpack-plugin由 v4 的版本升级到了 v5

  9. terser-webpack-plugin由 v1 的版本升级到了 v2

  10. @vue/cli-plugin-pwa由 v3 的版本升级到了 v4

  11. 新增插件 vue add vuex, vue add router

  12. pug-plain已重命名为pug-plain-loader

  13. 默认目录结构已更改

    src/store.js 改为 src/store/index.js

    src/router.js 改为 src/router/index.js

  14. 由于兼容性原因，仍支持 router＆routerHistoryMode 选项 preset.json

    但是现在建议使用它来 plugins: { '@vue/cli-plugin-router': { historyMode: true } }获得更好的一致性

  15. api.hasPlugin('vue-router')不再受支持，现在 api.hasPlugin('router')

  16. lintOnSave 选项的默认值（未指定时）从 true 更改为 default

  17. 废弃vue-cli-service test:e2e

  18. @vue/cli-plugin-e2e-nightwatch Nightwatch.js已从0.9升级到1.x

  19. @vue/cli-plugin-unit-mocha 升级到Mocha 6

  20. @vue/cli-plugin-typescript 更好的ts(x)支持 ，胜过js(x)

升级后的package.json

{
  "name": "XXX",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint",
    "build_xxx": "vue-cli-service build && rm -r dist/js/*test*"
  },
  "dependencies": {
    "@antv/g6": "^3.1.5",
    "axios": "^0.19.0",
    "cnchar": "^2.2.5",
    "core-js": "^3.6.5",
    "jquery": "^3.4.1",
    "jszip": "^3.2.2",
    "lodash": "^4.17.15",
    "lodash.words": "^4.2.0",
    "moment-timezone": "^0.5.33",
    "monaco-ace-tokenizer": "^0.2.1",
    "monaco-editor": "^0.17.1",
    "monaco-editor-webpack-plugin": "^1.7.0",
    "vue": "^2.6.10",
    "vue-i18n": "^8.12.0",
    "vue-matomo": "^3.13.4-1",
    "vue-router": "^3.0.3",
    "vue-virtual-scroller": "^1.0.10",
    "vuetify": "^2.3.19",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.5.12",
    "@vue/cli-plugin-eslint": "^4.5.12",
    "@vue/cli-plugin-unit-jest": "^4.5.12",
    "@vue/cli-service": "^4.5.12",
    "@vue/eslint-config-standard": "^4.0.0",
    "@vue/test-utils": "^1.1.3",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.1.0",
    "babel-jest": "^24.8.0",
    "compression-webpack-plugin": "^3.1.0",
    "deepmerge": "^4.0.0",
    "eslint": "^7.16.0",
    "eslint-plugin-vue": "^7.3.0",
    "husky": "^4.3.6",
    "lint-staged": "^10.5.4",
    "sass": "^1.22.9",
    "sass-loader": "^8.0.2",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "terser-webpack-plugin": "^2.3.5",
    "vue-cli-plugin-vuetify": "^2.3.1",
    "vue-template-compiler": "^2.6.10",
    "vuetify-loader": "^1.7.2",
    "webpack-bundle-analyzer": "^3.6.1"
  },
  "husky": {
    "hooks": {
      "pre-commit": "lint-staged"
    }
  },
  "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "eslint --cache --fix",
      "git add"
    ]
  }
}
avatar
文章
阅读
粉丝