我創建了一個測驗 React 組件庫（React、Typescript），并嘗試使用 Rollup 將其打包到 UMD 中，以便我可以將組件匯入到 HTML 頁面中。
我創建的示例組件只需要一個label道具并將其著色為橙色。一些超級簡單如此復雜的邏輯將被排除在等式之外。
反應代碼以呈現上述文本：
import * as React from 'react';
import * as Test from 'react-webpack-demo';
function App() {
return (
<div>
<h1>
{
React.createElement(Test.Brand, { label: 'Brand Label Text'})
}
</h1>
</div>
);
}
export default App;
上面的組件是通過Rollup打包成CJS格式匯入的。我還嘗試將相同的內容打包到 UMD 中，以便將其匯入 HTML。完整rollup.config.js檔案如下：
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
import typescript from '@rollup/plugin-typescript';
import external from 'rollup-plugin-peer-deps-external';
import packageJson from './package.json';
export default [
{
input: 'src/index.ts',
output: [
{
file: packageJson.main,
format: 'cjs',
sourcemap: true
},
{
file: packageJson.module,
format: 'umd',
name: 'Test',
sourcemap: true
}
],
plugins: [
resolve(),
babel({
exclude: 'node_modules/**',
presets: [
'@babel/preset-react',
'@babel/preset-typescript'
]
}),
external(),
commonjs(),
typescript({ tsconfig: './tsconfig.json' })
],
external: [
...Object.keys(packageJson.dependencies || {}),
...Object.keys(packageJson.peerDependencies || {})
]
}
]
然后，我嘗試將新打包的 UMD 檔案匯入到我的 HTML 頁面中，并將其呈現為一個 DOM 元素，如下所示：
<html lang="en-US">
<head>
<title>Test</title>
<meta charset="utf-8" />
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
</head>
<body>
<h1>Testing rollup in plain HTML</h1>
<hr />
<div id='brand-test'></div>
<script>
const el = React.createElement;
const domContainer = document.getElementById('brand-test');
ReactDOM.render(el(
Test.Brand,
{
label: 'Demo works!'
}
), domContainer);
</script>
</body>
</html>
但我收到以下錯誤：
上述錯誤發生在組件中：
Brand@file:///Users/jacorbello/repos/temp/react-webpack-demo/dist/umd/index.js:33:1
未捕獲的型別錯誤：React__namespace.createElement 不是函式 Brand Brand.tsx:8 React 17 test.html:20 Brand.tsx:8:11
任何幫助將不勝感激。
在此先感謝您的時間！
uj5u.com熱心網友回復：
似乎腳本標簽的順序不正確。您的庫需要先匯入 React，然后才能執行它的腳本。
只需修復訂單即可使其正常作業
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="./react-webpack-demo/dist/umd/index.js" crossorigin></script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/389405.html