将 React 组件从自定义组件库导入 HTML答案

【问题标题】：Importing React component from custom component library into HTML将 React 组件从自定义组件库导入 HTML
【发布时间】：2022-01-23 03:50:31
【问题描述】：

我创建了一个测试反应组件库（React、Typescript）并尝试使用 Rollup 将其打包到 UMD 中，以便我可以将组件导入 HTML 页面。

我创建的示例组件只使用了一个 label 属性并将其着色为橙色。一些超级简单如此复杂的逻辑将被排除在等式之外。

React 代码呈现上述文本：

import * as React from 'react';
import * as Test from 'react-webpack-demo';

function App() {
  return (
    <div>
      <h1>
        {
          React.createElement(Test.Brand, { label: 'Brand Label Text'})
        }
      </h1>
    </div>
  );
}

export default App;

上面的组件是通过 Rollup 打包成 CJS 格式来导入的。我还尝试将相同的内容打包到 UMD 中，以便可以将其导入 HTML。完整的rollup.config.js 文件如下：

import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';

import packageJson from './package.json';

export default [
    {
        input: 'src/index.ts',
        output: [
            {
                file: packageJson.main,
                format: 'cjs',
                sourcemap: true
            },
            {
                file: packageJson.module,
                format: 'umd',
                name: 'Test',
                sourcemap: true
            }
        ],
        plugins: [
            resolve(),
            babel({
                exclude: 'node_modules/**',
                presets: [
                    '@babel/preset-react',
                    '@babel/preset-typescript'
                ]
            }),
            external(),
            commonjs(),
            typescript({ tsconfig: './tsconfig.json' })
        ],
        external: [
            ...Object.keys(packageJson.dependencies || {}),
            ...Object.keys(packageJson.peerDependencies || {})
        ]
    }
]

然后我尝试将新打包的 UMD 文件导入我的 HTML 页面，并将其呈现为 DOM 元素，如下所示：

<html lang="en-US">

<head>
    <title>Test</title>
    <meta charset="utf-8" />
    <script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
    <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>

<body>
    <h1>Testing rollup in plain HTML</h1>
    <hr />
    <div id='brand-test'></div>

    <script>
        const el = React.createElement;
        const domContainer = document.getElementById('brand-test');
        ReactDOM.render(el(
            Test.Brand,
            {
                label: 'Demo works!'
            }
        ), domContainer);
    </script>
</body>

</html>

但我收到以下错误：

组件出现上述错误：

Brand@file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1

未捕获的类型错误：React__namespace.createElement 不是函数品牌 Brand.tsx:8 反应 17 test.html:20 Brand.tsx:8:11

任何帮助将不胜感激。

提前感谢您的宝贵时间！

【问题讨论】：

你有没有尝试在反应导入脚本标签之后将你的脚本标签放入库？
哦..我的..天哪，这绝对有效！太感谢了！我不敢相信这就是全部。
太棒了！我已将其添加为答案。

标签： html reactjs typescript rollup

【解决方案1】：

似乎脚本标签的顺序不正确。您的库需要先导入 React，然后才能执行它的脚本。

只需修复订单以使其正常工作

<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>

【讨论】：