Javascript：如何全局使用 React 组件？

Posted 2023-02-22

【中文标题】Javascript：如何全局使用 React 组件？

【英文标题】：Javascript: How do I use React component globally?

【发布时间】：2020-06-01 23:35:45

【问题描述】：

我已经为 react 制作了一个 NPM 包，它在 Node 上运行良好，但在没有节点的浏览器上无法运行。

如果我在这样的节点内导入：

import Progress from 'package-name'

// jsx
<Progress /> //working fine

一切正常。

但是如果我像 unpkg 这样从 CDN 使用它，它就不起作用。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>

// Package Script
<script src="https://unpkg.com/@delowar/react-circle-progressbar@0.0.9/lib/Progress.js"></script>

<script>
    ...react code...
    <Progress />
    ...react code...
</script>

显示错误：

进度未定义

谁能帮我解决这个问题？

Webpack 配置：

var path = require('path');

module.exports = 
    mode: 'production',
    entry: './src/Progress.js',
    output: 
        path: path.resolve('lib'),
        filename: 'Progress.js',
        libraryTarget: 'umd',
        library: 'lib',
        umdNamedDefine: true,
        globalObject: `(typeof self !== 'undefined' ? self : this)`
    ,
    module: 
        rules: [
            
                test: /\.(js|jsx)$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            
        ]
    

原始回购：https://github.com/delowardev/react-circle-progressbar

【问题讨论】：

可以发一下progress.js的内容吗

构建版本：github.com/delowardev/react-circle-progressbar/blob/dev/lib/…

来源：github.com/delowardev/react-circle-progressbar/blob/dev/src/…

看起来你的 JS 文件没有导出任何名为 Progress 的成员。

我认为这可能与您使用 Webpack 构建的方式有关。检查 Webpack 配置中的不同输出目标。我认为您可以直接按原样导出 ES6 模块/文件，这应该适用于浏览器。

【参考方案1】：

将library 的值更改为您的组件名称library: 'Progress' 并添加libraryExport: 'default' 以将默认导出分配给库目标：

output: 
  path: path.resolve('lib'),
  filename: 'Progress.js',
  library: 'Progress',
  libraryTarget: 'umd',
  libraryExport: 'default',
  umdNamedDefine: true,
  globalObject: `(typeof self !== 'undefined' ? self : this)`
,

工作示例：

function App() 
  return (
    <Progress />
  )


ReactDOM.render( <App /> , document.getElementById('root'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.js"></script>

<script src="https://rawcdn.githack.com/fraction01/react-circle-progressbar/0957fed54db16a3f7b9d625711ed3961f3b34371/lib/Progress.js"></script>
<div id="root"></div>

【参考方案2】：

您不能直接从 URL 要求或导入模块。

但是你可以像下面这样导入它。

// Package Script
<script src="https://unpkg.com/@delowar/react-circle-progressbar@0.0.9/lib/Progress.js"></script>

const Progress = window.Progress;

【参考方案3】：

您应该按照docs 中的说明将其配置为外部依赖项。 将此添加到您的 webpack 配置中：

externals : 
    Progress: 'progress'

用法：import Progress from 'progress';