2016-04-26 78 views
1

嗨,那裏我被迫來到這裏,因爲這裏的每一個資源都非常貧窮和不完整。Grunt,Babel爲Es6設置外部幫手

不僅在babel網站上,而且每一篇文章都沒有完整和翔實的信息。

我試圖聯繫babel論壇並且沒有回覆。

我想將我的原型庫轉換爲Es6並轉換爲最可能最簡單的代碼。因此,不會有繁瑣的重複生成的代碼,並且如果可能的話,不會有繁瑣的requirejs以及任何browserify生成的代碼。

我試着用grunt和babel直接做一個項目,根據babel文檔配置external-helpers插件。

它未能包含相關的幫手代碼,也未能完全包含導入模塊代碼。

即通天配置像

{ 
    options: { 
     sourceMap: false, 
     presets: ['es2015'], 
     "plugins": ["external-helpers"] 

    }, 
    dist: { 
     files: { 
      'build/<%= package.name %>.js': ['src/<%= package.name %>.js'] 
     } 
    } 
} 

主要項目文件已經像

import Button from './ui/buttons/Button'; 

模塊代碼看起來像這樣的進口,就好像出口置於下方額外的代碼爲生成。

export default class ShareButton {} 

產生這樣

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

require('babel-core/external-helpers'); 

var _Button = require('./ui/buttons/Button'); 

var _Button2 = babelHelpers.interopRequireDefault(_Button); 

模塊或包含輔助對象的無源的輸出。

我搜索難如何處理外部幫手,它表明,它已被導入到一個單獨的文件,即像這樣只產生所需要的輔助功​​能

babel-external-helpers -l createClass > src/helpers.js 

但是任何資源問候這沒有達到如何將其導入到項目中。

如果我使用transform-runtime插件,它會產生一個無法被禁用的大型polyfill,因此這是一個bug,對於我所需要的並不那麼有用。

"plugins": [ 
    ["transform-runtime", { "polyfill": false, "regenerator": false }] 
] 

如果我使用browserify/babelify這讓王室混亂和重複的代碼仍然。

一個配置像

{ 
    options: { 
     "transform": [["babelify", { 

      "presets": ["es2015"], 

      "plugins": ["external-helpers"], 

      sourceMap: false 
     }]] 
    }, 
    dist: { 
     files: { 

      'build/<%= package.name %>.js': ['src/<%= package.name %>.js'] 

     } 
    } 
} 

主要生產這樣的代碼仍然與外部輔助缺少的和重複的助手不相關的代碼。即

Object.defineProperty(exports, "__esModule", { 
    value: true 
}); 

位於生成文件的每個模塊中。

如果我出口這樣的類在每個文件的底部,就像

var _class = function _class() { 
    babelHelpers.classCallCheck(this, _class); 
}; 

exports.default = _class; 

產生

export default class {} 

重複的代碼在不包括像

bloaty封裝代碼文件大小方面
},{}],2:[function(require,module,exports){ 

它似乎將所有的原型類文件一起concat到外部在一個文件中的文件仍然是贏家。

因此,試圖移植庫,但保持相似,並將其捆綁到一個文件中。

希望這是足夠簡潔,有一個簡單的解決方案。

僅供參考瀏覽器不理解標籤和4個空格。我必須在我的編輯器中編輯這篇文章才能使代碼塊正常工作!像「```」這樣的其他地方會有一個標記會很好嗎?

讓我知道謝謝。

+0

由於現在我想我必須手動生成幫助程序,請將其縮小,然後將其連接到生成的babel版本。即 巴貝爾,外傭-l createClass,classCallCheck,繼承,interopRequireDefault,possibleConstructorReturn> ../../lib/babel/helpers.js 試圖找出如何導入這些明確並得到自動生成。 轉換運行時插件似乎有一個錯誤,它會生成整個polyfill,而不管這會使文件不必要地大,所以不是很有用。 –

回答

0

我現在正在使用rolelp和babel。 Rollup生成一個乾淨的輸出作爲umd模式。 Browserify本身非常笨拙。

只有一個聚合物被轉換的問題。我必須像WeakMap一樣在外部連接。

我有一個問題,試圖使用生成的迭代器,並找到一個polyfill,所以我必須編寫循環的特定方式,它不會生成迭代器。

巴貝爾的polyfill世代仍然過於膨脹和瘋狂。這非常可怕。因此,我在縮小的polyfills中進行連接,這些連接非常小,並在全球範圍內使用。