Question

我试图加载一个在require.js项目中编译为Webpack的库。当库公开一个对象时，它在require.js项目中需要时返回null：

define(function(require, exports, module) {
  [...]
  require("./ext/mylib.core.js"); // -> null
})

我是否可以在Webpack中使用任何标志来启用AMD合规性？在生成的库中有一些对AMD的引用，但因为它似乎没有做任何事情。

Answer 1

解决方案是在Webpack文档中：有一个outputLibrary标志，可以设置为＆＃34; amd＆＃34;或者＆＃34; umd＆＃34;在这种情况下，webpack生成符合amd标准的模块。

Answer 2

编辑3： / 编辑：4 Webpack似乎没有合作，所以另一种可能性是使用shim配置选项公开模块：

require.config({
    paths: {
        // Tell require where to find the webpack thingy
        yourModule: 'path/to/the/webpack/asset'
    },
    shim: {
        // This lets require ignore that there is no define
        // call but will instead use the specified global
        // as the module export
        yourModule: {
            exports: 'theGlobalThatIsPutInPlaceByWebpack'
        }
    }
});

这显然只适用于webpack的东西在全球范围内放置的东西。希望这有帮助！

编辑2： 所以我在评论中指出错误的问题。我没有找到任何内置功能来从webpack生成AMD模块 - 最终结果似乎是静态资产js文件。您可以将结果包装在

中

define(function () {
    return /* the object that webpack produces */;
});

阻止，可能是在一些后期构建事件的帮助下（例如使用this after build plugin for webpack）。然后你应该能够要求模块带有AMD加载器。

原始答案：

require.js异步加载它的依赖项，当你不使用r.js优化器等时，必须明确声明它们。因此，如果模块公开AMD定义，它应该像这样工作：

// It works the way you did it ...
define(['path/to/your/module'], function (require, exports, module) {
    require('path/to/your/module'); // -> { ... }
});

// ... but I personally prefer this explicit syntax + it is
// friendlier to a code minifier
define(['path/to/your/module'], function (yourModule) {
    console.log(yourModule); // { ... }
});

也许您必须配置您的require实例，有docs for that。

EDIT1：正如指出访问模块的方式没错，但缺少依赖关系，所以我添加了更接近原始问题的代码。

在基于require.js的项目中加载webpack模块将返回null

2 个答案: