创建一个可重用的RequireJs库

Creating a reusable RequireJs library

本文关键字：RequireJs 一个 创建      更新时间：2023-09-26

给定以下简化场景，我如何最好地构建我的可重用组件，以便它可以被另一个应用程序正确地使用，例如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

是否存在将/myReusableComponent中任何模块的baseUrl设置为"/myReisableComponent"的使用者应用程序requirejs配置？无论如何，我的可重用组件都不应该/需要访问使用者应用程序的根级别。

我已经研究过r.js优化器，但它只是输出一堆define('stuff/foo', [], function ())。。。如果使用者应用程序也有stuff/foo.js，会发生什么？

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

非常感谢所有反馈！

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

通过明智地使用map或paths可以消除一些冲突。然而，最终，如果没有对未优化模块的访问权限，有些情况是无法解决的（或者至少不能按照用户的意愿解决），因此您应该将库作为优化的捆绑包分发，提供将其作为未优化模块集合加载的可能性。

相关文章：