让 Webpack 管理古怪的 AMD 定义的最佳方式答案

【问题标题】：Best Way to Have Webpack Manage Quirky AMD Defines让 Webpack 管理古怪的 AMD 定义的最佳方式
【发布时间】：2015-04-09 18:24:51
【问题描述】：

我正在使用一个非常大的 JS 模块库（用于前端代码），它使用 AMD 样式定义。它们通常看起来像这样：

define('TwitterModule', [
  'vendor/jquery/jquery',
  'vendor/moment/moment',
  'vendor/jquery/jquery.ie.cors'
], function ($, moment) {
...

问题是依赖声明实际上并不代表依赖的位置。如果没有目录解析魔法，它们看起来像这样：

define('TwitterModule', [
  __dirname + '/vendor/jquery/content/scripts/jquery',
  __dirname + '/vendor/moment/content/scripts/moment',
  __dirname + '/vendor/jquery/content/scripts/jquery.ie.cors'
], function ($, moment) {
...

所以我试图找出解决这些目录问题的最干净的方法。即，定义根路径并将 '/content/scripts' 部分注入到 webpack 接收的路径中。 Webpack Resolve 和 Webpack Shims 看起来可以解决这个问题，但我正在寻找任何有解决奇怪 AMD 定义经验的人的反馈，以让我专注于可能的最佳解决方案。

【问题讨论】：

标签： javascript node.js dependency-management amd webpack

【解决方案1】：

你不能在 webpack 配置的 resolve 组中映射 vendor 吗？

【讨论】：

我还没有太多使用 webpack 的经验，但是是的，我可以通过 resolve config 解决根路径问题。更有问题的部分是我需要编写一些逻辑来管理“内容/脚本”部分的注入位置。我需要对该初始路径进行某种正则表达式处理以注入这些目录。
顺便说一句：这不是一个奇怪的 AMD 风格 afaik。使用 requirejs，您通常使用别名 vendor 和此类文件夹（使用 requirejs 称为 shims）。
设置vendor的根目录并不是奇怪的部分……奇怪的是define语句在包名和实际脚本文件之间注入了内容/脚本。但我同意，我认为我需要为此创建一个 shim。