简体   繁体   中英

Babel / Rollup errors transpiling and bundling ES2017

I'm getting an error transpiling ES2017 JavaScript (specifically async/await functions) into ES5 using Rollup and Babel:

Error transforming \\src\\index.js with 'babel' plugin: Options {"modules":false} passed to \\node_modules\\babel-preset-es2017\\lib\\index.js which does not accept options.

My .babelrc file:

{
  "presets": [
    "es2017"
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}

Naturally, the error goes away if I change the presets from es2017 to es2015 and comment out the async/await code.

Note that while the application uses ES2017 features (ie async/await ), it is published as an NPM package (as an ES6 (ES2015) module) that is later transpiled to generic ES5 (ES2009) .

How do I get past this error and get my ES2017 happily transpiling to ES5 ?

It seems that the actual configuration you provided is:

{
  "presets": [
    "es2017", {modules: false}
  ],
  "plugins": [
    "transform-runtime"
  ],
  "comments": false
}

You should remove the {modules: false} option for babel-preset-es2017 , which accepts none, as it applies to babel-preset-es2015 .

Target es2015 in your .babelrc file:

"presets": [
    "es2015"
 ],

and preprocess the es2017 features by first adding the Rollup Async functions plugin , which:

replaces async functions with generator functions that can run in modern browsers or in most versions of node.js during bundling

Add to your project:

npm install --save-dev rollup-plugin-async

And then insert async preprocessing to your rollup.config.js plugins array, before babel() :

import async from 'rollup-plugin-async';

...

plugins: [
        async(),
        babel(babelrc())
],

The key insight was found in this Rollup Github issues thread , wherein @Victorystick confirms that (as of Oct 10, 2016):

Rollup currently only targets ES6, although it'll likely get extended to ES7 shortly. For now, if you use >ES6 features, they'll need to be transpiled for Rollup to process them

As async/await are likely to be standardized in the next version of ECMAScript, ES2017 (aka ES8), you'll need an extra plugin to process them before Babel runs.

NOTE:
YMMV, but I later received AsyncHelper not found run time Errors using rollup-plugin-async on Windows 7, so my solution was to ( npm uninstall --save-dev rollup-plugin-async and) rollback use of async/await in favor of ES6 Promises throughout my codebase.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM