如何在vue/cli 4应用程序的柏树中使用混合？

Question

在使用柏树进行测试的vue/cli 4应用程序中，我想使用我的混合方法，并在test/e2e/specs/fileupload_tests.js中添加声明：

import faker from 'faker'
import 'cypress-file-upload'
import appMixin from '../../../src/appMixin'        // Full path is src/appMixin.js

describe('Admin category fileupload functionality', () => {
    it('category fileupload', () => {
        ...

但是我在浏览器中看到了错误: /mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/@babel/runtime/helpers/esm/typeof.js:1

export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

这不是无效混合路径的错误--在这种情况下，我得到了不同的错误。

哪条路是有效的？

"axios": "^0.19.0",
"core-js": "^3.3.2",
"cypress-file-upload": "^3.5.3",
"vue": "^2.6.10",

修改后的：我在文件中注释了导入

我在test/e2e/support/index.js中添加了一行：

import appMixin from '../../../src/appMixin'        // src/appMixin.js

// Import commands.js using ES2015 syntax:
import './commands'

但无论如何，运行测试都有错误：

/mnt/_work_sdb8/wwwroot/lar/VApps/vtasks/node_modules/@babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

在我的项目中，我有一些配置文件，比如cypress.json或babel.config.js，我必须在其中一个文件中添加混合声明吗？如果是，采用哪种格式？

修改后的# 2: I成功运行命令

npm install babel-preset-es2015 --save-dev

在运行测试之后，我总是会出错：

/node_modules/@babel/runtime/helpers/esm/typeof.js:1
export default function _typeof(obj) {
^
ParseError: 'import' and 'export' may appear only with 'sourceType: module'

即使在我的tests.js中我注释了所有的“导入”行

我的package.json：

{
  "name": "ctasks",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "@voerro/vue-tagsinput": "^2.2.0",
    "axios": "^0.19.0",
    "babel-helper-vue-jsx-merge-props": "^2.0.3",
    "core-js": "^3.3.2",
    "cypress-file-upload": "^3.5.3",
    "file-saver": "^2.0.2",
    "font-awesome": "^4.7.0",
    "moment": "^2.24.0",
    "moment-timezone": "^0.5.27",
    "v-money": "^0.8.1",
    "vee-validate": "^3.1.0",
    "vue": "^2.6.10",
    "vue-avatar": "^2.1.8",
    "vue-context-menu": "^2.0.6",
    "vue-focus": "^2.1.0",
    "vue-head": "^2.2.0",
    "vue-js-modal": "^1.3.31",
    "vue-nav-tabs": "^0.5.7",
    "vue-notification": "^1.3.20",
    "vue-router": "^3.1.3",
    "vue-select": "^3.2.0",
    "vue-simple-calendar": "^4.3.2",
    "vue-simple-suggest": "^1.10.1",
    "vue-slider-component": "^3.1.1",
    "vue-the-mask": "^0.11.1",
    "vue-upload-component": "^2.8.20",
    "vue-wysiwyg": "^1.7.2",
    "vue2-datepicker": "^3.3.0",
    "vue2-filters": "^0.8.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^4.0.0",
    "@vue/cli-plugin-e2e-cypress": "~4.2.0",
    "@vue/cli-plugin-eslint": "~4.2.0",
    "@vue/cli-plugin-router": "^4.0.0",
    "@vue/cli-plugin-vuex": "^4.0.0",
    "@vue/cli-service": "^4.0.0",
    "babel-eslint": "^10.0.3",
    "bootstrap": "^4.3.1",
    "eslint": "^6.7.2",
    "eslint-plugin-vue": "^6.1.2",
    "faker": "^4.1.0",
    "jquery": "^3.4.1",
    "node-sass": "^4.12.0",
    "popper.js": "^1.16.0",
    "sass-loader": "^8.0.0",
    "vue-template-compiler": "^2.6.10"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended"
    ],
    "parserOptions": {
      "parser": "babel-eslint"
    },
    "rules": {
      "semi": [
        2,
        "never"
      ]
    }
  }
}

是不是巴贝尔的版本错了？哪个是对的？

谢谢!

Answer 1

@babel/runtime/helpers/esm/typeof.js

你能试试旧版本的巴贝尔吗，只需做npm install babel-preset-es2015 --save-dev

原来早期的Babel提供了所有所需的插件，包括一个将ES6转换为ES5的插件。但是，从Babel6.0开始，您必须显式地包含插件或预置(其中包括某些预定义的插件)。因此，我们将安装Babel预置es2015。

来源