Babel 配置
Taro 项目的 Babel 配置位于根目录的 babel.config.js
文件中,里面默认添加了一个 preset:babel-preset-taro
,它会根据项目的技术栈添加一些常用的 presets
和 plugins
。
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
只在使用 React 时生效。
默认值:'automatic'
@babel/preset-react
的 runtime 配置项。
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-env
的 targets 配置项。
useBuiltIns
默认值:false
有效值:'entry'
| 'usage'
| false
useBuiltIns: 'entry'
优点:全局彻底 polyfill,就算 node_modules
中的依赖存在不兼容的代码,也能成功运行。
缺点:可能会引入冗余代码、影响全局变量。
当传入 'entry'
时,会把 @babel/preset-env
的 useBuiltIns 选项设为 'entry'
、corejs 选项设为 '3'
。
开发者需要在入口文件 app.js
中引入 core-js
:
import 'core-js'
Babel 会根据 targets,引入对应的 core-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-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
可以去掉冗余代码,对于一些严格限制包体大小的场景(比如 PWA 等)有帮助,但这也会去掉页面和组件的懒加载,导致 app.js 过大。
注意:h5 平台默认关闭,其他平台默认开启,小程序默认是不支持动态加载的,可以通过dynamic-import 插件提供该能力。 :::
类型:boolean