gpt4 book ai didi

Javascript:如何在全局范围内使用 React 组件?

转载 作者:行者123 更新时间:2023-12-03 13:36:50 26 4
gpt4 key购买 nike

我为react制作了一个NPM包,它在Node上运行良好,但在没有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>

显示错误:

Progress is not defined

enter image description here谁能帮我解决这个问题吗?

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

最佳答案

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>

关于Javascript:如何在全局范围内使用 React 组件?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/60272576/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com