前端框架使用vue-cli （第五层：构建打包层--babel.config.js介绍）

2. babel.config.js

2.1文件逻辑作用

Babel 是 JavaScript 编译器，把现代 JS（ES6/ES7/ES8）转成老浏览器能运行的 ES5。

开发者写的:        const fn = () => {}     （ES6 箭头函数）
                ↓ Babel 编译
浏览器运行的:     var fn = function() {}    （ES5 普通函数）

完整示例（Vue CLI 默认）

// babel.config.js
module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
    // 等价于：
    // [
    //   '@babel/preset-env',     // 根据目标浏览器转换 JS 语法
    //   {
    //     targets: {
    //       browsers: ['> 1%', 'last 2 versions', 'not dead']
    //     }
    //   }
    // ]
  ],
  
  plugins: [
    // 可选：添加额外插件
    '@babel/plugin-transform-runtime',  // 减少代码重复
    '@babel/plugin-proposal-optional-chaining',  // 支持 ?. 操作符
    '@babel/plugin-proposal-nullish-coalescing-operator'  // 支持 ?? 操作符
  ]
}

实际转换示例

// 你的源码（src/main.js）
const message = 'Hello'
const greet = (name) => `Hello ${name}`
const result = obj?.value ?? 'default'

// Babel 编译后（dist/js/app.xxx.js）
var message = 'Hello'
var greet = function(name) { return 'Hello ' + name }
var result = obj === null || obj === void 0 ? void 0 : obj.value
var result2 = result !== null && result !== void 0 ? result : 'default'

2.2为什么需要它？

Vue 源码本身用的是最新语法
你的业务代码也可能用最新语法
但用户还在用老浏览器（IE11、Chrome 70等）
→ 必须通过 Babel 转换

---

2.3一个默认的配置以及配置内容介绍：

module.exports = {
  presets: [
    // https://github.com/vuejs/vue-cli/tree/master/packages/@vue/babel-preset-app
    '@vue/cli-plugin-babel/preset'
  ],
  'env': {
    'development': {
      // babel-plugin-dynamic-import-node plugin only does one thing by converting all import() to require().
      // This plugin can significantly increase the speed of hot updates, when you have a large number of pages.
      'plugins': ['dynamic-import-node']
    }
  }
}

babel.config.js 配置详解

你贴的这个文件是 Vue CLI 默认生成的 babel.config.js，已经足够覆盖 90% 的项目需求。下面逐行解释它配置了什么。

---

一、当前配置的含义

module.exports = {
  // ========== presets：预设（一组规则的集合） ==========
  presets: [
    // 这是 Vue CLI 官方维护的 Babel 预设
    // 相当于一个"规则包"，里面已经配置好了 Vue 项目需要的一切
    '@vue/cli-plugin-babel/preset'
  ],

  // ========== env：按环境区分配置 ==========
  'env': {
    // 开发环境专属配置（执行 npm run serve 时生效）
    'development': {
      'plugins': ['dynamic-import-node']
    }
    // 生产环境（npm run build）没有额外配置，使用 presets 的默认行为
  }
}

---

二、@vue/cli-plugin-babel/preset 里有什么？

这个预设是 Vue CLI 官方封装的，它内部已经包含了：

// 相当于你写了以下内容（简化版）
module.exports = {
  presets: [
    [
      '@babel/preset-env',      // 核心：转换 JS 语法
      {
        // 自动根据 browserslist 配置决定转换哪些语法
        // 默认配置在 package.json 或 .browserslistrc 中
        'useBuiltIns': 'usage',  // 按需引入 polyfill
        'corejs': 3               // 使用 core-js 3 版本
      }
    ]
  ],
  plugins: [
    '@babel/plugin-transform-runtime',  // 减少重复代码
    '@babel/plugin-proposal-optional-chaining',  // 支持 ?.
    '@babel/plugin-proposal-nullish-coalescing-operator'  // 支持 ??
  ]
}

browserslist 配置示例（package.json 中）

{
  "browserslist": [
    "> 1%",                    // 全球使用率超过 1% 的浏览器
    "last 2 versions",         // 每个浏览器最后 2 个版本
    "not dead",                // 排除官方已停止维护的浏览器
    "not ie 11"                // 排除 IE 11
  ]
}

实际效果

你的代码	目标浏览器	Babel 转换
const a = 1	Chrome 70+	不转换（已支持）
const a = 1	IE 11	转成 var a = 1
[1,2].includes(1)	Chrome 70+	不转换
[1,2].includes(1)	IE 11	添加 polyfill（模拟实现）

---

三、dynamic-import-node 插件的作用

'development': {
  'plugins': ['dynamic-import-node']
}

它解决什么问题？

动态导入（懒加载）的语法：

// 路由懒加载写法
const UserPage = () => import('./views/UserPage.vue')

默认行为 vs 插件行为

环境	没有插件	有插件
开发环境	import() 被原样保留，webpack 分包，热更新慢	import() 转成 require()，不分包，热更新快
生产环境	import() 正常分包，用户按需加载	（不配置，所以正常分包）

为什么要区分环境？

开发时：更关心热更新速度，不在乎打包体积
       → 用 dynamic-import-node：不分包，速度快

生产时：更关心用户加载速度，不在乎编译时间
       → 不用插件：正常分包，用户按需加载

实际转换示例

// 你写的代码
const Page = () => import('./views/Home.vue')

// 开发环境（有 dynamic-import-node）
const Page = () => require('./views/Home.vue')

// 生产环境（没有这个插件）
const Page = () => __webpack_require__.e(0).then(...)  // 分包加载

---

四、常见的 babel.config.js 扩展配置

如果你的项目有特殊需求，可以按需添加：

1. 支持可选链（已经有，不用加）

// 代码中用到的语法
const name = user?.profile?.name

// 已经是 @vue/cli-plugin-babel/preset 默认包含的

2. 支持类属性装饰器（如 TypeScript/Vue Class Component）

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    ['@babel/plugin-proposal-decorators', { legacy: true }],
    ['@babel/plugin-proposal-class-properties', { loose: true }]
  ]
}

3. 配置 core-js 版本（处理 Promise、Array.includes 等）

module.exports = {
  presets: [
    ['@vue/cli-plugin-babel/preset', {
      useBuiltIns: 'usage',  // 'usage' | 'entry' | false
      corejs: 3              // 使用 core-js@3
    }]
  ]
}

4. 排除某些文件不转换

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  exclude: /node_modules\/(?!(some-es-module)\/)/  // 排除特定 node_modules
}

5. 生产环境特殊处理

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  env: {
    development: {
      plugins: ['dynamic-import-node']
    },
    production: {
      plugins: [
        'transform-remove-console'  // 生产环境移除所有 console.log
      ]
    }
  }
}

---

五、完整的 babel.config.js 配置指南

什么时候需要改？

场景	需要改吗	改什么
普通 Vue 3 项目	❌ 不需要	用默认配置即可
Vue 2 项目	❌ 不需要	默认已配置好
需要支持 IE 11	✅ 需要	修改 browserslist
使用 TypeScript	❌ 不需要	Vue CLI 自动处理
需要移除 console.log	✅ 需要	添加 transform-remove-console
使用装饰器语法	✅ 需要	添加 decorators 插件
自定义浏览器兼容范围	✅ 需要	改 package.json 的 browserslist

推荐的扩展配置（自己评估要不要加）

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [],
  env: {
    development: {
      plugins: ['dynamic-import-node']
    },
    production: {
      // 生产环境移除 console.log 和 debugger（可选）
      plugins: [
        ['transform-remove-console', { exclude: ['error', 'warn'] }]
      ]
    }
  }
}

---

六、配置优先级总结

babel.config.js 中的配置
        ↓
合并 @vue/cli-plugin-babel/preset 中的配置
        ↓
根据 NODE_ENV 选择对应的 env 配置
        ↓
最终的 Babel 配置

---

一句话总结

当前配置 = 生产环境用官方预设 + 开发环境额外加 dynamic-import-node（提升热更新速度）

90% 的项目不需要改任何内容，保持默认即可。
只有在需要特殊语法支持（装饰器）或特殊平台兼容（IE）时才需要追加配置。