Question

大家好，我被迫来到这里，因为关于这个话题的每一个资源都非常贫穷和不完整。

不仅在巴贝尔网站上，而且每一篇文章都没有完整和足够的信息。

我试图在babel论坛上联系并且没有回复。

我正在尝试将我的原型库转换为Es6并转换为最可能的代码。因此，没有膨胀的重复生成的代码，如果可能的话，没有膨胀的需求和浏览器生成的任何内容。

我试图直接用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，因此这个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
});

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

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

export default class {}

生成重复代码，如

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

exports.default = _class;

在文件大小方面，不包括膨胀的包装代码，如

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

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

因此尝试移植库但保持类似并将它们捆绑到一个文件中。

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

FYI浏览器不了解标签和4个空格。我必须在我的编辑器中编辑这篇文章才能使代码块工作！像“```这样的其他地方有标记会很好吗？

让我知道谢谢。

Answer 1

我现在正在和babel一起使用汇总。 Rollup以umd模式生成干净的输出。 Browserify本身真的很臃肿。

转换聚酯填充物时出现问题。我必须像WeakMap那样连接外部的。

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

巴贝尔的polyfill一代仍然过于臃肿和疯狂。这太可怕了。因此，我将缩小的填充物连接起来，这些填充物非常小并且在全球范围内使用。

Answer 2

我遇到了非常相似的事情。厌倦了尝试以正确的方式做到这一点＆＃34;最后只创建了https://www.npmjs.com/package/grunt-babel-helpers，只是简单地操作字符串输出。

Grunt，Babel使用外部助手为Es6设置

2 个答案: