Grunt，Babel为Es6设置外部帮手

问题描述：

嗨，那里我*来到这里，因为这里的每一个资源都非常贫穷和不完整。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个空格。我必须在我的编辑器中编辑这篇文章才能使代码块正常工作！像“```”这样的其他地方会有一个标记会很好吗？

让我知道谢谢。

由于现在我想我必须手动生成帮助程序，请将其缩小，然后将其连接到生成的babel版本。即巴贝尔，外佣-l createClass，classCallCheck，继承，interopRequireDefault，possibleConstructorReturn> ../../lib/babel/helpers.js 试图找出如何导入这些明确并得到自动生成。转换运行时插件似乎有一个错误，它会生成整个polyfill，而不管这会使文件不必要地大，所以不是很有用。 –

答

我遇到了非常相似的东西。已经厌倦了试图做到“正确的方式”，并最终创建了https://www.npmjs.com/package/grunt-babel-helpers，它只是简单地处理字符串输出。

答

我现在正在使用rolelp和babel。 Rollup生成一个干净的输出作为umd模式。 Browserify本身非常笨拙。

只有一个聚合物被转换的问题。我必须像WeakMap一样在外部连接。

我有一个问题，试图使用生成的迭代器，并找到一个polyfill，所以我必须编写循环的特定方式，它不会生成迭代器。

巴贝尔的polyfill世代仍然过于膨胀和疯狂。这非常可怕。因此，我在缩小的polyfills中进行连接，这些连接非常小，并在全球范围内使用。

Grunt，Babel为Es6设置外部帮手

相关推荐