如何使用RequireJS加载前端NPM / Yarn包

时间:2017-08-02 02:35:21

标签: javascript knockout.js npm requirejs yarnpkg

我有一个用Knockout编写的前端SPA。由于它的大小,我想将它分成多个文件,使我的文件夹结构看起来像这样:

node_modules
|- knockout
\- requirejs
components
|- MyFutureViewModel.js
\- etc.
index.html
app.js

Index.html看起来像这样:

<!DOCTYPE html>
<html>
  <head>
    <title>NCounter</title>
    <meta charset="utf-8">
    <script type="text/javascript" data-main="app.js" src="./node_modules/requirejs/require.js"></script>
  </head>
  <body>
    <p>The name is <input data-bind="value: name" /></p>
    <p>You entered <span data-bind="text: name"></span>.</p>
  </body>
</html>

我的app.js文件看起来像这样:

requirejs.config({
  //Pass the top-level main.js/index.js require
  //function to requirejs so that node modules
  //are loaded relative to the top-level JS file.
  nodeRequire: require
});

require(['knockout'], function(ko) {
  var viewModel = function() {
    name: ko.observable('name')
  };
  ko.applyBindings(viewModel);
});

然而,requirejs似乎没有看到淘汰赛。我是否缺少配置或步骤?

1 个答案:

答案 0 :(得分:0)

您必须修改RequireJS配置

requirejs.config({ baseUrl: "node_modules/", paths: { // assuming that knockout lives in the node_modules/knockout/knockout.js file // if not, you have to specify relative to `node_modules` path // without .js extension 'knockout': 'knockout/knockout', } });