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

Posted 2023-02-22

【中文标题】Babel 只编译我的 Vue 项目的 js 文件，而不是整个项目

【英文标题】：Babel only compiles js files of my Vue project, not the entire project

【发布时间】：2021-02-20 19:07:47

【问题描述】：

我有一个 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"
  

【参考方案1】：

这不是 babel 编译静态资源的目的，你需要一个像 webpack 这样的打包器或者像 Gulp 这样的任务运行器来实现这个目的。