babel的使用和设置

Babel 是一个广泛使用的 JavaScript 编译器，用于将现代 JavaScript 代码（如 ES6+ 代码）转换为向后兼容的 JavaScript 代码，从而能够在旧的浏览器或环境中运行
一、下载
一般使用7.4.5，是一个比较稳定的版本

npm install @babel/core@7.4.5 @babel/preset-env@7.4.5 @babel/cli regenerator-runtime/runtime --dev

二、配置
在 Babel 项目中，配置文件的位置和名称可以有所不同，通常有以下几种方式来配置 Babel：
2.1）、.babelrc 文件
.babelrc 文件通常用于配置针对特定目录及其子目录的 Babel 设置。它在项目根目录或子目录中使用，是一种相对路径配置方式。
使用场景：适用于针对特定目录的 Babel 配置，通常用于小型项目或需要在不同目录中使用不同 Babel 配置的情况。
优点：易于管理单个目录的配置，便于分离不同目录的 Babel 配置。
缺点：无法跨项目边界工作，例如在 monorepo 项目中使用时可能会遇到问题。
如下所示：

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

2.2）、babel.config.js 文件
babel.config.js 文件是一种项目范围的配置方式，适用于整个项目（包括 node_modules 中的文件）。它在 Babel 7 中被引入，用于解决 Babel 配置在 monorepo 和项目根目录之外的情况。
使用场景：适用于整个项目范围的 Babel 配置，尤其是在 monorepo 或复杂项目结构中。
优点：统一整个项目的 Babel 配置，能够跨目录边界工作。
缺点：配置文件的查找范围更广，可能会导致意外的文件被编译。
如下所示1：
presets: 主要用于应用一组常用的 Babel 插件，以支持特定的 JavaScript 版本或功能。例如，@babel/preset-env 可以让你在不需要手动配置每个插件的情况下，使用最新的 JavaScript 特性。

plugins: 用于添加或优化特定的功能。例如，@babel/plugin-transform-runtime 可以减少代码冗余，优化编译输出，特别是在大型项目中，可以显著减少代码体积并提高运行性能。

// Babel 配置文件，使用 CommonJS 语法导出配置对象
module.exports = {
  // presets 定义了一组 Babel 插件的预设，这些预设插件组合在一起，用于转换特定的 JavaScript 语法
  presets: [
    // @babel/preset-env 是一个智能预设，允许你使用最新的 JavaScript，而无需逐个引入每个语法转换插件
    '@babel/preset-env'
  ],
  // plugins 是一个插件数组，定义了要使用的 Babel 插件
  plugins: [
    // @babel/plugin-transform-runtime 插件用来避免 Babel 带来的编译冗余
    // 它可以将一些辅助代码抽取出来，避免每个文件都生成重复的辅助代码，从而减小最终的打包体积
    '@babel/plugin-transform-runtime'
  ]
};

如下所示1：

// Babel 配置文件，使用 CommonJS 语法导出配置对象
module.exports = {
  // presets 定义了一组 Babel 插件的预设，这些预设插件组合在一起，用于转换特定的 JavaScript 语法
  presets: [
    // @vue/app 是一个 Vue CLI 3 及以上版本默认使用的预设，它内置了很多常用的 Babel 插件
    // 以便支持最新的 JavaScript 语法和特性
    ['@vue/app', {
      // useBuiltIns 配置项用于指定如何注入 polyfill
      // 'entry' 方式要求在项目的入口文件中手动引入 core-js/stable 和 regenerator-runtime/runtime
      // 这样 Babel 就会根据浏览器支持情况自动引入所需的 polyfill
      useBuiltIns: 'entry'
    }]
  ]
};

在入口文件中引入 polyfill
为了配合 useBuiltIns: ‘entry’ 配置项，需要在项目的入口文件中手动引入 polyfill：

// main.js 或 index.js
// 这个模块包含了所有必要的 polyfill，以确保你使用的现代 JavaScript 特性可以在老旧浏览器中运行
// 如果没有引入，项目中的某些 JavaScript 特性（如 Promise、Array.from、Object.assign 等）在老旧浏览器（如 IE11）上可能无法正常工作，因为这些浏览器不支持现代 JavaScript 特性，而你没有引入必要的 polyfill
import 'core-js/stable'; 
// 这个模块是用来支持 async/await 和生成器函数的 polyfill。没有它，使用这些特性的代码在老旧浏览器中会报错。
// 如果没有引入，缺少必要的 polyfill 可能会导致项目在老旧浏览器中出现运行时错误。比如，如果代码中使用了 async/await 而没有引入 regenerator-runtime/runtime，那么在不支持这些特性的浏览器中就会报错
import 'regenerator-runtime/runtime';
import Vue from 'vue';
import App from './App.vue';

new Vue({
  render: h => h(App),
}).$mount('#app');

// 需要安装 core-js 和 regenerator-runtime 包

npm install core-js regenerator-runtime --save

2.3）、package.json 文件中的 babel 字段
你也可以在 package.json 文件中直接配置 Babel，这种方式适用于小型项目。
使用场景：适用于简单项目，将 Babel 配置与其他配置集中在一个文件中。
优点：减少配置文件数量，集中管理项目配置。
缺点：配置不如独立文件直观，适用范围有限

示例 package.json 文件：

{
  "name": "my-project",
  "version": "1.0.0",
  "babel": {
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-transform-runtime"]
  }
}

2.4)、选择那种方式配置
小型项目：可以将配置放在 .babelrc 文件或 package.json 中的 babel 字段。
大型项目或 monorepo：建议使用 babel.config.js 文件，以确保配置能够应用于整个项目。
2.5)、检查babel配置
2.5.1)、–show-config 是 Babel 7.13.0 引入的新功能，如果无法检查，可以使用2.5.2检查

npx babel --show-config

2.5.2）、使用 Babel CLI 构建文件
2.5.2.1）、创建一个测试文件，例如 test.js

const example = () => {
  console.log('Babel test');
};
example();

2.5.2.2）、运行 Babel 构建

npx babel test.js --out-file compiled.js

查看生成的 compiled.js 文件，确认 Babel 配置是否生效。

三、其他
3.1)、babel-plugin-import
babel-plugin-import 可以帮助你按需加载库中的模块，以减小打包后的文件大小。以下是如何在 Babel 配置中添加这个插件的示例：

更新babel.config.js 文件

module.exports = {
  presets: [
    ['@vue/app', {
      useBuiltIns: 'entry'
    }]
  ],
  plugins: [
    ['import', {
      libraryName: 'lodash', // 示例：按需加载 lodash
      libraryDirectory: '',
      camel2DashComponentName: false
    }, 'lodash']
  ]
};

3.2、使用 @babel/eslint-parser 来解析你的代码
使用 @babel/eslint-parser 来解析你的代码，以便 ESLint 能够理解最新的 JavaScript 语法。创建或更新 .eslintrc.js 文件：

module.exports = {
  // 指定使用 @babel/eslint-parser 作为解析器，以支持最新的 JavaScript 语法
  parser: '@babel/eslint-parser',
  
  // 解析器选项
  parserOptions: {
    // 不要求配置文件，直接在这里配置 Babel 选项
    requireConfigFile: false,
    
    // Babel 选项
    babelOptions: {
      // 使用 @vue/app 预设，适用于 Vue 项目的 Babel 配置
      presets: ['@vue/app']
    }
  },
  
  // 扩展的规则集
  extends: [
    // 使用推荐的 ESLint 规则
    'eslint:recommended',
    
    // 使用 Vue 相关的基本规则集
    'plugin:vue/essential'
  ],
  
  // 自定义规则
  rules: {
    // 在这里可以添加或覆盖默认的 ESLint 规则
    // 例如：
    // "no-console": "off", // 关闭对 console 的警告
    // "no-unused-vars": "warn" // 对未使用的变量仅警告而非报错
  }
};