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

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

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

import Progress from 'package-name'

// jsx
<Progress /> //working fine

---

原始回购：

您应该按照中所述将其配置为外部依赖项。
将此添加到您的网页包配置：

externals : {
    Progress: 'progress'
}

用法：

---

从“进度”导入进度
您不能直接从URL要求或导入模块

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

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

const Progress = window.Progress;

//包脚本
const Progress=window.Progress；
将
library
的值更改为组件的名称
library:“进度”
，并添加
libraryExport:“默认”
以将默认导出分配给库目标：

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

工作示例：


函数应用程序（）{
返回(
)
}
ReactDOM.render（，document.getElementById（'root'））

能否发布progress的内容。jsBuild version:Source:看起来您的JS文件没有导出任何名为progress的成员。我认为这可能与您如何使用Webpack进行构建有关。检查网页包配置中的不同输出目标。我认为您可以直接导出ES6模块/文件，它应该可以与浏览器一起工作。
// Package Script
<script src="https://unpkg.com/@delowar/react-circle-progressbar@0.0.9/lib/Progress.js"></script>

const Progress = window.Progress;

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