title: Babel 配置

Taro 项目的 Babel 配置位于根目录的 babel.config.js 文件中，里面默认添加了一个 preset：babel-preset-taro，它会根据项目的技术栈添加一些常用的 presets 和 plugins。

```js title=”babel.config.js” module.exports = { presets: [ [‘taro’, {/* 配置项 /}] ] }

  2. 开发者可以修改 `babel.config.js`，修改 `babel-preset-taro` 的配置项，或添加自己想要的 `presets` 和 `plugins`。
  4. ## babel-preset-taro
  6. `babel-preset-taro` 会根据当前项目的技术栈，选择性地使用以下的 `presets` 和 `plugins`。
  9. #### 1. 通用
  11. ##### presets
  13. - `@babel/preset-env`
  14. - `@babel/preset-typescript`（TypeScript 环境）
  16. ##### plugins
  18. - `@babel/plugin-transform-runtime`
  19. - `@babel/plugin-proposal-decorators`
  20. - `@babel/plugin-proposal-class-properties`
  21. - `babel-plugin-dynamic-import-node`（小程序环境）
  23. #### 2. React
  25. ##### presets
  27. - `@babel/preset-react`
  29. ##### plugins
  31. - `react-refresh/babel`
  33. #### 3. Vue
  35. ##### presetes
  37. - `@vue/babel-preset-jsx`
  39. #### 4. Vue3
  41. ##### plugins
  43. - `@vue/babel-plugin-jsx`
  45. 以下将详细介绍 `babel-preset-taro` 的配置项。
  47. ### reactJsxRuntime
  49. :::note
  50. 只在使用 **React** 时生效。
  51. :::
  53. **默认值**：`'automatic'`
  55. `@babel/preset-react` 的 [runtime](https://babeljs.io/docs/en/babel-preset-react#runtime) 配置项。
  57. ### hot
  59. :::note
  60. 只在使用 **React** 时生效。
  61. :::
  63. **默认值**：`true`
  65. 是否引入 `react-refresh/babel` 来支持使用 [fast-refresh](h5#fast-refresh)。
  67. ### vueJsx
  69. :::note
  70. 只在使用 **Vue/Vue3** 时生效。
  71. :::
  73. **默认值**：`true`
  75. **类型**：`true` | `false` | `object`
  77. 是否使用 `@vue/babel-preset-jsx`（Vue）或 `@vue/babel-plugin-jsx`（Vue3）来支持使用 `jsx`。
  79. 当传入一个 `object` 时，等同于设置为 `true`，且该 `object` 将会作为 `@vue/babel-preset-jsx`（Vue）或 `@vue/babel-plugin-jsx`（Vue3）的参数。
  81. ### targets
  83. **默认值**：
  85. ```js
  86. {
  87.   ios: '9',
  88.   android: '5'
  89. }

@babel/preset-env 的 targets 配置项。

useBuiltIns

默认值：false

有效值：'entry' | 'usage' | false

useBuiltIns: ‘entry’

:::info 优点：全局彻底 polyfill，就算 node_modules 中的依赖存在不兼容的代码，也能成功运行。

缺点：可能会引入冗余代码、影响全局变量。 :::

当传入 'entry' 时，会把 @babel/preset-env 的 useBuiltIns 选项设为 'entry'、corejs 选项设为 '3'。

开发者需要在入口文件 app.js 中引入 core-js：

```js title=”src/app.js” import “core-js”

  2. Babel 会根据 [targets](babel-config#targets)，引入对应的 `core-js` 依赖。例如上述代码会被编译为：
  4. ```js title="dist/app.js"
  5. import "core-js/modules/es.string.pad-start";
  6. import "core-js/modules/es.string.pad-end";
  7. // ...

当然，因为这时 Taro 把 corejs 设置为 '3'，所以可以使用 core-js@3 手动按需引入的能力，详情请见文档。

useBuiltIns: ‘usage’

:::info 优点：按需引入、不会影响全局变量。

缺点：默认不会处理 node_modules 中的依赖，需要手动配置 babel-loader。 :::

当传入 'usage' 时，会把 @babel/plugin-transform-runtime 的 corejs 选项设为 3。

注意：传入 'usage' 时， Taro 没有使用 @babel/preset-env 的 useBuiltIns: 'usage' 而是使用了 @babel/plugin-transform-runtime 的 corejs: 3。原因在于：一、两者同时设置时会产生冲突。二、后者相对于前者，不会影响全局变量。

useBuiltIns: false

当传入 false 时，会把 @babel/preset-env 的 useBuiltIns 选项设为 false，此时不会引入 core-js。

loose

默认值：false

同时是 @babel/preset-env、@babel/plugin-proposal-class-properties 的 loose 配置项。

debug

默认值：false

@babel/preset-env 的 debug 配置项。

modules

默认值：false

@babel/preset-env 的 modules 配置项。

spec

@babel/preset-env 的 spec 配置项。

configPath

@babel/preset-env 的 configPath 配置项。

include

@babel/preset-env 的 include 配置项。

exclude

@babel/preset-env 的 exclude 配置项。

shippedProposals

@babel/preset-env 的 shippedProposals 配置项。

forceAllTransforms

@babel/preset-env 的 forceAllTransforms 配置项。

decoratorsBeforeExport

@babel/plugin-proposal-decorators 的 decoratorsBeforeExport 配置项。

decoratorsLegacy

默认值：true

@babel/plugin-proposal-decorators 的 lagacy 配置项。

absoluteRuntime

默认值：开发者根目录 node_modules 中的 @babel/plugin-transform-runtime 的路径。

类型：string

@babel/plugin-transform-runtime 的 absoluteRuntime 配置项。

version

默认值：开发者根目录 node_modules 中的 @babel/plugin-transform-runtime 的版本号。

类型：string

@babel/plugin-transform-runtime 的 version 配置项。

dynamic-import-node

:::note 可以去掉冗余代码，对于一些严格限制包体大小的场景（比如 PWA 等）有帮助，但这也会去掉页面和组件的懒加载，导致 app.js 过大。

注意：h5 平台默认关闭，其他平台默认开启，小程序默认是不支持动态加载的，可以通过dynamic-import 插件提供该能力。 :::

类型：boolean