bfeb9fa27e075fb9fe55f55480e5d70fa83f0ac01e57a9c24e4c7b48ba4f52b9088e1e37df1abe5dbebc9cee47eaff43d837f5f064f707dfed5ee0eb9963dc 4.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214
  1. # babel-plugin-transform-es2015-modules-umd
  2. > This plugin transforms ES2015 modules to [Universal Module Definition (UMD)](https://github.com/umdjs/umd).
  3. ## Example
  4. **In**
  5. ```javascript
  6. export default 42;
  7. ```
  8. **Out**
  9. ```javascript
  10. (function (global, factory) {
  11. if (typeof define === "function" && define.amd) {
  12. define(["exports"], factory);
  13. } else if (typeof exports !== "undefined") {
  14. factory(exports);
  15. } else {
  16. var mod = {
  17. exports: {}
  18. };
  19. factory(mod.exports);
  20. global.actual = mod.exports;
  21. }
  22. })(this, function (exports) {
  23. "use strict";
  24. Object.defineProperty(exports, "__esModule", {
  25. value: true
  26. });
  27. exports.default = 42;
  28. });
  29. ```
  30. ## Installation
  31. ```sh
  32. npm install --save-dev babel-plugin-transform-es2015-modules-umd
  33. ```
  34. ## Usage
  35. ### Via `.babelrc` (Recommended)
  36. **.babelrc**
  37. ```json
  38. {
  39. "plugins": ["transform-es2015-modules-umd"]
  40. }
  41. ```
  42. You can also override the names of particular libraries when this module is
  43. running in the browser. For example the `es6-promise` library exposes itself
  44. as `global.Promise` rather than `global.es6Promise`. This can be accommodated by:
  45. ```json
  46. {
  47. "plugins": [
  48. ["transform-es2015-modules-umd", {
  49. "globals": {
  50. "es6-promise": "Promise"
  51. }
  52. }]
  53. ]
  54. }
  55. ```
  56. #### Default semantics
  57. There are a few things to note about the default semantics.
  58. _First_, this transform uses the
  59. [basename](https://en.wikipedia.org/wiki/Basename) of each import to generate
  60. the global names in the UMD output. This means that if you're importing
  61. multiple modules with the same basename, like:
  62. ```js
  63. import fooBar1 from "foo-bar";
  64. import fooBar2 from "./mylib/foo-bar";
  65. ```
  66. it will transpile into two references to the same browser global:
  67. ```js
  68. factory(global.fooBar, global.fooBar);
  69. ```
  70. If you set the plugin options to:
  71. ```json
  72. {
  73. "globals": {
  74. "foo-bar": "fooBAR",
  75. "./mylib/foo-bar": "mylib.fooBar"
  76. }
  77. }
  78. ```
  79. it will still transpile both to one browser global:
  80. ```js
  81. factory(global.fooBAR, global.fooBAR);
  82. ```
  83. because again the transform is only using the basename of the import.
  84. _Second_, the specified override will still be passed to the `toIdentifier`
  85. function in [babel-types/src/converters](https://github.com/babel/babel/blob/master/packages/babel-types/src/converters.js).
  86. This means that if you specify an override as a member expression like:
  87. ```json
  88. {
  89. "globals": {
  90. "fizzbuzz": "fizz.buzz"
  91. }
  92. }
  93. ```
  94. this will _not_ transpile to `factory(global.fizz.buzz)`. Instead, it will
  95. transpile to `factory(global.fizzBuzz)` based on the logic in `toIdentifier`.
  96. _Third_, you cannot override the exported global name.
  97. #### More flexible semantics with `exactGlobals: true`
  98. All of these behaviors can limit the flexibility of the `globals` map. To
  99. remove these limitations, you can set the `exactGlobals` option to `true`.
  100. Doing this instructs the plugin to:
  101. 1. always use the full import string instead of the basename when generating
  102. the global names
  103. 2. skip passing `globals` overrides to the `toIdentifier` function. Instead,
  104. they are used exactly as written, so you will get errors if you do not use
  105. valid identifiers or valid uncomputed (dot) member expressions.
  106. 3. allow the exported global name to be overridden via the `globals` map. Any
  107. override must again be a valid identifier or valid member expression.
  108. Thus, if you set `exactGlobals` to `true` and do not pass any overrides, the
  109. first example of:
  110. ```js
  111. import fooBar1 from "foo-bar";
  112. import fooBar2 from "./mylib/foo-bar";
  113. ```
  114. will transpile to:
  115. ```js
  116. factory(global.fooBar, global.mylibFooBar);
  117. ```
  118. And if you set the plugin options to:
  119. ```json
  120. {
  121. "globals": {
  122. "foo-bar": "fooBAR",
  123. "./mylib/foo-bar": "mylib.fooBar"
  124. },
  125. "exactGlobals": true
  126. }
  127. ```
  128. then it'll transpile to:
  129. ```js
  130. factory(global.fooBAR, global.mylib.fooBar)
  131. ```
  132. Finally, with the plugin options set to:
  133. ```json
  134. {
  135. "plugins": [
  136. "external-helpers",
  137. ["transform-es2015-modules-umd", {
  138. "globals": {
  139. "my/custom/module/name": "My.Custom.Module.Name"
  140. },
  141. "exactGlobals": true
  142. }]
  143. ],
  144. "moduleId": "my/custom/module/name"
  145. }
  146. ```
  147. it will transpile to:
  148. ```js
  149. factory(mod.exports);
  150. global.My = global.My || {};
  151. global.My.Custom = global.My.Custom || {};
  152. global.My.Custom.Module = global.My.Custom.Module || {};
  153. global.My.Custom.Module.Name = mod.exports;
  154. ```
  155. ### Via CLI
  156. ```sh
  157. babel --plugins transform-es2015-modules-umd script.js
  158. ```
  159. ### Via Node API
  160. ```javascript
  161. require("babel-core").transform("code", {
  162. plugins: ["transform-es2015-modules-umd"]
  163. });
  164. ```