babel-preset-vnmf

---

title: Babel 配置

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

module.exports = {
  presets: [
    ['vnmf', {/** 配置项 */}]
  ]
}

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

babel-preset-vnmf

babel-preset-vnmf 会根据当前项目的技术栈，选择性地使用以下的 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-vnmf 的配置项。

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：

import "core-js"

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

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

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

useBuiltIns: 'usage'

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

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

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

注意：传入 'usage' 时， Vnmf 没有使用 @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 配置项。