在 Parcel 构建期间在 HTML 文件中调用 JavaScript 函数时不会触发
Posted
技术标签:
【中文标题】在 Parcel 构建期间在 HTML 文件中调用 JavaScript 函数时不会触发【英文标题】：JavaScript function won't trigger when called in HTML file during Parcel build 【发布时间】：2019-12-27 09:15:06 【问题描述】：我有一个链接到 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 构建之外定义的。
如何让 index.html 页面在使用 Parcel 编译时识别 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"
【问题讨论】：
【参考方案1】：我正在使用纯 js 和 html 与包裹。我无法得到正确的答案来运行。它永远无法找到我的功能（我认为是因为它从未导出）。我个人通过将点击事件设置为 js 文件末尾的元素来解决我想要做的事情。
import isEven from '../src/ease.rs'
function rustIt()
var input = document.getElementById("entered-number").value
var res = isEven(input)
if (res === 1) //true
document.getElementById("result").innerText = "TRUE!!!"
else
document.getElementById("result").innerText = "FALSE!!!"
document.getElementById("entered-number").value = ''
document.getElementById("myButton").onclick = function ()
rustIt()
;
我的html很简单
<html>
<body>
<script src="./index.js"></script>
<div style="justify-content: center;">
<label for="entered-number">
enter number please
</label>
<input id="entered-number" type="number" style="border: 1px black solid" />
<button type="button" id="myButton">USE RUST</button>
</div>
<div id="container">
RUST SAYS: <span id="result"></span>
</div>
</body>
</html>
【讨论】：
【参考方案2】：默认情况下，全局命名空间中不提供 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 函数时不会触发的主要内容，如果未能解决你的问题，请参考以下文章
新一代构建工具：对比rollup/parcel/esbuild—esbuild脱颖而出