babel-preset-mpx

Install

npm install @mpxjs/babel-preset-mpx @babel/runtime @babel/runtime-corejs3

在 babel.config.js 中使用 @didi/babel-preset-mpx

module.exports = {
  presets: [
    '@mpxjs/babel-preset-mpx'
  ]
}

Options

mode

Mpx编译的目标平台，可选值为 'wx', 'ali', 'swan', 'qq', 'tt', 'web', 'dd', 'qa', 'jd', 'android', 'ios', 'harmony'，默认值为 process.env.MPX_CURRENT_TARGET_MODE

如果你使用的 @mpxjs/webpack-pulgin 还不支持 MPX_CURRENT_TARGET_MODE， 则可以 mode 参数手动指定。

module.exports = {
  presets: [
    [
        '@mpxjs/babel-preset-mpx',
        {
            mode: 'wx'
        }
    ]
  ]
}

skyline

在微信小程序skyline渲染中，如果使用到 worklet 动画 的文件，需要经过特殊的babel编译，使用 skyline 配置可指定那些文件需要编译 worklet

const path = require('path')

module.exports = {
  presets: [
    [
        '@mpxjs/babel-preset-mpx',
        {
            skyline: {
                worklet: {
                    include: [
                        path.resolve('./src/component/a.mpx'),
                        path.resolve('./src/component/b.mpx')
                    ]
                }
            }
        }
    ]
  ]
}

reanimated

用于控制是否使用 react-native-reanimated/plugin 插件，默认为 true，对于需要替换为其他版本的 worklet 处理插件非常有用，例如 @react-native-oh-tpl/react-native-reanimated

注意，Mpx 框架内部代码本身包含 react-native-reanimated 的 worklet 函数，如果关闭，需确保内部的 worklet 能正常编译。

const path = require('path')

module.exports = {
  presets: [
    [
        '@mpxjs/babel-preset-mpx',
        {
            reanimated: false
        }
    ]
  ]
}