Объедините внешний JavaScript (из компакт-диска) в компонент React
Какие есть варианты для объединения внешнего sdk javascript в компонент React?
Я попытался включить javascript в index.html и сослаться на него через window.xyz. Он работает хорошо, но я не могу создать производственную сборку, поскольку javascript не упакован таким образом.
Есть ли способ просто импортировать файл javascript в определение компонента React?
PS: React Newbie здесь!
Какую именно библиотеку вы хотите использовать?
Файл @asynts .js в файле .jsx
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
Если вы хотите, чтобы сценарий был включен в сборку, у вас есть 2 варианта:
1. Если внешний файл - это модуль, я бы подошел к нему следующим образом.:
- Загрузите внешний файл JS и сохраните его где-нибудь в проекте. Например, сохраните его в папку
/utils. - Просто укажите его и используйте в компонентах:
import { test } from '/utils/external'
2. Если это не модуль:
- То же, что и выше - сохраните файл в свой проект.
- Разница в том, что вам нужно настроить сборщик модулей для экспорта глобальных файлов. Этот процесс называется Шимминг и вот как это сделать с помощью Webpack.
- Аналогично шагу 2 -
import { test } from '/utils/external'
* В обоих сценариях я предполагаю, что это отдельный внешний файл, который не размещается где-то в виде пакета (npm / bower / и т. д.). Если это пакет, вместо того, чтобы загружать его вручную, вы должны использовать диспетчер пакетов.
Если вы хотите загрузить его асинхронно (но не в комплекте):
Следуйте @Paras ответ, где он предлагает использовать библиотеку для асинхронной отложенной загрузки скриптов.
Вопрос OP - загрузить из CDN. Ваш ответ предполагает, что модуль сохранен в utils/external. Это может не всегда работать, поскольку любые обновления в CDN не будут автоматически отражаться в коде.
Кроме того, нельзя воспользоваться преимуществами CDN с точки зрения времени отклика и кеширования. Кроме того, это не обязательно может быть пакет NPM / Bower, как вы предлагаете в сноске.
Привет @Paras. Я не знал о вашем подходе. Похоже, хороший способ разрешить дело. Спасибо.
Возможно, это не соответствует требованиям к файлу для упаковки.
Для загрузки внешних скриптов из CDN хорошим вариантом является использование библиотеки react-async-script-loader. Он не только может загружать внешние файлы JS асинхронно, но также загружает on demand, то есть ленивую загрузку и поддерживает как параллельную, так и последовательную загрузку.
Это позволяет вам украсить ваш компонент с помощью HOC следующим образом:
export default scriptLoader(
[
'https://cdnjs.cloudflare.com/somelibrary1.min.js',
'https://cdnjs.cloudflare.com/somelibrary2.min.js'
]
)(YourComponent)
попробуйте что-нибудь вроде этого:
componentDidMount () {
const script = document.createElement("script");
script.src = "https://cdnjs.cloudflare.com/somelibrary1.min.js";
script.async = true;
document.body.appendChild(script2);
}
У этого подхода есть несколько проблем: 1) компонент может отображаться до загрузки скрипта. Это может быть большой проблемой, если компонент зависит от переменных / функций, предоставляемых сценарием, 2) если 2 или более компонентов нуждаются в сценариях, это создаст 1 тег сценария для каждого такого компонента.
Вы должны быть загружены в свой основной файл приложения, например: app.js componentWillMount () и вы можете определить ur все маршруты и все или файл index.html.
В этом случае сценарий будет добавлен в приложение независимо от того, есть ли компонент, который хочет его использовать. Также первая проблема из моих комментариев не будет решена этим
покажите ur файл, чтобы лучше понять, найдите лучшее решение
На самом деле вы должны знать обо всем подходе, а затем видеть коды.
Вы должны создать отдельную папку для ваших альтернативных файлов cdn JavaScript, поскольку они находятся вне файлов, которые webpack создает. Затем вставьте эти файлы в эту папку и после всего импортируйте их как externals в конфигурацию webpack.
Затем сконфигурируйте их как файлы поставщика, и абсолютно имя выходного файла должно быть динамическим, чтобы webpack построил свой пакет, а затем скопировал ваши файлы JavaScript в папку dist. следуйте ниже:
// webpack.configuration.js
~~~
module.exports = {
~~~
externals: {
cdnFileOne: `${srcRoot}/outFiles/cdnFile1.js`,
cdnFileTwo: `${srcRoot}/outFiles/cdnFile2.js`,
},
~~~
};
Звучит хорошо, теперь у вас есть внешние имена для файлов JavaScript и вы импортируете их в конфигурацию webpack как конфигурацию externals.
Теперь вы должны поместить их в entry, чтобы импортировать как отдельные файлы:
// webpack.configuration.js
~~~
module.exports = {
~~~
entry: {
cdnFiles: ['cdnFileOne', 'cdnFileTwo'], <-- cdn files
app: `${srcRoot}/app/index.js`, // <-- its your own codes
},
output: {
path: '/dist',
filename: '[name].js' // <== dynamically make your JavaScript files,
// so, in dist folder you can see app.js and
// cdnFiles.js file
}
~~~
};
К сожалению, вы должны добавить пакеты в свой шаблон HTML:
~~~
res.status(200).send(`
<!doctype html>
<html lang = "en">
<head>
<meta charSet = "utf-8" />
${styles}
${title}
</head>
<body>
<div id = "root">${ssrHTML}</div>
<script src = "app.js" defer></script>
<script src = "cdnFiles.js" defer></script>
</body>
</html>
`);
~~~
Я пробовал искать это (очень сильно) в Интернете и, в частности, в stackoverflow, но не нашел хорошо принятого ответа на это, поэтому разместил его как новый вопрос.