requirejs中的模块加载顺序

Question

We ran into an interesting problem in an existing project, 我们在一个现有项目中遇到了一个有趣的问题，

We're using requireJS 我们正在使用requireJS
All our modules are AMD compliant(and we have a lot of them) 我们所有的模块都符合AMD标准（并且我们有很多模块）
We need to include a subset of babel-polyfill as an AMD module to the project. 我们需要将babel-polyfill作为该项目的AMD模块。
It's not possible to manually add this dependency to all modules one by one 无法将此依赖项手动一一添加到所有模块
Our code is optimized and bundled using r.js 我们的代码使用r.js进行了优化和捆绑

Our main file looks something like this : // main.js 我们的主文件如下所示：// main.js

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

So we'd like to load this polyfill module before any other module is loaded in main.js 所以我们想加载此polyfill的任何其他模块在加载之前模块main.js

What won't work : 什么不起作用：

Shim - Shim is used for non AMD module. 垫片-垫片用于非AMD模块。
Adding the polyfill to the list above router - in the minified code that r.js spits out, there's no guarantee that polyfill will actually be in the code before router , it's not the defined behavior and thus cannot be counted on. 添加填充工具上面的列表router -这种r.js吐出来，但也不能保证该缩小的代码polyfill实际上是在代码前router ，它没有规定的行为，因此不能指望。
Wrapping everything with another require['polyfill'] call seems to screw up the r.js optimizer, it won't seem the bundle together the other modules if they're wrapped in require[] . 用另一个require['polyfill']调用包装所有内容似乎使r.js优化器搞砸了，如果将其他模块包装在require[] ，则似乎不会将它们捆绑在一起。
Since the polyfill is an AMD module, we can't just include it in the <HEAD> 由于polyfill是AMD模块，因此我们不能仅将其包含在<HEAD>

Option 3 is still something we're investigating to see if it's possible. 选项3仍在研究中，以查看是否可行。

So the question is - Is what we're trying to do possible? 所以问题是-我们正在尝试做些什么？

Answer 1

Whenever I load polyfills I always always always load them in a script element in head . 每当我加载polyfills我永远永远永远载入他们在一个script在元素head 。 I never load them through RequireJS. 我从不通过RequireJS加载它们。 Loading them through RequireJS gives rise to all kinds of problems, as you discovered. 正如您所发现的，通过RequireJS加载它们会引起各种问题。 You wrote: 你写了：

Since the polyfill is an AMD module, we can't just include it in the <HEAD> . 由于polyfill是AMD模块，因此我们不能仅将其包含在<HEAD> 。

The babel-polyfill package builds itself into a script that can be loaded through a script element by using Browserify: babel-polyfill软件包将自身构建为脚本，可以使用Browserify通过script元素加载该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

If you inspect dist/polyfill.js , you'll see it is not an AMD module. 如果检查dist/polyfill.js ，则会看到它不是AMD模块。 (The define function it calls is not AMD's define function.) （该define函数调用不是AMD的define功能。）

You should be able to adapt this method to your whatever subset of babel-polyfill you use. 您应该能够使此方法适应您使用的babel-polyfill任何子集。

requirejs中的模块加载顺序

问题描述

1 个解决方案

解决方案1
0 2017-07-31 16:15:26

requirejs中的模块加载顺序

问题描述

1 个解决方案

解决方案1 0 2017-07-31 16:15:26

解决方案1
0 2017-07-31 16:15:26