@emotion/babel-plugin-jsx-pragmatic (英语)

这个包是叉子 bail- plugin- jsx- pragmatic (中文(简体) ) 支持React Flagments. (英语).

Bail-plugin-jsx-pragmatic的原始README经过一些修改后显示如下.

@babel/ plugin- transform- react-jsx 有一个 pragma 选项,用于将 JSX 转换为函数调用而非默认函数 React.createElement。 。 。 .

此 Babel 插件是该特性的伴奏, 它允许您动态加载一个与该特性相关的模块 pragma 数值.

示例

鉴于此文件 :

<Some jsx="element" />

belel通常将JSX改为:

React.createElement(Some, { jsx: 'element' })

通过设置 pragma 类似此选项 :

babel.transformSync(code, {
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'whatever'
      }
    ]
  ]
})

它将改为:

whatever(Some, { jsx: 'element' })

不过,你可能需要装入一个对应 whatever 在包含JSX的每个模块中:

import whatever from 'whatever'
// or
var whatever = require('whatever')

此插件允许您使该部分也具有动态 :

babel.transformSync(code, {
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'whatever'
      }
    ],

    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        module: '/something/whatever',
        import: 'whatever'
      }
    ]
  ]
})

成果:

import { default as whatever } from '/something/whatever'

选项

module

弦乐 模块 ID 或路径名 。 其价值 ModuleSpecifier 进口。 要求.

import

弦乐 您想要导入的标识符 module 带。 这应当与源标识符对应 pragma 数值。 要求。 实例:

{
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'x'
      }
    ],

    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        module: '/something/whatever',
        import: 'x'
      }
    ]
  ]
}

{
  plugins: [
    [
      '@babel/plugin-transform-react-jsx',
      {
        pragma: 'x.y'
      }
    ],

    [
      '@emotion/babel-plugin-jsx-pragmatic',
      {
        module: '/something/whatever',
        import: 'x'
      }
    ]
  ]
}

export

弦乐 要导入的导出为 import 从 module默认值为 default (默认导出). 实例:

// Will import the default export (`default`)
{
  module: "whatever",
  import: "x"
}
// import {default as x} from "whatever"


// Will import the default export (`default`)
{
  module: "whatever",
  import: "x",
  export: "default",
}
// import {default as x} from "whatever"


// Will import the export named `something`
{
  module: "whatever",
  import: "x",
  export: "something",
}
// import {something as x} from "whatever"

已知问题

• 档案被变换时没有做特别的事 已导入或声明名称与 import。 。 。 .

• 不考虑当一个文件 实际包含 JSX pragma 评论.