Fix UMD bundles, making safe to use as required modules (#7840)
Paul O’Shannessy committed
Oct 3, 2016 at 15:49 UTC
92c84a6f37245f4fbe3ce5dc50845856201637fa
1 file changed
+52
-6
grunt/config/browserify.js
+52
-6
@@ -62,6 +62,52 @@ function simpleBannerify(src) {
62
);
63
}
64
65
+// What is happening here???
66
+// I'm glad you asked. It became really to make our bundle splitting work.
67
+// Everything is fine in node and when bundling with those packages, but when
68
+// using our pre-packaged files, the splitting didn't work. Specifically due to
69
+// the UMD wrappers defining their own require and creating their own encapsulated
70
+// "registry" scope, we couldn't require across the boundaries. Webpack tries to
71
+// be smart and looks for top-level requires (even when aliasing to a bundle),
72
+// but since we didn't have those, we couldn't require 'react' from 'react-dom'.
73
+// But we are already shimming in some modules that look for a global React
74
+// variable. So we write a wrapper around the UMD bundle that browserify creates,
75
+// and define a React variable that will require across Webpack-boundaries or fall
76
+// back to the global, just like it would previously.
77
+function wrapperify(src) {
78
+ return `
79
+;(function(f) {
80
+ // CommonJS
81
+ if (typeof exports === "object" && typeof module !== "undefined") {
82
+ f(require('react'));
83
+
84
+ // RequireJS
85
+ } else if (typeof define === "function" && define.amd) {
86
+ require(['react'], f);
87
+
88
+ // <script>
89
+ } else {
90
+ var g;
91
+ if (typeof window !== "undefined") {
92
+ g = window;
93
+ } else if (typeof global !== "undefined") {
94
+ g = global;
95
+ } else if (typeof self !== "undefined") {
96
+ g = self;
97
+ } else {
98
+ // works providing we're not in "use strict";
99
+ // needed for Java 8 Nashorn
100
+ // see https://github.com/facebook/react/issues/3037
101
+ g = this;
102
+ }
103
+ f(g.React)
104
+ }
105
+})(function(React) {
106
+ ${src}
107
+});
108
+`;
109
+}
110
+
111
// Our basic config which we'll add to to make our other builds
112
var basic = {
113
entries: [
@@ -137,7 +183,7 @@ var dom = {
183
transforms: [shimSharedModules],
184
globalTransforms: [envifyDev],
185
plugins: [collapser],
140
- after: [derequire, simpleBannerify],
186
+ after: [derequire, wrapperify, simpleBannerify],
187
};
188
189
var domMin = {
@@ -155,7 +201,7 @@ var domMin = {
201
// No need to derequire because the minifier will mangle
202
// the "require" calls.
203
158
- after: [minify, bannerify],
204
+ after: [wrapperify, minify, bannerify],
205
};
206
207
var domServer = {
@@ -169,7 +215,7 @@ var domServer = {
215
transforms: [shimSharedModules],
216
globalTransforms: [envifyDev],
217
plugins: [collapser],
172
- after: [derequire, simpleBannerify],
218
+ after: [derequire, wrapperify, simpleBannerify],
219
};
220
221
var domServerMin = {
@@ -187,7 +233,7 @@ var domServerMin = {
233
// No need to derequire because the minifier will mangle
234
// the "require" calls.
235
190
- after: [minify, bannerify],
236
+ after: [wrapperify, minify, bannerify],
237
};
238
239
var domFiber = {
@@ -201,7 +247,7 @@ var domFiber = {
247
transforms: [shimSharedModules],
248
globalTransforms: [envifyDev],
249
plugins: [collapser],
204
- after: [derequire, simpleBannerify],
250
+ after: [derequire, wrapperify, simpleBannerify],
251
};
252
253
var domFiberMin = {
@@ -219,7 +265,7 @@ var domFiberMin = {
265
// No need to derequire because the minifier will mangle
266
// the "require" calls.
267
222
- after: [minify, bannerify],
268
+ after: [wrapperify, minify, bannerify],
269
};
270
271
module.exports = {