Как включить файл, сгенерированный веб-пакетом, в HTML-страницу?
У меня есть простой (традиционный html, css, js) веб-проект, и я собираюсь использовать библиотека htmldiff-js в своем проекте.
Я попытался загрузить htmldiff js с GitHub и включить его прямо на мою HTML-страницу с помощью тега script. htmldiff js скомпилирован с использованием webpack и содержит ключевые слова import, module и т. д.
Когда я открываю HTML-страницу в браузере, возникает ошибка. У меня вопрос, как мне включить этот файл - https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js в мою HTML-страницу.
Я плохо разбираюсь в webpack. Я не очень уверен в правильном решении здесь. Я собираюсь прочитать webpack более подробно сейчас, но любые указатели могут быть очень полезны.
Образец кода
index.html
<!-- HTML Diff JS -->
<script type = "text/java" src = "js/htmldiff.js"></script>
<script type = "text/javascript" src = "js/main.js"></script>
main.js
$('#compute-diff-button').click(function() {
// diffUsingJS(v1Content, v2Content);
var diffoutputdiv = document.getElementById('diffoutput');
v1Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p>Old Text</p>";
v2Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p class='text-center'>Some new text</p>";
diffoutputdiv.innerHTML = Diff_HtmlDiff.execute(v1Content, v2Content);
});
Спасибо @joshp за предложение. Я добавил код в качестве редактирования.
@ sachinjain024 Я вижу опечатку в вашем коде. Mimetype для файла htmldiff.js должен быть «text / javascript» вместо «text / java».
Спасибо @lazyvab за то, что это уловили. Я починю это.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
[EDIT] Вы, вероятно, не захотите использовать предложение, которое я перечислил здесь, потому что я понял, что вы, вероятно, нет пытаетесь изучить Webpack прямо сейчас. Я все равно оставлю это здесь для всех, кто сочтет это полезным, но, вероятно, это слишком сложно для того, что вы пытаетесь сделать.
Если вы собираетесь самостоятельно использовать Webpack, сначала запустите npm install htmldiff-js из любого места в каталоге вашего проекта.
Затем поместите следующую строку вверху исходного файла JavaScript (например, ./src/index.js):
import HtmlDiff from 'htmldiff-js';
(из https://github.com/dfoverdx/htmldiff-js#javascript)
Вы сможете использовать переменную HtmlDiff из любого файла, который вы уже написали import HtmlDiff from 'htmldiff-js'. Например, рассмотрите возможность написания console.info(HtmlDiff) сразу после этой строки кода, чтобы увидеть, что отображается в консоли инструментов разработчика вашего браузера.
Когда я изучал Webpack, мне было очень полезно прочитать о концепции entry и output в https://webpack.js.org/concepts/, а затем сделать руководства по Installation и Getting Started в https://webpack.js.org/guides/.
Удачи!
Хорошо, вот альтернативный ответ, в котором вам не нужно узнавать о Webpack.
Если вы измените webpack.config.js строка 16 с commonjs2 на umd, а затем запустите npm run build, вы получите ./dist/htmldiff.js и ./dist/htmldiff.min.js, которые можно использовать для ввода в ваш index.html через тег <script src = "..."></script>.
Я даже загрузил вывод в суть здесь и подтвердил, что демонстрационный код в README библиотеки в основном работает (ожидает некоторого небольшие изменения, которые я внес в запрос на перенос). Просто удалите оператор import на строка 39 в примере и используйте HtmlDiff.default.execute(...) вместо HtmlDiff.execute(...) на строка 46, и все будет хорошо!
Вот как выглядит пример в README, когда все работает правильно. (Обратите внимание, что третья строка показывает разницу в HTML.)
Удачи!
Вы можете создать простой проект webpack с входным файлом, который импортирует модуль htmldiff-js и размещается на window, так что вы можете получить к нему доступ из любого места.
index.js
import HtmlDiff from 'htmldiff-js';
window.HtmlDiff = HtmlDiff;
webpack.config.js
var webpack = require('webpack'),
path = require('path'),
CleanWebpackPlugin = require('clean-webpack-plugin');
var options = {
entry: {
htmldiff_generated: path.join(__dirname, 'index.js')
},
output: {
path: path.join(__dirname, 'build'),
filename: '[name].js'
},
plugins: [
new CleanWebpackPlugin(['build'])
]
};
module.exports = options;
package.json
"scripts": {
"build": "webpack --mode=development --display-error-details",
},
"dependencies": {
"htmldiff-js": "^1.0.5"
},
"devDependencies": {
"clean-webpack-plugin": "^1.0.0",
"webpack": "^4.28.2",
"webpack-cli": "^3.1.2"
}
index.html
<!DOCTYPE html>
<html>
<head>
<title>Page</title>
<script type = "text/javascript" src = "build/htmldiff_generated.js"></script>
</head>
<body>
<script type = "text/javascript">
var v1Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p>Old Text</p>";
var v2Content = "<button id=\"compute-diff-button\" class=\"btn btn-sm btn-success\">Show Diff</button><p class='text-center'>Some new text</p>";
console.info(window.HtmlDiff.execute(v1Content, v2Content));
</script>
</body>
</html>
Если вы хотите использовать переменные / функции, отличные от HtmlDiff, выставьте в index.js таким же образом. Это несколько противоречит цели модульного кодирования, но ваш вариант использования должен быть достигнут.
Это общая стратегия, которой вы можете следовать и для других узловых модулей.
У вас больше шансов получить хороший ответ, если вы покажете HTML, используемый для включения скрипта, чтобы мы поняли, что вы делаете, и отобразили полученное сообщение об ошибке.