Blame view

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