Как включить сгенерированный веб-файл в HTML-страницу? - PullRequest
Новая
       27

Как включить сгенерированный веб-файл в HTML-страницу?

0 голосов
/ 23 декабря 2018

У меня есть простой (традиционный html, css, js) веб-проект, и я собираюсь использовать библиотеку htmldiff-js в своем проекте.

Я пытался загрузить htmldiff jsиз GitHub и включен непосредственно в мою HTML-страницу с помощью тега script.htmldiff js скомпилирован с использованием веб-пакета и содержит ключевые слова import, module и др.

Когда я открываю HTML-страницу в браузере, она выдает ошибку.У меня вопрос, как мне включить этот файл - https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js в мою HTML-страницу.

У меня очень мало знаний о веб-пакете.Я не очень уверен в правильном решении здесь.Сейчас я собираюсь прочитать веб-пакет более подробно, но любые указатели могут быть очень полезны.

Пример кода

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);
});

Ответы [ 3 ]

0 голосов
/ 24 декабря 2018

Хорошо, вот альтернативный ответ, где вам не нужно узнавать о Webpack.

Если вы измените строку webpack.config.js 16 с commonjs2 на umd,затем запустите npm run build, вы получите ./dist/htmldiff.js и ./dist/htmldiff.min.js, которые вы можете использовать для ввода в index.html через тег <script src="..."></script>.

Я даже загрузил вывод в gist here и подтвердил, что демонстрационный код библиотеки README в основном работает (в ожидании небольших изменений, которые я внес в запрос на извлечение ).Просто удалите оператор import в строке 39 в примере и используйте HtmlDiff.default.execute(...) вместо HtmlDiff.execute(...) в строке 46 , и все будет хорошо!

Вот как выглядит пример в README, когда все работает правильно.(Обратите внимание, что третья строка показывает разницу в формате HTML.)

screenshot that shows working HTML diff example

Удачи!

0 голосов
/ 24 декабря 2018

Вы можете создать простой проект веб-пакета с файлом ввода, который импортирует модуль 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.log(window.HtmlDiff.execute(v1Content, v2Content));
  </script>
</body>
</html>

Если вы хотите использовать переменные / функции, отличные от HtmlDiff, выставьте в index.js таким же образом.Это несколько противоречит цели модульного кодирования, но ваш вариант использования должен быть достигнут.

Это общая стратегия, которой вы можете следовать и для других узловых модулей.

0 голосов
/ 23 декабря 2018

[EDIT] Вы, вероятно, не хотите использовать предложение, которое я перечислил здесь, потому что я понял, что вы, вероятно, не пытаетесь изучить Webpack прямо сейчас.Я все еще оставлю это здесь для любого, кто в конечном итоге находит это полезным, но это, вероятно, слишком сложно для того, что вы пытаетесь сделать.

Если вы идете по линиииспользуя Webpack, сначала запустите npm install htmldiff-js из любого места в каталоге вашего проекта.

Затем поместите следующую строку вверху исходного файла JavaScript (например, ./src/index.js): import HtmlDiff from 'htmldiff-js'; (from https://github.com/dfoverdx/htmldiff-js#javascript)

Вы сможете использовать переменную с именем HtmlDiff из любого файла, который вы уже написали import HtmlDiff from 'htmldiff-js'. Например, рассмотрите возможность записи console.log(HtmlDiff) сразу после этой строки кода, чтобы увидеть, что появляетсяв консоли инструментов вашего браузера.

Когда я изучал Webpack, мне было очень полезно прочитать о концепции entry и output в https://webpack.js.org/concepts/,, а затем выполнить Installation и Getting Started направляющие на https://webpack.js.org/guides/.

Удачи!

...