时间戳

首页 > 解决方案 > 如何使用 CDN 将 React 组件作为 npm 包提供服务

reactjs - 如何使用 CDN 将 React 组件作为 npm 包提供服务

问题描述

我需要将我的 React 组件（甚至可能是完整视图）交付给 webflow 等 html 页面......

所有这些组件都将在 npm 包中，我想使用 CDN 为它们提供服务

但我找不到让它工作的方法我完全使用了这个教程我找到了https://github.com/codingforentrepreneurs/Create-a-Standalone-React-App

并尝试我的东西，没有任何帮助

如果有人能告诉我我做错了什么，那将是惊人的！

我需要能够在这里导入我的 utils 包

'use strict'
import {Button} from '@bondsports/utils'
const e = React.createElement;


class HelloWorld extends React.Component {
    handleClick = (event) => {
        alert("Hello there")
    }
    render () {
        const {userid} = this.props
        return <h1><span onClick={this.handleClick}>Hello World {userid}</span></h1>
    }
}


var containers = document.querySelectorAll(".cfe-app")

containers.forEach(domContainer => {
    const userid = domContainer.dataset.userid

    ReactDOM.render(
        e(HelloWorld, {userid: userid}),
        domContainer
    )
})


<!DOCTYPE html>
<html>
<head>

    
</head>
<body>
    <div class="cfe-app" data-userid='1'></div>

    <div class="cfe-app" data-userid='abc'></div>

    <div class="cfe-app" data-userid='3'></div>

    <div class="cfe-app" data-userid='4'></div>

    <div class="cfe-app" data-userid='5'></div>

        <!-- Load React. -->
        <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
        <script src="https://unpkg.com/react@16/umd/react.production.min.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js" crossorigin></script>
    
        <!-- Our React App (notice the type is babel) -->
        <!-- <script type="text/babel" src="https://cdn.jsdelivr.net/npm/@bondsports/testing@1.0.3/app.min.js"></script> -->
        <script type="text/javascript" src="./app.js"></script>
        

</body>
</html>

谢谢！

标签： reactjsnpmwebpackbabeljs

解决方案

推荐阅读