我有一个链接到 JavaScript 文件的基本 HTML 表单页面。这两个文件都存在于 Node 项目中，我将 Parcel 用作打包器(因为我最终想将其转换为 TypeScript)。
当我在浏览器中运行 html 文件时，JavaScript 函数会触发，但是当我运行 Parcel 构建时，index.html 会编译，但不会触发 JavaScript 函数。它识别 js 文件，因为我可以在函数外部调用 dom 查询。
当我在控制台中查看时，出现错误:
(index):12 Uncaught ReferenceError: validationFunction is not defined
at HTMLInputElement.onchange
但这没有意义，因为函数是在 Parcel 构建之外定义的。
如何让用Parcel编译的index.html页面识别JavaScript函数？
index.js 文件如下:
function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
index.html 是:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<form action="" method="post">
First name:<br />
<input onChange="validationFunction(event)" type="text" name="firstname" /><br />
<input type="submit" name="Submit" />
</form>
<h1></h1>
<div id="appendedText"></div>
<script src="index.js"></script>
</body>
</html>
package.json 是:
{
"name": "typescriptprojects",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "parcel index.html"
},
"author": "",
"license": "ISC",
"devDependencies": {
"typescript": "^3.5.3"
},
"dependencies": {
"parcel-bundler": "^1.12.3"
}
}
最佳答案
默认情况下，parcel js 包在全局命名空间中不可用。
您可以直接将您的函数附加到窗口对象，然后您的代码应该按原样工作:
window.validationFunction = function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
或者使用全局标志导出命名模块:
// package.json
"scripts": {
"dev": "parcel index.html --global myCustomModule"
},
// index.js
module.exports.validationFunction= function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
// or alternatively index.ts
export function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
// index.html
<input onChange="myCustomModule.validationFunction(event)" type="text" name="firstname" /><br />
关于在 Parcel 构建期间在 HTML 文件中调用时不会触发 JavaScript 函数，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57602686/