【问题标题】：Preact from Webpack externals从 Webpack 外部进行 Preact
【发布时间】：2020-06-06 05:49:21
【问题描述】：

问题

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

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

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

在我的 npm react 组件包中

我的 npm 包是用 react 编写的，应该可以与我的 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'
        },

我们将不胜感激。

【问题讨论】：

> 我需要用 preact 替换 react 的 webpack 外部组件，但仅限于生产环境。恕我直言，您应该始终在尽可能接近生产的情况下进行演示和测试。使用 react 进行迭代，然后使用 preact 进行最终打包是自找麻烦，因为 Preact 中有一些事情在 React 中是做不到的，反之亦然。也许更好的问题是，“如何同时使用 React 和 Preact 测试构建？” ?

标签： webpack preact

【解决方案1】：

一种验证我的包是否使用 preact 而不是反应的方法

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

反应：_jsxs() 或 React.createElement()

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

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

【讨论】：