Gruntjs Grunt，带外部助手的Es6巴别塔设置

大家好，我被迫来到这里，因为关于这个主题的所有资源都非常贫乏和不完整

不仅在巴别塔网站上，而且每一篇文章都不够完整，信息量也不够

我试图在巴别塔论坛上联系，但没有得到回复

我正在尝试将我的原型库转换为Es6，并转换为最精简的代码。因此，生成的代码不会出现重复的膨胀，如果可能的话，也不会出现膨胀的requirejs和browserify生成的任何内容

我曾尝试直接使用grunt和babel制作一个项目，根据babel文档配置外部助手插件

它没有包含相关的帮助程序代码，也没有完全包含导入模块代码

我喜欢巴别塔

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

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

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

            "presets": ["es2015"],

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

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

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

        }
    }
}

模块代码看起来像这样，好像导出被放置在为该模块生成额外代码的下面

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插件，它会生成一个无法禁用的大量多边形填充，因此这是一个bug，对我需要的东西没有多大用处

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

如果我使用browserify/babelify，它会把代码弄得一团糟，而且还会复制代码

类似配置的

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

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

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

            "presets": ["es2015"],

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

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

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

        }
    }
}

在生成的文件中的每个模块中

如果我在每个文件的底部像这样导出类

export default class {}

重复的代码生成如下

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

exports.default = _class;

在文件大小方面，不包括像

},{}],2:[function(require,module,exports){

将所有原型类文件集中到一个文件中似乎仍然是赢家

因此，尝试移植库，但保持相似，并将其捆绑到一个文件中

希望这足够简洁，并且有一个简单的解决方案

仅供参考，浏览器不理解制表符和4个空格。我必须在编辑器中编辑这篇文章才能让代码块正常工作！像其他地方一样有一个标记会很好，比如“``”

---

让我知道谢谢

我遇到了非常相似的事情。厌倦了用“正确的方式”去做，结果只是创建了一个简单的字符串输出。

我现在正在用巴贝尔的汇总。Rollup以umd模式生成干净的输出。Browserify本身就很臃肿

转换多边形填充时存在一个问题。我必须为WeakMap把外部的像这样的东西连接起来

我在尝试使用生成的迭代器时遇到了一个问题，并为此找到了一个polyfill，因此我必须以一种特定的方式对循环进行编码，因为它不会生成迭代器

---

巴贝尔的polyfill一代仍然过于臃肿和疯狂。太可怕了。所以我浓缩了非常小的小型多填充物，并在全球范围内使用

现在，我想我必须手动生成助手，缩小它，然后将其合并到生成的babel构建中。ie babel external helpers-l createClass、classCallCheck、inherits、InteroprequiredFault、PossibleConstructor或Return>。/../lib/babel/helpers.js试图弄清楚如何专门导入这些内容并自动生成。transform runtime插件似乎有一个bug，它生成整个polyfill，而不管是哪个使文件变得不必要的大，所以没有那么有用。