从 Webpack 外部 Preact

Question

问题

我需要用 preact 替换 react 的 webpack 外部组件，但仅限于生产环境。
我需要一种方法来验证我的包使用的是 preact 而不是 react。

例如，在我的页面上我会有这些脚本

<script src="./externals.js"></script>
<script src="./title-component.js"></script>

在我的 npm react 组件包中

我用 react 编写的 npm 包应该可以与我的 preact 外部脚本一起使用。

class Title extends React.Component {
  render(){
    return <h1>Test</h1>
  }
}

在 Webpack 产品配置中

根据 preact 文档，我添加了别名

resolve: {
    alias: {    
        "react": "preact/compat",
        "react-dom/test-utils": "preact/test-utils",
        "react-dom": "preact/compat"
    };
}

在 Webpack 外部

按照模块捆绑中的建议，我的构建不包含 React，而是将其列为对等依赖项。

      react: {
            root: ['React'],
            commonjs2: 'react',
            commonjs: 'react',
            amd: 'react'
        },
        'react-dom': {
            root: ['ReactDom'],
            commonjs2: 'react-dom',
            commonjs: 'react-dom',
            amd: 'react-dom'
        },

任何帮助将不胜感激。

Answer 1

a way to verify that my package is using preact not react

查看已编译和未压缩的代码，了解如何调用组件的函数：

React：_jsxs() 或 React.createElement()

Preact：Preact.h()（或者只是 h()？）

参考：@babel/plugin-transform-react-jsx

从 Webpack 外部 Preact

Preact from Webpack externals

webpack

preact

问题

例如，在我的页面上我会有这些脚本

在我的 npm react 组件包中

在 Webpack 产品配置中

在 Webpack 外部