Grunt + rollup + babel 配置问题答案

【问题标题】：Grunt + rollup + babel config issueGrunt + rollup + babel 配置问题
【发布时间】：2016-10-06 14:23:59
【问题描述】：

我无法将我的 ES6 代码汇总转换为 ES5。它一直在发送消息Warning: Error transforming main.js with 'babel' plugin: It looks like your Babel configuration specifies a module transformer. Please disable it. If you're using the "es2015" preset, consider using "es2015-rollup" instead. See https://github.com/rollup/rollup-plugin-babel#configuring-babel for more information Use --force to continue.

我的.babelrc

{
  "presets": [
    [
      "es2015-rollup",
      {
        "modules": false
      }
    ]
  ],
  "plugins": ["external-helpers"]
}

我的.gruntfile

"use strict";
var babel = require('rollup-plugin-babel');

module.exports = function( grunt ) {

  grunt.initConfig({

    //...

    rollup: {
      options: {
        plugins: function () {
          return [
            babel({
              babelrc: false,
              presets: ["es2015-rollup"]
            })
          ];
        },
      },
      main: {
        'dest': 'build/js/bundle.js',
        'src' : 'src/js/main.js',
      },
    },

  //...

  });

  // Load the tasks
  grunt.loadNpmTasks('grunt-contrib-watch');
  grunt.loadNpmTasks('grunt-contrib-sass');
  grunt.loadNpmTasks('grunt-contrib-uglify');
  grunt.loadNpmTasks('grunt-notify');
  grunt.loadNpmTasks('grunt-postcss');
  grunt.loadNpmTasks('grunt-rollup');

  grunt.registerTask( 'default', [ 'rollup', 'watch' ] );
  //...
};

我的devDependencies

  "devDependencies": {
    "autoprefixer": "^6.2.3",
    "babel-plugin-external-helpers": "^6.8.0",
    "babel-preset-es2015": "^6.16.0",
    "babel-preset-es2015-rollup": "^1.2.0",
    "grunt": "^0.4.5",
    "grunt-babel": "^6.0.0",
    "grunt-contrib-sass": "^0.9.2",
    "grunt-contrib-uglify": "^0.11.0",
    "grunt-contrib-watch": "^0.6.1",
    "grunt-notify": "^0.4.3",
    "grunt-postcss": "^0.7.1",
    "grunt-rollup": "^0.8.0",
    "rollup-plugin-babel": "^2.6.1"
  }

如您所见，我使用es2015-rollup 预设而不是es2015，如警告所示。另一件事是，如果我删除预设，我的代码根本不会被转译。

【问题讨论】：

标签： gruntjs babeljs rollup

【解决方案1】：

plugins 选项应该是一个数组，而不是一个函数。

另外，在.babelrc 中，您应该使用es2015 而不是es2015-rollup，因为汇总版本只是带有external-helpers 插件的es2015。

【讨论】：

【解决方案2】：

如果你设置 babelrc: false，你的配置将不会读取 .babelrc 配置文件。

忽略您的 .babelrc 文件并在 Gruntfile.js 中的 babel 插件配置中尝试此操作：

 babel({
    babelrc: false,
    presets: [["es2015",{modules:false}]],
    exclude: ['./node_modules/**/*'], //make sure to point to your folder path
    plugins: ["external-helpers"]
 })

【讨论】：