Babel只编译我的Vue项目的js文件，而不是整个项目

Question

我有一个 Vue 项目，我想在旧 iPad 上使用，运行 iOS/safari 版本 5。这意味着我需要使用 Babel 将其转译为 ES5。

这就是我的babel.config.js样子

  presets: [

    //'@vue/cli-plugin-babel/preset',

    ["@babel/env",

    {

      targets: {

        safari: "5",

        ios: "5",

      },

      useBuiltIns: "usage",

      "corejs": "3.6.4",

    },]

  ]

}

现在，当我运行时npx babel src --out-dir dist，babel 仅将.js文件编译到该dist文件夹中。没有.vue文件、静态资产和html文件被编译/复制到该dist文件夹。

我怎样才能让 Babel 不仅仅编译.js文件，还需要做什么才能将我的项目转译为 ES5？

这是我的package.json：

{

  "name": "frontend",

  "version": "0.1.0",

  "private": true,

  "scripts": {

    "serve": "vue-cli-service serve",

    "build": "vue-cli-service build",

    "lint": "vue-cli-service lint"

  },

  "dependencies": {

    "@babel/polyfill": "^7.12.1",

    "axios": "^0.20.0",

    "core-js": "^3.6.5",

    "sass": "^1.27.0",

    "sass-loader": "^10.0.3",

    "vue": "^2.6.11",

    "vue-axios": "^2.1.5",

    "vue-device-detector": "^1.1.6",

    "vue-material": "^1.0.0-beta-15",

    "vue-router": "^3.2.0",

    "vuelidate": "^0.7.5"

  },

  "devDependencies": {

    "@babel/cli": "^7.12.1",

    "@babel/core": "^7.12.3",

    "@babel/preset-env": "^7.12.1",

    "@vue/cli-plugin-babel": "~4.5.0",

    "@vue/cli-plugin-eslint": "~4.5.0",

    "@vue/cli-plugin-router": "~4.5.0",

    "@vue/cli-service": "~4.5.0",

    "babel-eslint": "^10.1.0",

    "eslint": "^6.7.2",

    "eslint-plugin-vue": "^6.2.2",

    "vue-template-compiler": "^2.6.11"

  }

}

Answer 1

这不是 babel 编译静态资源的目的，为此您需要像 webpack 这样的捆绑器或像 Gulp 这样的任务运行器。