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

【问题标题】：How to require javascript model files within the index.js file?如何在 index.js 文件中要求 javascript 模型文件？
【发布时间】：2016-07-05 20:33:57
【问题描述】：

我有 2 个模型文件，每个文件都包含一个构造函数，还有一个 index.js 文件，我希望使用它来将元素插入到 HTML 文件中，使用 innerHTML。我想使用 js 模型文件中的变量之一，但是当我尝试要求 index.js 文件中的文件时，innerHTML 文件突然停止工作。请注意，当前 `window.onload' 函数中的代码正在插入 h1 元素作为测试，我将用构造函数的返回值替换它，但目前，当我需要文件时，即使是 h1 插入停止工作。我认为相关的代码 sn-ps 可以在下面看到：

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;

【问题讨论】：

innerHTML 文件是什么？
innerHTML是修改节点html的函数，不是文件
控制台出现什么错误？
ERR_FILE_NOT_FOUND 后跟 require not defined. 我只是想知道在这种情况下我是否可以使用 require 以及是否有另一种方法可以将信息放入 index.js 文件中？
问题是您期待哪个“要求”？节点使用的相同要求？或您尚未导入的 RequireJS 库。无论哪种方式，都找不到require。如果它是节点一，那么您需要一个工具来为您编译文件。如果是另一个，那么你需要图书馆

标签： javascript module model require innerhtml

【解决方案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/

【讨论】：

抱歉，哪个库？
@sdawes 更新答案并提供更多解释