跳到主要内容
版本:4.x

Babel 配置

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

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

开发者可以修改 babel.config.js,修改 babel-preset-taro 的配置项,或添加自己想要的 presetsplugins

babel-preset-taro

babel-preset-taro 会根据当前项目的技术栈,选择性地使用以下的 presetsplugins

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

备注

只在使用 React 时生效。

默认值'automatic'

@babel/preset-reactruntime 配置项。

ts

备注

使用 Typescript

hot

备注

只在使用 React 时生效。

默认值true

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

vueJsx

备注

只在使用 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-envtargets 配置项。

useBuiltIns

默认值false

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

useBuiltIns: 'entry'

信息

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

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

当传入 'entry' 时,会把 @babel/preset-envuseBuiltIns 选项设为 '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'

信息

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

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

当传入 'usage' 时,会把 @babel/plugin-transform-runtimecorejs 选项设为 3

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

useBuiltIns: false

当传入 false 时,会把 @babel/preset-envuseBuiltIns 选项设为 false,此时不会引入 core-js

loose

默认值false

同时是 @babel/preset-env@babel/plugin-proposal-class-propertiesloose 配置项。

debug

默认值false

@babel/preset-envdebug 配置项。

modules

默认值false

@babel/preset-envmodules 配置项。

spec

@babel/preset-envspec 配置项。

configPath

@babel/preset-envconfigPath 配置项。

include

@babel/preset-envinclude 配置项。

exclude

@babel/preset-envexclude 配置项。

shippedProposals

@babel/preset-envshippedProposals 配置项。

forceAllTransforms

@babel/preset-envforceAllTransforms 配置项。

decoratorsBeforeExport

@babel/plugin-proposal-decoratorsdecoratorsBeforeExport 配置项。

decoratorsLegacy

默认值true

@babel/plugin-proposal-decoratorslagacy 配置项。

absoluteRuntime

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

类型string

@babel/plugin-transform-runtimeabsoluteRuntime 配置项。

version

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

类型string

@babel/plugin-transform-runtimeversion 配置项。

dynamic-import-node

备注

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

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

类型boolean