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

Question

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

我创建的示例组件只需要一个label道具和 colors 橙色。 一些超级简单如此复杂的逻辑将被排除在等式之外。

反应代码以呈现上述文本：

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 格式进行导入。 我还尝试将 package 相同的内容导入 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 不是 function Brand Brand.tsx:8 React 17 test.html:20 Brand.tsx:8:11

任何帮助将不胜感激。

在此先感谢您的时间！

Answer 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>

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2021-12-21 18:57:22

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2021-12-21 18:57:22

解决方案1
1 已采纳 2021-12-21 18:57:22