Javascript: Как я могу использовать компонент React во всем мире?

Question

Я создал пакет NPM для реагирования, он отлично работает на узле, но не работает в браузере без узла.

, если я импортирую в узел следующим образом:

import Progress from 'package-name'

// jsx
<Progress /> //working fine

Работает нормально.

Но если я использую его из CDN как unpkg, он не работает.

<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

Answer 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>

Answer 2

Вы не можете запрашивать или импортировать модули напрямую из URL.

Но вы можете импортировать его, как показано ниже.

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

const Progress = window.Progress;

Answer 3

Вы должны настроить его как внешнюю зависимость, как описано в документах .
Добавить это в конфигурацию вашего веб-пакета:

externals : {
    Progress: 'progress'
}

Использование:
import Progress from 'progress';