Question

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

2019-08-22

4035

javascript html node.js parceljs

我有一个基本的 HTML 表单页面，它链接到一个 JavaScript 文件。这两个文件都存在于 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.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 与 parcel。我无法获得正确的运行答案。它永远找不到我的函数（我想是因为它从未导出）。我亲自解决了我试图做的事情，方法是将 on click 事件设置为 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>

Answer 3

为了能够使用 parcel 启用 javascript，您必须首先使用以下 cmd 安装 lodash 等库：

npm install --save-dev lodash

接下来，在您的 index.js 文件中，您必须使用以下代码导入 lodash

import _ from "lodash"

现在您可以将下划线与所有 js 方法或
循环一起使用，它应该可以完美运行，例如

const collapsibles = document.querySelectorAll(".collapsible");
_.forEach(collapsibles, (item) =>
      item.addEventListener("click", function () {
          this.classList.toggle("collapsible--expanded");
     })
   );