在Parcel构建过程中在HTML文件中调用JavaScript函数时不会触发 [英] JavaScript function won't trigger when called in HTML file during Parcel build
问题描述
我有一个链接到JavaScript文件的基本HTML表单页面.这两个文件都存在于Node项目中，并且我将Parcel用作捆绑程序(因为我最终希望将其转换为TypeScript).
I have a basic HTML form page that is linked to a JavaScript file. Both files exist in a Node project and I am using Parcel as a bundler (because I eventually want to convert this to TypeScript).
当我在浏览器中运行html文件时，将触发JavaScript函数，但是当我运行Parcel构建时，将编译index.html，但不会触发JavaScript函数.它可以识别js文件，因为我可以在函数外部调用dom查询.
When I run the html file in the browser, the JavaScript function will trigger, but when I run the Parcel build, the index.html will compile, but the JavaScript function won't trigger. It recognizes the js file because I can call dom queries outside the function.
当我在控制台中签入时，出现错误:
When I check in the console I get the error:
(index):12 Uncaught ReferenceError: validationFunction is not defined
at HTMLInputElement.onchange
但这没有意义，因为该函数是在Parcel构建外部定义的.
But this doesn't make sense because the function is defined outside the Parcel build.
当使用Parcel编译JavaScript函数时，如何获得index.html页来识别JavaScript函数?
How can I get the index.html page to recognize the JavaScript function when it is compiled with Parcel?
index.js文件在下面:
The index.js file is below:
function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
index.html是:
The index.html is:
<!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是:
And the package.json is:
{
"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"
}
}
推荐答案
默认情况下，包裹js捆绑包在全局命名空间中不可用.
The parcel js bundle isn't available in the global namespace by default.
您可以将函数直接附加到window对象，然后代码应按原样工作:
You can either attach your functions to the window object directly and then your code should work as is:
window.validationFunction = function validationFunction(event) {
event.preventDefault();
var div;
div = document.getElementById("appendedText");
div.innerHTML += "hello world";
}
或使用全局标志导出命名模块:
Or use the global flag to export a named module:
// 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函数时不会触发的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
