Включить Reactjs Bundled компонент в HTML-файл - PullRequest
Новая
       54

Включить Reactjs Bundled компонент в HTML-файл

0 голосов
/ 08 октября 2019

У меня есть реагирующий пакет 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 ]

0 голосов
/ 08 октября 2019

в его текущей форме пакет по-прежнему является пакетом npm: вам нужно установить его локально вместе с его одноранговыми зависимостями, а затем собрать его с помощью инструмента сборки, такого как webpack или parcel или (parcel - безусловно, самый простой)

, чтобы построить его с помощью parcel, создайте папку, зайдите в нее, откройте терминал и выполните следующие команды 

npm init -y
npm install -g parcel-bundler
npm install react-multiple-selector react react-dom react-scripts react-select lodash.debounce

создайте файл index.js в src/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

0 голосов
/ 09 октября 2019

Рассматривали ли вы создание проекта React для использования пакета npm вместо хранения всего в одном HTML-файле?

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

0 голосов
/ 08 октября 2019

Если вы хотите создать простое приложение activjs, вы можете использовать umd, и пример доступен на самом веб-сайте реакции - здесь

Однако, не все модули, созданные дляReactionJS поддерживает UMD, и вам придется использовать реакцию в комплекте. Прочтите официальную документацию и подробнее . Похоже, что реагирующий множественный селектор не поддерживает 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 в браузере я наткнулся на это ТАК . Однако знайте, что вы пытаетесь взломать свой путь к этому, и это всего лишь взлом, а не решение.

...