在 html 文件中包含 Reactjs Bundled 组件
我有一个reactjs npm 包，我想将它包含在 html 文件中，我在这里得到了捆绑文件，但我面临一个require不是函数的问题，因为我不在 nodejs 项目中。所以我无法导入其他依赖项，有人可以进一步帮助我吗？
console.log(window.React, 'AAB');
window.ReactDOM.render(window.React.createElement(window.ListItem, {
labelOption: 'name',
typeOption: 'type',
valueOption: 'k',
onRemoveItem: (e) => {console.log('1')},
item: {name: 'Zeyad', type: 'person'}
}, 'Hi'), document.getElementById("app"));
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
<link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css">
</head>
<body>
Name:
<div id="app"></div>
<script>
var exports = {};
</script>
<script
crossorigin
src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script
crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"
></script>
<script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js"></script>
<script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js"></script>
<script src="https://unpkg.com/react-multiple-selector@1.0.7/dist/data.js"></script>
<script src="https://gist.githubusercontent.com/gaearon/0b180827c190fe4fd98b4c7f570ea4a8/raw/b9157ce933c79a4559d2aa9ff3372668cce48de7/LikeButton.js"></script>
</body>
</html>
茅侃侃3回答
-
拉丁的传说
在目前的形式中，该包仍然是一个 npm 包：您需要将它与其对等依赖项一起安装在本地，然后使用诸如 webpack 或 parcel 之类的构建工具或（parcel 是迄今为止最简单的）构建它要使用 Parcel 构建它，请执行以下操作创建一个文件夹，进入其中并打开一个终端，然后运行以下命令npm init -ynpm install -g parcel-bundlernpm install react-multiple-selector react react-dom react-scripts react-select lodash.debounce在 src/index.js 下创建一个 index.js 文件，并将以下代码放入其中import React from 'react';import ReactDOM from 'react-dom';import ListItem from 'react-multiple-selector/dist/ListItem';ReactDOM.render(React.createElement(ListItem, { labelOption: 'name', typeOption: 'type', valueOption: 'k', onRemoveItem: (e) => {console.log('1')}, item: {name: 'Zeyad', type: 'person'}}, 'Hi'), document.getElementById("app"));将 index.html 放在 src/assets/ 下，并使用相对路径包含 index.js。它应该如下所示<!DOCTYPE html><html> <head> <title>Parcel Sandbox</title> <meta charset="UTF-8" /> <link href="https://unpkg.com/react-multiple-selector@1.0.7/dist/styles.css"> </head> <body> Name: <div id="app"></div> <script src="../index.js"></script> </body></html>从您文件夹的根目录，运行parcel -p 1234 watch src/assets/index.html 您的页面应该在 localhost:1234 可用 -
缥缈止盈
如果你想创建一个简单的 reactjs 应用程序，你可以使用 umd 并且可以从 react 网站本身获得一个示例 -这里然而，并不是所有为 reactjs 构建的模块都支持 UMD，你必须以捆绑的方式使用 react。阅读官方文档及更多。react-multiple-selector 看起来还不支持 UMD。检查员控制台显示错误来自https://unpkg.com/react-multiple-selector@1.0.7/dist/index.js和https://unpkg.com/react-multiple-selector@1.0.7/dist/ListItem.js在require浏览器中搜索选项时，我遇到了这个SO。但是，要知道您正在尝试通过自己的方式来实现这一点，这只是一种黑客行为，而不是解决方案。 -
跃然一笑
您是否考虑过创建一个 React 项目来利用 npm 包而不是将所有内容保存在单个 html 文件中？https://reactjs.org/docs/getting-started.html
随时随地看视频慕课网APP
相关分类
JavaScript