2016-12-05 73 views
0

我正在使用匯總和babel來轉儲一些ES6代碼並將結果捆綁到單個文件中,但我遇到了一些與babelHelpers對象有關的問題。rollupjs - babelHelpers對象未創建

rollup.config.js:

export default { 
    entry: './src/js/core.js', 
    dest: './dist/output.js', 
    format: 'iife', 
    plugins: [babel({ 
    externalHelpers: true, 
    runtimeHelpers: true, 
    presets: ["es2015-rollup"] 
    })], 
    treeshake: false, 
    useStrict: true 
}; 

.babelrc:

{ 
    "presets": ["es2015-rollup"], 
    "plugins": [ 
    "transform-class-properties", 
    "transform-es2015-classes", 
    "external-helpers-2" 
    ] 
} 

和的package.json的一部分:

"scripts": { 
    "start": "npm-run-all --parallel rollup:watch lint:watch", 
    "rollup": "rollup -c", 
    "rollup:watch": "rollup -c -w", 
    "lint": "esw rollup.config.* src/js/** --color", 
    "lint:watch": "npm run lint -- --watch" 
}, 
"dependencies": { 
    "babel-helpers": "^6.16.0", 
    "babel-plugin-external-helpers": "^6.18.0", 
    "babel-plugin-external-helpers-2": "^6.3.13", 
    "babel-plugin-transform-class-properties": "^6.19.0", 
    "babel-plugin-transform-es2015-classes": "^6.18.0", 
    "babel-plugin-transform-runtime": "^6.15.0", 
    "babel-polyfill": "^6.16.0", 
    "babel-preset-es2015-rollup": "^1.2.0", 
    "babel-preset-latest": "^6.16.0", 
    "eslint": "^3.11.1", 
    "eslint-plugin-import": "^2.2.0", 
    "eslint-watch": "^2.1.14", 
    "npm-run-all": "^3.1.2", 
    "rollup": "^0.36.4", 
    "rollup-plugin-babel": "^2.6.1", 
    "rollup-plugin-uglify": "^1.0.1", 
    "rollup-watch": "^2.5.0" 
} 

core.js:

var configOptions = { 
    range: [0, 5], 
    arg: "speak", 
    options: ["listen", "mute", "speak"] 
}; 

function updateOptions(opt) { 
    if (configOptions.range == undefined) { 
    configOptions.range = opt.range; 
    } 
} 

updateOptions({}); 

class Hello { 
    print() { 
    } 
} 

new Hello().print(); 

捆綁輸出:

(function() { 
'use strict'; 

var configOptions = { 
    range: [0, 5], 
    arg: "speak", 
    options: ["listen", "mute", "speak"] 
}; 

function updateOptions(opt) { 
    if (configOptions.range == undefined) { 
    configOptions.range = opt.range; 
    } 
} 

updateOptions({}); 

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

    babelHelpers.createClass(Hello, [{ 
    key: "print", 
    value: function print() {} 
    }]); 
    return Hello; 
}(); 

new Hello().print(); 

}()); 

所以你可以在我使用ES6類core.js看到。我希望babel只爲所使用的對象添加polyfill。由於目前我只使用類,我希望巴貝爾只使用checkClassCall和其他功能的「類」功能工作。但它爲我的最終捆綁添加了整個polyfill功能。

所以我做了一些研究,發現關於「外傭-2」和選項: externalHelpers:真 runtimeHelpers:真

其包內babelHelpers每一個通天的功能,但我不知道如何產生的在我的最終IIFE的頂部的所有功能的對象。

編輯

如果我使用變換運行然後我得到這個控制檯

治療「通天塔運行時/助理/ classCallCheck」外部依賴 治療「通天塔運行時/助理/ createClass '作爲外部依賴關係 options.globa ls - guessing'_classCallCheck' 沒有爲外部模塊'babel-runtime/helpers/classCallCheck' options.globals - 猜「_createClass」

也_classCallCheck和_createClass添加到我的參數,最終彙總IIFE

+0

您是否嘗試安裝babel-plugin-transform-runtime?它應該持有你需要的幫手。 – misha130

+0

我嘗試過。結果是添加了2個參數給我的IIFE _classCallCheck,_createClass,但這並不能解決我的問題。此外,_classCallCheck中已添加_classCallCheck ='default'? _classCallCheck ['default']:_classCallCheck; _createClass ='default'in _createClass? _createClass ['default']:_createClass; ...我希望Babel在我的IIFE的TOP處插入classCallCheck和createClass函數,而不是將它們作爲外部參考 – Balbi

回答

0

嘗試從Rollup.js配置去除externalHelpersruntimeHelpers選項。 es2015-rollup預設已經包含幫手,所以使用它應該足夠了。

更新Rollup.js配置:

export default { 
    entry: './src/js/core.js', 
    dest: './dist/output.js', 
    format: 'iife', 
    plugins: [babel({ 
    presets: ["es2015-rollup"] 
    })], 
    treeshake: false, 
    useStrict: true 
}; 
+0

仍然不起作用。整個polyfill都包含在內......我只需要一些功能 – Balbi

1

這是我如何配置彙總的巴貝爾,可能會爲你工作:

{ 
    presets  : [['es2015', {"modules": false}]], 
    runtimeHelpers : true, 
    exclude  : 'node_modules/**', 
    plugins  : ["external-helpers"] 
} 

如果是非常重要的是使用es2015代替es2015-rollup