在 html 文件中包含 Reactjs Bundled 组件答案

【问题标题】：Include Reactjs Bundled component inside html file在 html 文件中包含 Reactjs Bundled 组件
【发布时间】：2020-02-05 22:28:35
【问题描述】：

我有一个 reactjs npm package，我想将它包含在 html 文件中，我得到了捆绑的文件 here，但我遇到了一个问题，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>

【问题讨论】：

标签： javascript html reactjs babeljs

【解决方案1】：

您是否考虑过创建一个 React 项目来利用 npm 包，而不是将所有内容都保存在一个 html 文件中？

https://reactjs.org/docs/getting-started.html

【讨论】：

【解决方案2】：

在当前形式下，该包仍然是一个 npm 包：您需要将其连同其对等依赖项一起安装在本地，然后使用诸如 webpack 或 parcel 之类的构建工具构建它（parcel 是迄今为止最简单的）

要使用包裹构建它，请执行以下操作创建一个文件夹，进入其中并打开一个终端，然后运行以下命令

npm init -y
npm install -g parcel-bundler
npm 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 上可用

【讨论】：

【解决方案3】：

如果你想创建一个简单的 reactjs 应用程序，你可以使用 umd，react 网站本身提供了一个示例 - here

但是，并非所有为 reactjs 构建的模块都支持 UMD，您必须以捆绑的方式使用 react。阅读官方documentation 和more。 react-multiple-selector 好像还不支持 UMD。

inspector 控制台显示错误来自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。但是，要知道您正在尝试破解您的方式来执行此操作，并且只是破解而不是解决方案。

【讨论】：