Delowar Hosain:
反応のために私はそれがノード上で正常に動作していますが、それはノードなしでブラウザ上で動作していないです、NPMパッケージを作りました。
私はこのようなノード内にインポートする場合:
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/[email protected]/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
分数:
値を変更し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>