title: Babel Configuration

The Babel configuration for the Taro project is located in the babel.config.js file in the root directory, where a preset is added by default: babel-preset-taro, which adds some common presets and plugins depending on the project’s technology stack.

```js title=”babel.config.js” module.exports = { presets: [ [‘taro’, {/* Babel configuration items /}] ] }

  2. Developers can modify `babel.config.js`, change the configuration items of `babel-preset-taro`, or add `presets` and `plugins` that they want.
  4. ## babel-preset-taro
  6. `babel-preset-taro` will optionally use the following `presets` and `plugins` depending on the current project's technology stack.
  9. #### 1. 通用
  11. ##### presets
  13. - `@babel/preset-env`
  14. - `@babel/preset-typescript`（TypeScript Environment）
  16. ##### plugins
  18. - `@babel/plugin-transform-runtime`
  19. - `@babel/plugin-proposal-decorators`
  20. - `@babel/plugin-proposal-class-properties`
  21. - `babel-plugin-dynamic-import-node`（Mini  Program Environment）
  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. The configuration items for `babel-preset-taro` are described in detail below.
  47. ### reactJsxRuntime
  49. :::note
  50. Effective only when using **React**.
  51. :::
  53. **Default value**:`'automatic'`
  55. `@babel/preset-react` [runtime](https://babeljs.io/docs/en/babel-preset-react#runtime) configuration items.
  57. ### hot
  59. :::note
  60. Effective only when using **React**.
  61. :::
  63. **Default value**:`true`
  65. Whether to introduce `react-refresh/babel` to support the use of [fast-refresh](h5#fast-refresh)。
  67. ### vueJsx
  69. :::note
  70. Effective only when using **Vue/Vue 3**.
  71. :::
  73. **Default value**: `true`
  75. **Type**: `true` | `false` | `object`
  77. Whether to use `@vue/babel-preset-jsx` (Vue) or `@vue/babel-plugin-jsx` (Vue3) to support the use of `jsx`.
  79. When an `object` is passed in, it is equivalent to setting it to `true` and the `object` will be used as an argument to `@vue/babel-preset-jsx` (Vue) or `@vue/babel-plugin-jsx` (Vue3).
  81. ### targets
  83. **Default value**:
  85. ```js
  86. {
  87.   ios: '9',
  88.   android: '5'
  89. }

@babel/preset-env targetsconfiguration items.

useBuiltIns

Default value: false

Valid values: 'entry' | 'usage' | false

useBuiltIns: ‘entry’

:::info Advantages: global complete polyfill, even if there is incompatible code in the dependencies in node_modules, it will run successfully.

Disadvantages: May introduce redundant code and affect global variables. :::

When 'entry' is passed, it sets the useBuiltIns option of @babel/preset-env to 'entry', the corejs option is set to '3'.

Developers need to introduce core-js in the entry file app.js.

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

  2. Babel will introduce the corresponding `core-js` dependencies according to [targets](babel-config#targets). For example, the above code will be compiled as:
  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. // ...

Of course, since Taro sets corejs to '3' at this point, you can use core-js@3 the ability to manually bring in on-demand, see documentation for details

useBuiltIns: ‘usage’

:::info Advantages: Introduces on-demand and does not affect global variables.

Disadvantages: By default, dependencies in node_modules are not handled and you need to configure babel-loader manually. :::

When passed in 'usage', it sets the corejs option of @babel/plugin-transform-runtime to 3.

Note: When passing in 'usage', Taro does not use @babel/preset-env‘s useBuiltIns: 'usage' but @babel/plugin-transform-runtime‘s corejs: 3. The reason for this is: First, there is a conflict when both are set at the same time. Second, the latter does not affect global variables as opposed to the former.

useBuiltIns: false

When passed false, the useBuiltIns option of @babel/preset-env will be set to false, which will not introduce the core-js.

loose

Default value: false

Also the loose configuration item for @babel/preset-env, @babel/plugin-proposal-class-properties.

debug

Default value: false

@babel/preset-env debug configuration item.

modules

Default value: false

@babel/preset-env modules configuration item。

spec

@babel/preset-env spec configuration item。

configPath

@babel/preset-env configPath configuration item。

include

@babel/preset-env include configuration item。

exclude

@babel/preset-env exclude configuration item。

shippedProposals

@babel/preset-env shippedProposals configuration item。

forceAllTransforms

@babel/preset-env forceAllTransforms configuration item。

decoratorsBeforeExport

@babel/plugin-proposal-decorators decoratorsBeforeExport configuration item。

decoratorsLegacy

Default value: true

@babel/plugin-proposal-decorators lagacy configuration item。

absoluteRuntime

Default value: Path to @babel/plugin-transform-runtime in the developer root node_modules.

Type:string

@babel/plugin-transform-runtime absoluteRuntime configuration item。

version

Default value: Version number of @babel/plugin-transform-runtime in node_modules in the developer’s root directory.

Type:string

@babel/plugin-transform-runtime version configuration item。