小编Sif*_*que的帖子

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

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

如果我像这样在节点中导入:

import Progress from 'package-name'

// jsx
<Progress /> //working fine
Run Code Online (Sandbox Code Playgroud)

它工作正常。

但是如果我像 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>
Run Code Online (Sandbox Code Playgroud)

它显示一个错误:

未定义进度

在此处输入图片说明 任何人都可以帮我解决这个问题吗?

网络包配置:

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)`
    }, …
Run Code Online (Sandbox Code Playgroud)

javascript jsx reactjs webpack

5
推荐指数
1
解决办法
361
查看次数

标签 统计

javascript ×1

jsx ×1

reactjs ×1

webpack ×1