Blame view

node_modules/babel-plugin-transform-runtime/README.md 6.8 KB
6a9ffbcc   liuqimichale   地图点击事件
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
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
  # babel-plugin-transform-runtime
  
  > Externalise references to helpers and builtins, automatically polyfilling your code without polluting globals. (This plugin is recommended in a library/tool)
  
  NOTE: Instance methods such as `"foobar".includes("foo")` will not work since that would require modification of existing builtins (Use [`babel-polyfill`](http://babeljs.io/docs/usage/polyfill) for that).
  
  ## Why?
  
  Babel uses very small helpers for common functions such as `_extend`. By default this will be added to every file that requires it. This duplication is sometimes unnecessary, especially when your application is spread out over multiple files.
  
  This is where the `transform-runtime` plugin comes in: all of the helpers will reference the module `babel-runtime` to avoid duplication across your compiled output. The runtime will be compiled into your build.
  
  Another purpose of this transformer is to create a sandboxed environment for your code. If you use [babel-polyfill](http://babeljs.io/docs/usage/polyfill/) and the built-ins it provides such as `Promise`, `Set` and `Map`, those will pollute the global scope. While this might be ok for an app or a command line tool, it becomes a problem if your code is a library which you intend to publish for others to use or if you can't exactly control the environment in which your code will run.
  
  The transformer will alias these built-ins to `core-js` so you can use them seamlessly without having to require the polyfill.
  
  See the [technical details](#technical-details) section for more information on how this works and the types of transformations that occur.
  
  ## Installation
  
  **NOTE - Production vs. development dependencies**
  
  In most cases, you should install `babel-plugin-transform-runtime` as a development dependency (with `--save-dev`).
  
  ```sh
  npm install --save-dev babel-plugin-transform-runtime
  ```
  
  and `babel-runtime` as a production dependency (with `--save`).
  
  ```sh
  npm install --save babel-runtime
  ```
  
  The transformation plugin is typically used only in development, but the runtime itself will be depended on by your deployed/published code. See the examples below for more details.
  
  ## Usage
  
  ### Via `.babelrc` (Recommended)
  
  Add the following line to your `.babelrc` file:
  
  ```js
  // without options
  {
    "plugins": ["transform-runtime"]
  }
  
  // with options
  {
    "plugins": [
      ["transform-runtime", {
        "helpers": false, // defaults to true
        "polyfill": false, // defaults to true
        "regenerator": true, // defaults to true
        "moduleName": "babel-runtime" // defaults to "babel-runtime"
      }]
    ]
  }
  ```
  
  ### Via CLI
  
  ```sh
  babel --plugins transform-runtime script.js
  ```
  
  ### Via Node API
  
  ```javascript
  require("babel-core").transform("code", {
    plugins: ["transform-runtime"]
  });
  ```
  
  ## Technical details
  
  The `runtime` transformer plugin does three things:
  
  * Automatically requires `babel-runtime/regenerator` when you use generators/async functions.
  * Automatically requires `babel-runtime/core-js` and maps ES6 static methods and built-ins.
  * Removes the inline babel helpers and uses the module `babel-runtime/helpers` instead.
  
  What does this actually mean though? Basically, you can use built-ins such as `Promise`, `Set`, `Symbol` etc as well use all the Babel features that require a polyfill seamlessly, without global pollution, making it extremely suitable for libraries.
  
  Make sure you include `babel-runtime` as a dependency.
  
  ### Regenerator aliasing
  
  Whenever you use a generator function or async function:
  
  ```javascript
  function* foo() {
  
  }
  ```
  
  the following is generated:
  
  ```javascript
  "use strict";
  
  var _marked = [foo].map(regeneratorRuntime.mark);
  
  function foo() {
    return regeneratorRuntime.wrap(function foo$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
        case "end":
          return _context.stop();
      }
    }, _marked[0], this);
  }
  ```
  
  This isn't ideal as then you have to include the regenerator runtime which
  pollutes the global scope.
  
  Instead what the `runtime` transformer does it compile that to:
  
  ```javascript
  "use strict";
  
  var _regenerator = require("babel-runtime/regenerator");
  
  var _regenerator2 = _interopRequireDefault(_regenerator);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  var _marked = [foo].map(_regenerator2.default.mark);
  
  function foo() {
    return regeneratorRuntime.wrap(function foo$(_context) {
      while (1) switch (_context.prev = _context.next) {
        case 0:
        case "end":
          return _context.stop();
      }
    }, _marked[0], this);
  }
  ```
  
  This means that you can use the regenerator runtime without polluting your current environment.
  
  ### `core-js` aliasing
  
  Sometimes you may want to use new built-ins such as `Map`, `Set`, `Promise` etc. Your only way
  to use these is usually to include a globally polluting polyfill.
  
  What the `runtime` transformer does is transform the following:
  
  ```javascript
  var sym = Symbol();
  
  var promise = new Promise;
  
  console.log(arr[Symbol.iterator]());
  ```
  
  into the following:
  
  ```javascript
  "use strict";
  
  var _getIterator2 = require("babel-runtime/core-js/get-iterator");
  
  var _getIterator3 = _interopRequireDefault(_getIterator2);
  
  var _promise = require("babel-runtime/core-js/promise");
  
  var _promise2 = _interopRequireDefault(_promise);
  
  var _symbol = require("babel-runtime/core-js/symbol");
  
  var _symbol2 = _interopRequireDefault(_symbol);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  var sym = (0, _symbol2.default)();
  
  var promise = new _promise2.default();
  
  console.log((0, _getIterator3.default)(arr));
  ```
  
  This means is that you can seamlessly use these native built-ins and static methods
  without worrying about where they come from.
  
  **NOTE:** Instance methods such as `"foobar".includes("foo")` will **not** work.
  
  ### Helper aliasing
  
  Usually babel will place helpers at the top of your file to do common tasks to avoid
  duplicating the code around in the current file. Sometimes these helpers can get a
  little bulky and add unnecessary duplication across files. The `runtime`
  transformer replaces all the helper calls to a module.
  
  That means that the following code:
  
  ```javascript
  class Person {
  }
  ```
  
  usually turns into:
  
  ```javascript
  "use strict";
  
  function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
  
  var Person = function Person() {
    _classCallCheck(this, Person);
  };
  ```
  
  the `runtime` transformer however turns this into:
  
  ```javascript
  "use strict";
  
  var _classCallCheck2 = require("babel-runtime/helpers/classCallCheck");
  
  var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
  
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
  
  var Person = function Person() {
    (0, _classCallCheck3.default)(this, Person);
  };
  ```