Fatal编程技术网
  • javascript/
  • Javascript 如何在HTML页面中包含网页包生成的文件？

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

javascript html webpack ecmascript-6

Javascript 如何在HTML页面中包含网页包生成的文件？,javascript,html,webpack,ecmascript-6,babeljs,Javascript,Html,Webpack,Ecmascript 6,Babeljs,我有一个简单的（传统的html、css、js）web项目，我打算在我的项目中使用 我试图从GitHub下载htmldiff js，并使用script标记直接包含在我的HTML页面中。htmldiff js使用网页包编译，包含导入、模块等关键字 当我在浏览器中打开HTML页面时，它会抛出一个错误。我的问题是如何在我的HTML页面中包含这个文件 我对webpack有一点了解。我不太确定这里的正确解决方案。我现在将更详细地阅读这个网页，但任何提示都会非常有用 示例代码 index.html mai

我有一个简单的（传统的html、css、js）web项目，我打算在我的项目中使用

我试图从GitHub下载htmldiff js，并使用script标记直接包含在我的HTML页面中。htmldiff js使用网页包编译，包含导入、模块等关键字

当我在浏览器中打开HTML页面时，它会抛出一个错误。我的问题是如何在我的HTML页面中包含这个文件

我对webpack有一点了解。我不太确定这里的正确解决方案。我现在将更详细地阅读这个网页，但任何提示都会非常有用

示例代码 index.html
main.js 
$（“#计算差异按钮”）。单击（函数（）{
//扩散JS（v1含量，v2含量）；
var diffoutputdiv=document.getElementById（'diffoutput'）；
v1Content=“显示差异旧文本”
”；
v2Content=“Show Diff
一些新文本
”；
diffoutputdiv.innerHTML=Diff_HtmlDiff.execute（v1Content，v2Content）；
});
[EDIT]您可能不想使用我在这里列出的建议，因为我意识到您现在可能不想学习Webpack。我仍然会把它留给其他最终发现它有益的人，但是对于你正在尝试做的事情来说，它可能过于复杂了

如果您打算自己使用Webpack，首先，从项目目录中的任何位置运行
npm install htmldiff js

然后在JavaScript源文件（例如，
/src/index.js
）的顶部放置以下行： 

从“HtmlDiff js”导入HtmlDiff；
（来自）

您将能够从已经编写的任何文件中使用名为
HtmlDiff
的变量
从“HtmlDiff js”导入HtmlDiff
。例如，考虑编写代码>控制台。log（HTMLDIFF）紧接在代码行之后，查看浏览器的DEV工具控制台中出现的内容。

当我学习Webpack时，我发现阅读at的
输入
和
输出
的概念，然后在at进行
安装
和
入门
指南非常有帮助

祝你好运

[EDIT]您可能不想使用我在这里列出的建议，因为我意识到您现在可能不想学习Webpack。我仍然会把它留给其他最终发现它有益的人，但是对于你正在尝试做的事情来说，它可能过于复杂了

如果您打算自己使用Webpack，首先，从项目目录中的任何位置运行
npm install htmldiff js

然后在JavaScript源文件（例如，
/src/index.js
）的顶部放置以下行： 

从“HtmlDiff js”导入HtmlDiff；
（来自）

您将能够从已经编写的任何文件中使用名为
HtmlDiff
的变量
从“HtmlDiff js”导入HtmlDiff
。例如，考虑编写代码>控制台。log（HTMLDIFF）紧接在代码行之后，查看浏览器的DEV工具控制台中出现的内容。

当我学习Webpack时，我发现阅读at的
输入
和
输出
的概念，然后在at进行
安装
和
入门
指南非常有帮助

祝你好运

好的，这里有一个替代答案，您不必了解Webpack

如果您将
commonjs2
更改为
umd
，然后运行
npm run build
，您将获得一个
/dist/htmldiff.js
和
/dist/htmldiff.min.js
，您可以使用它通过
标记将其引入
索引.html

我甚至将输出上传到了一个网站上，并确认了该库自述文件上的演示代码大部分都在工作中（有些还在等待）。只需删除示例中的上的
import
语句，并使用
HtmlDiff.default.execute（…）
而不是
HtmlDiff.execute（…）
打开，就可以了

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

祝你好运

好的，这里有一个替代答案，您不必了解Webpack

如果您将
commonjs2
更改为
umd
，然后运行
npm run build
，您将获得一个
/dist/htmldiff.js
和
/dist/htmldiff.min.js
，您可以使用它通过
标记将其引入
索引.html

我甚至将输出上传到了一个网站上，并确认了该库自述文件上的演示代码大部分都在工作中（有些还在等待）。只需删除示例中的上的
import
语句，并使用
HtmlDiff.default.execute（…）
而不是
HtmlDiff.execute（…）
打开，就可以了

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

祝你好运

您可以创建一个简单的网页包项目，其中包含一个输入文件，该文件导入
htmldiff js
模块并在
窗口中公开，因此您可以从任何地方访问它

index.js


import HtmlDiff from 'htmldiff-js';
window.HtmlDiff = HtmlDiff;



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;


webpack.config.js


import HtmlDiff from 'htmldiff-js';
window.HtmlDiff = HtmlDiff;



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>




页
var v1Content=“显示差异旧文本”
”；
var v2Content=“Show Diff
一些新文本
”；
log（window.HtmlDiff.execute（v1Content，v2Content））；


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

这是您可能遵循的通用策略