本文主要是介绍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 就会根据浏览器支持情况自动引入所需的 polyfilluseBuiltIns: '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', // 示例：按需加载 lodashlibraryDirectory: '',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" // 对未使用的变量仅警告而非报错}
};
这篇关于babel的使用和设置的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
