1

我正在使用汇总和 babel 转换一些 ES6 代码并将结果捆绑到一个文件中，但是我遇到了 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"
}

核心.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();

}());

正如您在 core.js 中看到的，我使用的是 ES6 类。我希望 babel 只为使用过的对象添加 polyfill。由于目前我只使用类，我希望 babel 只使用 checkClassCall 和其他函数来使“类”功能正常工作。但它为我的最终包添加了整个 polyfill 功能。

所以我做了一些研究，发现了“external-helpers-2”和选项：externalHelpers:true runtimeHelpers:true

它将每个 babel 功能打包在 babelHelpers 中，但我不知道如何使用最终 IIFE 顶部的所有功能生成对象。

编辑

如果我使用转换运行时，那么我会在控制台中得到它

将 'babel-runtime/helpers/classCallCheck' 视为外部依赖项 将 'babel-runtime/helpers/createClass' 视为外部依赖项 在 options.globa 中没有为外部模块 'babel-runtime/helpers/classCallCheck' 提供名称 ls – 猜测' _classCallCheck' 没有为 options.globals 中的外部模块 'babel-runtime/helpers/createClass' 提供名称 - 猜测 '_createClass'

_classCallCheck 和 _createClass 也被添加到我在最终汇总 IIFE 中的参数中

4

2 回答 2

1

这就是我为汇总配置 babel 的方式，可能对您有用：

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

if 是非常重要的使用es2015而不是es2015-rollup

于 2017-01-11T15:48:40.170 回答
0

尝试从 Rollup.js 配置中删除externalHelpers和选项。preset 已经包含了助手，所以只使用它就足够了。runtimeHelperses2015-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
};
于 2016-12-05T20:56:55.917 回答