Babel-preset-vnmf NPM

title: Babel Configuration

The Babel configuration of the Vnmf project is located in the babel.config.js file in the root directory, which adds a preset by default: babel-preset-vnmf, which will add some commonly used presets and according to the project's technology stack plugins.

module.exports = {
  presets: [
    ['vnmf', {/** configuration items */}]
  ]
}

Developers can modify babel.config.js, modify the configuration items of babel-preset-vnmf, or add presets and plugins they want.

babel-preset-vnmf

babel-preset-vnmf will selectively use the following presets and plugins according to the current project's technology stack.

1. Generic

presets

@babel/preset-env
@babel/preset-typescript (TypeScript environment)

plugins

@babel/plugin-transform-runtime
@babel/plugin-proposal-decorators
@babel/plugin-proposal-class-properties
babel-plugin-dynamic-import-node (applet environment)

2. React

presets

@babel/preset-react

plugins

react-refresh/babel

3. Vue

presets

@vue/babel-preset-jsx

4. Vue3

plugins

@vue/babel-plugin-jsx

The configuration items of babel-preset-vnmf will be described in detail below.

reactJsxRuntime

:::note Only works when using React. :::

Default value: 'automatic'

The runtime configuration of @babel/preset-react.

hot

:::note Only works when using React. :::

default: true

Whether to introduce react-refresh/babel to support using fast-refresh.

vueJsx

:::note Only works when using Vue/Vue3. :::

default: true

type: true | false | object

Whether to use @vue/babel-preset-jsx (Vue) or @vue/babel-plugin-jsx (Vue3) to support using jsx.

When passing an object, it is equivalent to setting true, and the object will be used as @vue/babel-preset-jsx (Vue) or @vue/babel-plugin-jsx ( Vue3) parameters.

targets

Defaults:

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

The targets configuration item of @babel/preset-env.

useBuiltIns

Default value: false

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

useBuiltIns: 'entry'

:::info Advantage: Completely global polyfill, even if there is incompatible code in the dependencies in node_modules, it can run successfully.

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

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

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

import "core-js"

Babel will introduce the corresponding core-js dependencies according to targets. For example, the above code will compile to:

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

Of course, because Vnmf sets corejs to '3' at this time, you can use core-js@3 The ability to manually import on demand, please refer to the document(https:/ /babeljs.io/docs/en/babel-preset-env#usebuiltins).

useBuiltIns: 'usage'

:::info Advantages: Introduced on demand, does not affect global variables.

Disadvantage: Dependencies in node_modules are not processed by default, and babel-loader needs to be configured manually. :::

When 'usage' is passed, the corejs option of @babel/plugin-transform-runtime will be Set to 3.

Note: When passing 'usage', Vnmf does not use useBuiltIns: 'usage' of @babel/preset-env but corejs: 3 of@babel/plugin-transform-runtime. The reasons are: 1. When the two are set at the same time, there will be conflicts. Second, the latter, relative to the former, does not affect global variables.