Grunt ，带有外部助手的 Es6 Babel 设置

Question

嗨，我被迫来到这里，因为有关该主题的所有资源都非常贫乏且不完整。

不仅在 babel 站点上，而且那里的每一个帖子都不够完整和信息量不够。

我试图在 babel 论坛上联系，但没有回复。

我正在尝试将我的原型库转换为 Es6 并转换为最精简的代码。 所以没有臃肿的重复生成的代码，如果可能的话，没有臃肿的 requirejs 和浏览器生成的任何内容。

我试过直接用grunt和babel做一个项目，根据babel文档配置external-helpers插件。

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

即 babel 配置，如

{
    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，所以这是一个错误，对我需要的东西没有多大用处。

"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']

        }
    }
}

生成这样的代码仍然缺少外部助手，并且重复的代码与助手无关。 IE

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

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

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

export default class {}

重复的代码是这样生成的

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

exports.default = _class;

就文件大小而言，不包括臃肿的包装代码，如

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

似乎将所有原型类文件连接在一起捆绑在一个文件中仍然是赢家。

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

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

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

让我知道谢谢。

Answer 1

我现在正在使用带有 babel 的汇总。 Rollup 以 umd 模式产生干净的输出。 Browserify 本身就很臃肿。

转换 polyfill 只是一个问题。 我必须像 WeakMap 一样连接外部的。

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

babel 中的 polyfill 生成仍然过于臃肿和疯狂。 这太可怕了。 所以我连接了非常小的缩小的 polyfills，它在全球范围内使用。

Answer 2

我遇到了非常相似的事情。 厌倦了尝试以“正确的方式”进行操作，最终只创建了https://www.npmjs.com/package/grunt-babel-helpers来简单地操作字符串输出。