如何在index.js文件中要求javascript模型文件？

Question

我有2个模型文件，每个模型文件中都包含一个构造函数，以及一个index.js文件，我希望使用它们使用innerHTML将元素插入HTML文件中。 我想使用js模型文件中的变量之一，但是当我尝试要求index.js文件中的文件时，innerHTML文件突然停止工作。 请注意，当前“ window.onload”函数中的代码正在插入h1元素作为测试，我将用构造函数的返回值替换此元素，但此刻，当我需要文件时，甚至需要插入h1停止工作。 我认为相关的代码段如下所示：

index.js文件：

 var ToDo = require('../src/toDo.js'); var ToDoList = require('../src/toDoList.js'); window.onload = function() { // create a couple of elements in an otherwise empty HTML page var heading = document.createElement("h1"); var heading_text = document.createTextNode("Big Head!"); heading.appendChild(heading_text); document.body.appendChild(heading); } 

模型文件1：

 function ToDo(task) { this.task = task; this.complete = false; } module.exports = ToDo; 

 function ToDoList() { this.array = []; } ToDoList.prototype.add = function(task) { this.array.push(task); }; ToDoList.prototype.popTask = function() { var poppedTask = this.array.pop(); var concat = "<ul><li>"; var concat2 = "</li></ul>"; return (concat + poppedTask.task + concat2); }; module.exports = ToDoList; 

Answer 1

require是CommonJs功能，没有此库的浏览器不支持它。 因此，如果您想要带有require语法的模块，则需要在项目中使用它。

更新资料

要使用require功能，您将需要一些模块加载器。 您可以签出两种非常受欢迎的产品-Webpack或Browserify 。 它们都支持CommonJS require您正在寻找。 对于我来说，我最喜欢webpack，因为它非常强大。 要阅读它们的比较： https : //medium.com/@housecor/browserify-vs-webpack-b3d7ca08a0a9#.lb3sscovr

RequireJS是另一个模块加载器，但他不适用于CommonJs样式的模块（ require ）。 他实现了AMD样式的模块。 您可以查看本文以了解AMD与CommonJS有何不同： https ://auth0.com/blog/2016/03/15/javascript-module-systems-showdown/