Skip to main content
Version: 下个版本

Babel 配置

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

babel.config.js
module.exports = {
  presets: [
    ['taro', {/** 配置项 */}]
  ]
}

开发者可以修改 babel.config.js，修改 babel-preset-taro 的配置项，或添加自己想要的 presets 和 plugins。

babel-preset-taro​

babel-preset-taro 会根据当前项目的技术栈，选择性地使用以下的 presets 和 plugins。

1. 通用​

presets​
  • @babel/preset-env
  • @babel/preset-typescript（TypeScript 环境）
plugins​
  • @babel/plugin-transform-runtime
  • @babel/plugin-proposal-decorators
  • @babel/plugin-proposal-class-properties
  • babel-plugin-dynamic-import-node（小程序环境）

2. React​

presets​
  • @babel/preset-react
plugins​
  • react-refresh/babel

3. Vue​

presetes​
  • @vue/babel-preset-jsx

4. Vue3​

plugins​
  • @vue/babel-plugin-jsx

以下将详细介绍 babel-preset-taro 的配置项。

reactJsxRuntime​

note

只在使用 React 时生效。

默认值：'automatic'

@babel/preset-react 的 runtime 配置项。

hot​

note

只在使用 React 时生效。

默认值：true

是否引入 react-refresh/babel 来支持使用 fast-refresh。

vueJsx​

note

只在使用 Vue/Vue3 时生效。

默认值：true

类型：true | false | object

是否使用 @vue/babel-preset-jsx（Vue）或 @vue/babel-plugin-jsx（Vue3）来支持使用 jsx。

当传入一个 object 时，等同于设置为 true，且该 object 将会作为 @vue/babel-preset-jsx（Vue）或 @vue/babel-plugin-jsx（Vue3）的参数。

targets​

默认值：

{
  ios: '9',
  android: '5'
}

@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：

src/app.js
import "core-js"

Babel 会根据 targets，引入对应的 core-js 依赖。例如上述代码会被编译为：

dist/app.js
import "core-js/modules/es.string.pad-start";
import "core-js/modules/es.string.pad-end";
// ...

当然，因为这时 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 中生效，非 h5 平台默认开启。

默认值：false

类型：boolean