为 React 和 Preact 创建组件库的最佳方法是什么？

Question

我目前正在从事一个同时涉及 React 和 Preact 的项目。我遇到了这个，我需要为 React 和 Preact 使用相同的组件。

将组件放入npm库包是不是一个好主意。为 React 和 Preact 创建组件库的可能方法是什么？期待听到您的想法和讨论。

代码可能如下所示：

反应项目：Home.js

import React from 'react'
import Fancy from 'fancy-component/react' // My <Fancy /> component library

class Home extends React.Component {
  render() {
    return (
      <div>
        {/* Other parts of the code run here*/}
        <Fancy text='' />
      </div>
    )
  }
}

export default Home

Preact 项目：AnswerPage.js

import { h, Component } from 'preact'
import Fancy from 'fancy-component/preact' // My <Fancy /> component library

class AnswerPage extends Component {
  render() {
    return (
      // Other Preact codes run here again
      <Fancy text=' again' />
    )
  }
}

export default AnswerPage

组件库：fancy-component

const Fancy = ({ text = '' }) => (
  <div>
    <span>{`This is so Fancy ✨ ${text}`}</span>
  </div>
)
export default Fancy

Answer 1

我们最近做了这件事，因为我们在网上找不到太多关于这件事的信息，所以我们进行了大量的试验和错误。这就是我们最终得到的结果：

文件夹结构：

/apps
  /mobile
  /desktop
/shared
  /components

在 preact 10 中，preact-compat 是内置的，因此您不必担心有单独的组件 - 只需像往常一样对共享文件夹中的组件使用 React，preact 会自动正确地为导入添加别名。

就别名而言，我们将其添加到 preact.config.js 中，以便我们可以从应用程序目录

中导入 @components/Date 等组件

config.resolve.alias['@components'] = path.resolve(__dirname, '../../shared/components')

对于 React 应用程序，我能做到这一点的唯一方法是在 babel.config.js 中添加别名，如下所示：

['module-resolver', {
  alias: {
    '@components': '../../shared/components'
  }
}]

我希望这可以帮助可能卡在这个问题上的其他人！

为 React 和 Preact 创建组件库的最佳方法是什么？

What is the best way to create component library for both React and Preact?

javascript

npm

reactjs

preact

react-component