JavaScript 函数在 Parcel 构建期间在 HTML 文件中调用时不会触发

Question

我有一个链接到 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"
  }
}

Answer 1

默认情况下，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 />

Answer 2

我正在使用纯 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>

JavaScript 函数在 Parcel 构建期间在 HTML 文件中调用时不会触发

JavaScript function won't trigger when called in HTML file during Parcel build

html

javascript

node.js

parceljs