javascript - 创建可重用的 RequireJs 库

Question

考虑到以下简化场景，我如何才能最好地构建可重用组件，以便它可以被另一个应用程序正确使用，例如 foo.js 打印 23？

<小时/>

可重用组件:

/home.js
/main.js
/stuff
  foo.js

--

/home.js:
define([], function () { return 23; }

/stuff/foo.js:
define(['home'], function (home) { console.log(home); } // prints 23

<小时/>

消费者应用:

/app.js
/main.js
/home.js
/views
  template.html
/bower_components
  /myReusableComponent
    /home.js
    /main.js 
    /stuff
      foo.js

--

/home.js:
define([], function () { return 17; }

/bower_components/myReusableComponent/home.js:
define([], function () { return 23; }

/bower_components/myReusableComponent/stuff/foo.js:
define(['home'], function (home) { console.log(home); } // now prints 17

<小时/>

是否有消费者应用程序 requirejs 配置将/myReusableComponent 中任何模块的 baseUrl 设置为“/myReusableComponent”？无论如何，我的可重用组件不应该/不需要访问消费者应用程序的根级别。

我研究了 r.js 优化器，但它只输出一堆 define('stuff/foo', [], function ())...如果消费者应用程序也有 stuff/foo.js 吗？

到目前为止，我找到的唯一解决方案是在所有模块中强制使用相对路径:define(['../home'], function (home) { console.log(home); } 但我希望有一种更优雅的方法来解决这个问题。

非常感谢所有反馈!

Answer 1

如果您想生成一个可在不同应用程序中使用的库，那么当您的库的一个模块引用另一个模块时，您应该使用相对路径，因为这使得使用您的库的人更有可能被无需修改其 RequireJS 配置即可做到这一点。

一些冲突可以通过明智地使用map或path来消除。然而，最终，有些情况如果无法访问未优化的模块就无法解决(或者至少无法按照用户想要的方式解决)，因此您应该将您的库作为优化的包进行分发并提供可以将其作为未优化模块的集合加载。