摘要:并且作為生產版本依賴設置轉換器插件一般只用在開發時,而里面的實際墊片的代碼在你部署或發布庫時是需要放到其中的。轉換器所做的是轉換成如下添加到這意味著你可以無縫的使用本地內置的方法而不用考慮是來自墊片還是本地。。
Runtime transform 運行時編譯es6
入口文件引用作為輔助和內建,自動添加墊片到你的當前代碼模塊而非全局
這個插件建議放在 library/tool中
注意:
實例方法,例如"foobar".includes("foo")將不能夠使用,因為它將修正內置的墊片。
Babel對常用的函數使用非常小的輔助(內置的墊片比較少),例如_extend。默認情況下它將會添加到每個引用的文件。這種重復有時候是非常沒必要的。特別是你的應用分散在很多文件中。
這是transform-runtime插件之所以產生的原因:所有的這些輔助(墊片)將會引用babel-runtime來避免編譯時重復。runtime將會編譯到你的build中。
另一個目的是,這個轉換器為你的代碼創建了一個沙盒環境。如果你使用babel-polyfill并且把它內置提供promise,set,map這樣的對象或功能,他們將會污染全局環境。也許在一個應用中或者命令行工具中沒問題,但是如果你的代碼是個庫,你想發布給其他人使用,因為使用的人可能在各種各樣的執行環境中,所以可能導致錯誤,不能執行。
轉換器transformer會將這些內置(墊片)設置別名到core-js中,因此你可以不使用require來無縫的使用(墊片中的對象和方法)。
如何生效和工作,請看技術細節
安裝注意:生產版本(Production) vs 開發版本(development)依賴
在大多數情況下,你需要安裝babel-plugin-transform-runtime作為開發版本的依賴(設置--save-dev)。
npm install --save-dev babel-plugin-transform-runtime
并且babel-runtime作為生產版本依賴(設置 --save)
npm install --save babel-runtime
轉換器插件一般只用在開發時,而里面的實際墊片(runtime itself)的代碼在你部署或發布庫時是需要放到其中的。
請看下面的例子
用法 通過.babelrc(推薦)把下面的代碼添加到你的babelrc文件中(這里說的是兩種情況):
默認設置選項時的寫法
{ "plugins": ["transform-runtime"] }
使用自己設置設置
{ "plugins": [ ["transform-runtime", { "helpers": false, "polyfill": false, "regenerator": true, "moduleName": "babel-runtime" }] ] }通過命令行(CLI)
babel --plugins transform-runtime script.js通過Node 接口 (Node API)
require("babel-core").transform("code",{ plugins:["transform-runtime"] })選項/設置 輔助(helpers)
默認值是:true
表示是否開啟內聯的babel helpers(即babel或者環境本來的存在的墊片或者某些對象方法函數)(clasCallCheck,extends,etc)在調用模塊名字(moduleName)時將被替換名字。
查看詳情
墊片/polyfill默認值是:`true"
表示是否把內置的東西(Promise,Set,Map,tec)轉換成非全局污染墊片。
查看詳情
默認值是:true
是否開啟generator函數轉換成使用regenerator runtime來避免污染全局域。
查看詳情
模塊名字/moduleName默認值:babel-runtime
當調用輔助(內置墊片)設置模塊(module)名字/路徑.
例子:
json
{ "moduleName": "flavortown/runtime" }
javascript
import extends from "flavortown/runtime/helpers/extends";技術細節/Techincal details
runtime轉換器插件主要做了三件事:
當你使用generators/async方法、函數時自動調用babel-runtime/regenerator
當你使用ES6 的Map或者內置的東西時自動調用babel-runtime/core-js
移除內聯babel helpers并替換使用babel-runtime/helpers來替換
總的來說一句話,你可以使用內置的一些東西例如Promise,Set,Symbol等,就像使用無縫的使用polyfill,來使用babel 特性,并且無全局污染、極高代碼庫適用性。
再生器別名 Regenerator aliasing無論你什么時候使用generator函數或者異步函數(async function).
function* foo(){ }
下面的將被生成:
"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); }
這種是不太理想的。因為你regenerator運行時會污染全局域的。
作為替代你需要runtime轉換器來編譯成:
"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); }
這意味著在使用regenerator時不會污染當前的全局環境。
core-js的別名化/core-js aliasing有時你想去使用內置的的東西(Promise,Set,Map,etc)。通常情況下你會使用一個全局的墊片。
runtime轉換器所做的是轉換成如下:
var sym = Symbol(); var promise = new Promise; console.log(arr[Symbol.iterator]());
添加到
"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));
這意味著你可以無縫的使用本地內置的方法而不用考慮是來自墊片還是本地。。
警告,實例方法將不能使用,例如"foobar".includes("foo")
通常babel會把輔助放在文件的頂部做一些常用任務來避免重復導入。
有時這些輔助的體積有點大并且不需要的沒有用的東西也在其中。runtime轉換器把所有的輔助轉換到一個模塊中(按他的意思是說只是把用到的轉換到其中)。
如下演示:
class Person { }
一般的轉化成(即不是用runtime):
"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); };
runtime轉化器轉化成:
"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); };
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://m.specialneedsforspecialkids.com/yun/82500.html
摘要:的轉譯過程分為三個階段。標準為例,提供了如下的一些的只轉譯該年份批準的標準,而則代指最新的標準,包括和。未完待續,繼續學習繼續補充哦參考文獻深入理解原理及其使用 Babel Babel的轉譯過程分為三個階段: parsing, transforming, generating。babel只是轉譯新標準引入的語法,比如ES6的箭頭函數轉譯成ES5的函數;而新標準引入的原生對象,部分原生對...
摘要:一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現點擊失效的情況。對于,如果工具是以下版本,在中加入以下代碼以上的版本加入以下代碼八開發對于文件的處理問題。解決方法有給元素設置絕對定位即可。元素換成內聯元素,如。 一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...
摘要:一上瀏覽器使用不允許事件代理到上選擇器以上綁定可能會出現點擊失效的情況。對于,如果工具是以下版本,在中加入以下代碼以上的版本加入以下代碼八開發對于文件的處理問題。解決方法有給元素設置絕對定位即可。元素換成內聯元素,如。 一、iOS上瀏覽器使用jQuery不允許事件代理到document上 $(document).on(click, 選擇器, function(){}); 以上綁定可能...
閱讀 3085·2019-08-30 15:56
閱讀 1239·2019-08-29 15:20
閱讀 1577·2019-08-29 13:19
閱讀 1484·2019-08-29 13:10
閱讀 3388·2019-08-26 18:27
閱讀 3074·2019-08-26 11:46
閱讀 2237·2019-08-26 11:45
閱讀 3765·2019-08-26 10:12