Needless Patchouli Manufacture

    babel-preset-taro

    3.3.9 • Public • Published

    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. Vue

    presetes
    • @vue/babel-preset-jsx

    4. 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 只在使用 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'

    :::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 配置项。

    Keywords

    none

    Install

    npm i babel-preset-taro

    DownloadsWeekly Downloads

    1,941

    Version

    3.3.9

    License

    MIT

    Unpacked Size

    18.7 kB

    Total Files

    5

    Last publish

    Collaborators

    • defaultlee
    • yuche