Question

我们在现有项目中遇到了一个有趣的问题，

我们正在使用requireJS
我们所有的模块都符合AMD标准（我们有很多模块）
我们需要在项目中包含babel-polyfill的子集作为AMD模块。
无法将此依赖关系逐个手动添加到所有模块
我们的代码已使用r.js

我们的主文件如下所示：// main.js

require(
[
    'router',
    'someOtherModule', /* In reality we have quite a few more here */
], function(Router, AppModule) {/*... app code ...*/}
)

所以我们想在polyfill

main.js

什么行不通：

Shim - Shim用于非AMD模块。
将填充符添加到router上方的列表中 - 在r.js吐出的缩小代码中，无法保证polyfill实际上位于router之前的代码中，它是不是定义的行为，因此不能指望。
使用另一个require['polyfill']调用来包装所有内容似乎搞砸了r.js优化器，如果将它们包含在require[]中，它们似乎不会与其他模块捆绑在一起。
由于polyfill是AMD模块，我们不能只将其包含在<HEAD>

选项3仍然是我们正在研究的问题，看看是否可能。

所以问题是 - 我们正在尝试做什么？

Answer 1

每当我加载polyfill时，我总是总是将它们加载到script中的head元素中。我从来没有通过RequireJS加载它们。正如您所发现的那样，通过RequireJS加载它们会产生各种问题。你写道：

由于polyfill是AMD模块，我们不能只将其包含在<HEAD>中。

babel-polyfill包builds itself到一个脚本中，可以使用Browserify通过script元素加载：

#!/bin/sh
set -ex

BROWSERIFY_CMD="../../node_modules/browserify/bin/cmd.js"
UGLIFY_CMD="../../node_modules/uglify-js/bin/uglifyjs"

mkdir -p dist

node $BROWSERIFY_CMD lib/index.js \
  --insert-global-vars 'global' \
  --plugin bundle-collapser/plugin \
  --plugin derequire/plugin \
  >dist/polyfill.js
node $UGLIFY_CMD dist/polyfill.js \
  --compress keep_fnames,keep_fargs,warnings=false \
  --mangle keep_fnames \
  >dist/polyfill.min.js

如果您检查dist/polyfill.js，您会发现它不是AMD模块。（它调用的define函数不是AMD的define函数。）

您应该能够将此方法适用于您使用的babel-polyfill的任何子集。

requirejs中的模块加载顺序

1 个答案: