Question

我有一个简单的（传统html，css，js）网络项目，我打算在项目中使用htmldiff-js library。

我试图从GitHub下载htmldiff js，并使用script标签将其直接包含在我的HTML页面中。 htmldiff js是使用webpack编译的，包含import，module等关键字。

当我在浏览器中打开HTML页面时，它将引发错误。我的问题是我应该如何在HTML页面中包含此文件-https://github.com/dfoverdx/htmldiff-js/blob/master/dist/htmldiff.js。

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

Answer 1

好的，这是您无需了解Webpack的替代答案。

如果将webpack.config.js line 16从commonjs2更改为umd，然后运行npm run build，则会得到./dist/htmldiff.js和./dist/htmldiff.min.js可以用来通过index.html标签将您的<script src="..."></script>带入。

我什至将输出上传到gist here，并确认库的README上的演示代码可以正常工作（有一些small changes I made in a pull request）。只需在示例中删除line 39上的import语句，然后使用HtmlDiff.default.execute(...)代替line 46上的HtmlDiff.execute(...)，一切都会好起来！

这是当一切正常运行时，自述文件中的示例的样子。（请注意，第三行显示了HTML差异。）

祝你好运！

Answer 2

您可以使用入口文件创建一个简单的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.log(window.HtmlDiff.execute(v1Content, v2Content));
  </script>
</body>
</html>

如果要使用HtmlDiff以外的变量/函数，请以相同的方式在index.js中公开。它在某种程度上违背了模块化编码的目的，但是应该实现您的用例。

这也是其他节点模块可能遵循的通用策略。

Answer 3

[编辑]您可能不想使用我在这里列出的建议，因为我意识到您可能不是正在尝试学习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.log(HtmlDiff)，以查看浏览器的开发工具控制台中显示的内容。

当我学习Webpack时，发现在https://webpack.js.org/concepts/读到entry和output的概念，然后做Installation和{{ 1}}指南在https://webpack.js.org/guides/。

祝你好运！

如何在HTML页面中包含webpack生成的文件？

示例代码

index.html

main.js

3 个答案: