Dog*_*Dog 8 html javascript parcel node.js
我有一个链接到 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"
}
}
小智 21
默认情况下，parcel js 包在全局命名空间中不可用。
您可以将函数直接附加到 window 对象，然后您的代码应该按原样工作：
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 />
| 归档时间： |
|
| 查看次数： |
2301 次 |
| 最近记录： |