javascript - 将 Vue2 CLI 转换为 Vite

Question

我想搬到 Vite 以利用更快的开发时间。我当前的应用程序是用 Vue2 编写的。

但是，我看到了这个错误：

Pre-bundling dependencies:
  vue
  vuelidate/src
  vue-signature-pad
  tailwindcss/resolveConfig
  vuex
  (...and 8 more)
(this will be run only when your dependencies or config have changed)
 > node_modules/chokidar/node_modules/fsevents/fsevents.js:13:23: error: No loader is configured for ".node" files: node_modules/chokidar/node_modules/fsevents/fsevents.node
    13 │ const Native = require("./fsevents.node");
       ╵                        ~~~~~~~~~~~~~~~~~

error when starting dev server:
Error: Build failed with 1 error:
node_modules/chokidar/node_modules/fsevents/fsevents.js:13:23: error: No loader is configured for ".node" files: node_modules/chokidar/node_modules/fsevents/fsevents.node
    at failureErrorWithLog (/Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:1475:15)
    at /Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:1133:28
    at runOnEndCallbacks (/Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:923:63)
    at buildResponseToResult (/Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:1131:7)
    at /Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:1240:14
    at /Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:611:9
    at handleIncomingPacket (/Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:708:9)
    at Socket.readFromStdout (/Users/rizakhan/vue/myabseil-vue2-app/node_modules/esbuild/lib/main.js:578:7)
    at Socket.emit (events.js:375:28)
    at Socket.emit (domain.js:470:12)
    at addChunk (internal/streams/readable.js:290:12)
    at readableAddChunk (internal/streams/readable.js:265:9)
    at Socket.Readable.push (internal/streams/readable.js:204:10)
    at Pipe.onStreamRead (internal/stream_base_commons.js:188:23)

我认为这是因为require在 ES 模块中不可用。

这是我的一些配置：

babel.config.js

module.exports = {
  presets: ['@babel/preset-env'],
  // For Jest not to be annoyed by 'import.meta.xxx'
  plugins: [
    function () {
      return {
        visitor: {
          MetaProperty(path) {
            path.replaceWithSourceString('process')
          },
        },
      }
    },
  ],
}

vite.config.js

import path from 'path'
import { defineConfig } from 'vite'
import { createVuePlugin } from 'vite-plugin-vue2'

export default defineConfig({
    plugins: [createVuePlugin()],
    server: {
        port: 8080
    },
    resolve: {
        alias: [
            {
                find: '@',
                replacement: path.resolve(__dirname, 'src')
            }
        ]
    }
})

package.json

{
    "name": "my-great-app",
    "version": "0.1.0",
    "private": true,
    "scripts": {
        "serve": "vite",
        "build": "vue-cli-service build",
        "test:unit": "vue-cli-service test:unit",
        "lint": "vue-cli-service lint",
        "deploy-live": "aws --region ca-central-1 --profile myabseil-s3-deployer s3 sync dist s3://app.myabseil.com --delete",
        "deploy-dev": "aws --region ca-central-1 --profile myabseil-s3-deployer s3 sync dist s3://dev.myabseil.com --delete",
        "prepare": "husky install"
    },
    "dependencies": {
        "axios": "^0.21.1",
        "axios-cache-adapter": "^2.7.3",
        "core-js": "^3.10.0",
        "js-cookie": "^2.2.1",
        "lodash": "^4.17.21",
        "moment": "^2.29.1",
        "v-calendar": "^2.2.4",
        "vue": "^2.6.11",
        "vue-content-loader": "^0.2.3",
        "vue-html2pdf": "^1.8.0",
        "vue-i18n": "^8.24.2",
        "vue-image-crop-upload": "^3.0.3",
        "vue-pdf": "^4.2.0",
        "vue-popperjs": "^2.3.0",
        "vue-router": "^3.2.0",
        "vue-signature-pad": "^2.0.2",
        "vuedraggable": "^2.24.3",
        "vuelidate": "^0.7.6",
        "vuex": "^3.4.0",
        "vuex-persist": "^3.1.3"
    },
    "devDependencies": {
        "@tailwindcss/postcss7-compat": "^2.0.3",
        "@vue/eslint-config-standard": "^5.1.2",
        "@vue/test-utils": "^1.0.3",
        "autoprefixer": "^9.8.6",
        "babel-eslint": "^10.1.0",
        "css-loader": "^3.6.0",
        "deepmerge": "^4.2.2",
        "eslint": "^6.7.2",
        "eslint-plugin-import": "^2.20.2",
        "eslint-plugin-node": "^11.1.0",
        "eslint-plugin-promise": "^4.2.1",
        "eslint-plugin-standard": "^4.0.0",
        "eslint-plugin-vue": "^6.2.2",
        "html-loader": "^1.1.0",
        "husky": "^6.0.0",
        "lint-staged": "^11.0.0",
        "lodash-webpack-plugin": "^0.11.6",
        "postcss": "^7.0.36",
        "postcss-import": "^14.0.2",
        "postcss-loader": "^6.1.1",
        "prettier": "^1.19.1",
        "prettier-eslint": "^12.0.0",
        "prettier-eslint-cli": "^5.0.1",
        "sass": "^1.32.12",
        "sass-loader": "^8.0.2",
        "style-loader": "^2.0.0",
        "stylus": "^0.54.8",
        "stylus-loader": "^5.0.0",
        "tailwindcss": "npm:@tailwindcss/postcss7-compat@^2.2.7",
        "vite": "^2.5.10",
        "vite-plugin-vue2": "^1.8.2",
        "vue-template-compiler": "^2.6.11"
    },
    "lint-staged": {
        "*.{js,vue}": [
            "vue-cli-service lint"
        ]
    },
    "prettier": {
        "tabWidth": 4,
        "semi": false,
        "arrowParens": "always",
        "trailingComma": "none",
        "singleQuote": true
    },
    "eslintConfig": {
        "root": true,
        "env": {
            "node": true
        },
        "extends": [
            "plugin:vue/recommended",
            "@vue/standard"
        ],
        "parserOptions": {
            "parser": "babel-eslint"
        },
        "rules": {
            "indent": [
                "error",
                4,
                {
                    "SwitchCase": 1
                }
            ],
            "vue/html-indent": [
                "error",
                4,
                {
                    "attribute": 1,
                    "baseIndent": 1,
                    "closeBracket": 0,
                    "alignAttributesVertically": true,
                    "ignores": []
                }
            ],
            "space-before-function-paren": [
                "error",
                "always"
            ]
        },
        "overrides": [
            {
                "files": [
                    "**/__tests__/*.{j,t}s?(x)",
                    "**/tests/unit/**/*.spec.{j,t}s?(x)"
                ],
                "env": {
                    "jest": true
                }
            }
        ]
    },
    "browserslist": [
        "> 1%",
        "last 2 versions",
        "not dead"
    ],
    "jest": {
        "preset": "@vue/cli-plugin-unit-jest"
    }
}

标签： javascriptvuejs2vite