Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

babel-preset-taro

Package Overview
Dependencies
Maintainers
2
Versions
645
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

babel-preset-taro

Taro babel preset

  • 4.0.6
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.7K
increased by8.25%
Maintainers
2
Weekly downloads
 
Created
Source

title: Babel 配置

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

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. Vue3
plugins
  • @vue/babel-plugin-jsx

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

reactJsxRuntime

:::note 只在使用 React 时生效。 :::

默认值'automatic'

@babel/preset-reactruntime 配置项。

hot

:::note 只在使用 React 时生效。 :::

默认值true

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

vueJsx

:::note 只在使用 Vue3 时生效。 :::

默认值true

类型true | false | object

是否使用 @vue/babel-plugin-jsx 来支持使用 jsx

当传入一个 object 时,等同于设置为 true,且该 object 将会作为 @vue/babel-plugin-jsx 的参数。

targets

默认值

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

@babel/preset-envtargets 配置项。

useBuiltIns

默认值false

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

useBuiltIns: 'entry'

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

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

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

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

缺点:默认不会处理 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 配置项。

FAQs

Package last updated on 23 Sep 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc