I'm new to using Babel but have installed it according to the Installation guide here https://babeljs.io/setup#installation
It says at the end that you need to install plugins in order for it to work:
Now, out of the box Babel doesn't do anything ... You will need to add plugins for Babel to do anything.
I want to use this plugin: https://babeljs.io/docs/en/babel-plugin-transform-async-to-generator to fix some Internet Explorer 11 issues as described here: async function declaration expects ';' in Internet Explorer
I've created a file in the root of my project called babel.config.json
and added the following to it.
{
"plugins": ["@babel/plugin-transform-async-to-generator"]
}
My package.json
contains this:
"scripts": {
"build": "babel webroot/js -d webroot/js/babel"
},
"devDependencies": {
"babel-cli": "^6.0.0"
},
When I execute npm run build
from my project root it gives the following error messages.
Error: Cannot find module '@babel/plugin-transform-async-to-generator' from '/Users/andy/my-project'
Prior to creating babel.config.json
I was able to run npm run build
without getting any errors. As per the quote this doesn't really do anything other than output the same JavaScript as I had before transpiling it. But I knew that the process worked - in my case the input files are in webroot/js
and it outputs the equivalent transpiled files to webroot/js/babel
.
I don't understand how to fix this error. Is this some issue with my config file or is additional setup needed?
I've read the documentation on Babel Config Files at https://babeljs.io/docs/en/config-files and found this incredibly convoluted. My goal is to have a configuration file per project, which is why I opted for babel.config.json
npm version is 6.13.4, node version is 12.16.1.
babel-cli
is outdated, you should install @babel/cli
instead. It also has a peer dependency on @babel/core
which you need to install as well. @babel/plugin-transform-async-to-generator
plugin needs to be installed separately.
Summarizing:
babel-cli
:npm uninstall --save-dev babel-cli
npm install --save-dev @babel/cli @babel/core @babel/plugin-transform-async-to-generator
Regarding your problem with IE 11. @babel/plugin-transform-async-to-generator
won't fix your issue. IE 11 doesn't support yield
.
If you want to use the latest ECMAScript features and still support a wide range of browsers you should instead use @babel/preset-env
. You can check out the docs on the official website: @babel/preset-env
.
For async
to work in IE 11 you will also need to setup polyfills. @babel/preset-env
won't use them with default settings. Look under useBuiltIns
option for instructions.
Additionally, there's a problem with your build script, specifically with this line: babel webroot/js -d webroot/js/babel
.
With such a command babel will process whole webroot/js
directory (including subdirectories) and place transpiled files to webroot/js/babel
. This means that after you run this command again it will process not only your original source files but also transpiled source files because webroot/js/babel
is a subdirectory of webroot/js
.
I think you need to install @babel/plugin-transform-async-to-generator
. More here: https://www.npmjs.com/package/@babel/plugin-transform-async-to-generator#install
npm install --save-dev @babel/plugin-transform-async-to-generator
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.