In my front end SPA built with Knockout, I am facing the challenge of its growing size. To resolve this issue, I plan on splitting it into multiple files and restructuring my folder as follows:
node_modules
|- knockout
\- requirejs
components
|- MyFutureViewModel.js
\- etc.
index.html
app.js
The structure of index.html is like this:
<!DOCTYPE html>
<html>
<head>
<title>MyApp</title>
<meta charset="utf-8">
<script type="text/javascript" data-main="app.js" src="./node_modules/requirejs/require.js"></script>
</head>
<body>
<p>Enter your name: <input data-bind="value: name" /></p>
<p>You entered: <span data-bind="text: name"></span>.</p>
</body>
</html>
This is a snippet from my app.js file:
requirejs.config({
//Ensure correct loading of node modules relative to main JS file.
nodeRequire: require
});
require(['knockout'], function(ko) {
var viewModel = function() {
name: ko.observable('name')
};
ko.applyBindings(viewModel);
});
Despite the setup, requirejs is unable to locate knockout. Is there a missing configuration or step?