将自定义组件库中的 React 组件导入 HTML

Question

我创建了一个测试反应组件库（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>

但是我得到以下错误：

The above error occurred in the component:

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

Uncaught TypeError: React__namespace.createElement is not a 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

Importing React component from custom component library into HTML

html

rollup

typescript

reactjs