从requirejs迁移到webpack

Question

我正在将一个基于require.js的项目迁移到webpack v3。由于我的所有模块都使用以下语法：

    define([modules,..], function(mod1,..) 

这段代码声明了要使用哪些模块，并将这些模块分配给匿名函数中的变量。从webpack v2开始，这种方法似乎已经被弃用。我无法找到有关此问题的任何信息（除了webpack v1的文档）。

我应该重写所有模块以符合commonjs规范（包括依赖项），还是有一些聪明的方法可以使用AMD模块？

非常感谢您的帮助 :-) 问候

- Svendole

Answer 1

AMD在requirejs之外没有太多用途，所以您可能需要进行转换。有一些工具可以帮助：

• https://github.com/anodynos/uRequire 可以将代码从AMD转换为UMD/CommonJS

这里有一些注意事项 (https://github.com/anodynos/uRequire/wiki/nodejs-Template):

• 运行时将路径翻译成类似models/PersonModel到../../models/PersonModel的形式，具体取决于它从哪里调用。你仍然会得到构建时被翻译的bundleRelative路径，变成了它们的nodejs fileRelative等效路径。

对于大多数项目来说，这不是问题。

• 无法使用异步版本的require(['dep'], function(dep){...})

您应该能够使用同步版本的require。如果使用webpack2，则可以使用System.import或require.ensure

• 无法运行requirejs加载器插件，例如text!...或json!...

您将找到所有这些插件的webpack版本

• 没有映射/,即webRootMap等，也没有使用requirejs.config的{baseUrl:"...."}或{paths:"lib":"../../lib"}

这可以用https://www.npmjs.com/package/babel-plugin-module-alias来复制。

- CaptEmulation

---

感谢您的回复@CaptEmulation。我发现webpack支持amd开箱即用，但我的问题似乎在其他地方。使用knockout和pager.js无法正确初始化（声称pager未定义，尽管我已经要求它）。 - Svendole

如果你想要另外一组眼睛来审查，可以随意将其放在公共仓库中并提供链接。 - CaptEmulation

我已经创建了一个只包含必要文件的公共存储库：链接 @CaptEmulation 感谢您的时间！ - Svendole

你可以通过运行“npm install”和“npm run start”来启动它 :) @CaptEmulation - Svendole

非常感谢 - 工作得很好 :-) 我还发现我使用的许多库必须手动调用，这是因为它们被导入的方式。我是stackoverflow的新手 - 我可以以某种方式给你积分吗？ - Svendole

忘记打标签了 :) - Svendole

Answer 2

CaptEmulation的答案对于较新版本的Webpack无效。Webpack本身支持AMD（无需安装额外的加载器或插件）。这里提供了详细的说明：https://webpack.js.org/api/module-methods。

当尝试将基于RequireJS的构建重写为Webpack时，很容易忽略这个事实，因为RequireJS使用没有结尾的相对路径./，例如：

define('app/dep1', function(dep1) { ... });

如果假设require.config.js和webpack.config.js在同一个目录下，那么这段代码将无法通过Webpack的额外配置：

{
   resolve: {
      modules: [ './', ... ] // other entries possible here
   }
}

- MaDa