index.jsファイル内でjavascriptモデルファイルを要求する方法は？

Question

それぞれにコンストラクタを含む2つのモデルファイルと、innerHTMLを使用して要素をHTMLファイルに挿入するために使用するindex.jsファイルがあります。 jsモデルファイルの変数の1つを使用したいのですが、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機能を使用するには、あなたには、いくつかのモジュールローダが必要になります。あなたがチェックアウトできる2つの非常に人気があります - 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/