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來簡單地操作字符串輸出。