[英]Javascript: How do I use React component globally?
我已經為 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>
它顯示一個錯誤:
未定義進度
網絡包配置:
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'
的名稱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>
您應該按照文檔中的描述將其配置為外部依賴項。
將此添加到您的 webpack 配置中:
externals : {
Progress: 'progress'
}
用法:
import Progress from 'progress';
您不能直接從 URL 要求或導入模塊。
但是你可以像下面這樣導入它。
// Package Script
<script src="https://unpkg.com/@delowar/react-circle-progressbar@0.0.9/lib/Progress.js"></script>
const Progress = window.Progress;
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.