Develop Reference

What does babel do while webpack is working?

I find out that webpack is using #babel/core and #babel/preset-react and babel-loader via its package.json.
So I'm wondering what these built-in packages have done as webpack works?
p.s. I'm not talking about Loaders/Plugins that should be added manually to webpack.config.js.
Thanks a lot for your answer.

Is Babel and uglify.js included by default in Webpack 4

I was learning webpack and babel and majority of tutorials on YouTube teach to install webpack and babel separately. But I tried to install webpack only without installing babel( and uglify.js). So, I used webpack then it automatically uglified and changed my ES6 code into ES5 how is that possible?. The question is Does webpack 4 use uglify.js and babel behind the scenes even if I do not install them manually?

Webpack does not contain Babel or uglify by default. These are contained within the loaders. These are seperate npm packages you need to install used in the configuration.
this question can give you an idea of how these are configured:
In order to check yourself if a package contains another package you can easily make an empty folder and run one of the following:
npm install --save webpack#4
yarn add webpack#4
and then check the 'yarn.lock' or 'package-lock.json' file and search for the dependency.

How to make #babel/plugin-proposal-private-methods work in the vue.js webpack template?

I have an app based on a vue.js webpack template. I needed to use the syntax of private fields and private methods of classes. For this, I installed #babel/plugin-proposal-private-methods ^7.4.4 and #babel/core^7.0.0. After installing the packages, I tried to build a development version, but I got the following errors.
Webpack version is ^3.6.0, vue ^2.6.10, babel-core ^6.22.1, babel-preset-env ^1.3.2.
ERROR in ./assets/main.js
Module build failed: Error: Requires Babel "^7.0.0-0", but was loaded with "6.26.3". If you are sure you have a compatible version of #babel/core, it is likely that something in your build process is loading the wrong version. Inspect the stack trace of this error to look for the first entry that doesn't mention "#babel/core" or "babel-core" to see what is calling Babel.

It looks like you are loading #babel/core#7.X.X with babel 6.
In other words you are calling the core compiler of babel seven with the api of babel 6.
Releasing babel 7, the babel team went on a major revamp and it's great but not retro compatible.
Your template was probably working with babel 6 and you need some babel 7 plugin. So to sum ip up you'll have to:
upgrade all your babel dependencies (cli, core, plugins, presets ...)
update your babel config
replace the deprecated
probably upgrade your webpack babel loader or at least fix the webpack conf
I highly encourage you to read the official upgrading documentation:
https://babeljs.io/docs/en/v7-migration
You also might want to upgrade webpack.
cheers

Add the following to your nuxt.config.js file under the build section.
build: {
babel:{
plugins: [
['#babel/plugin-proposal-private-methods', { loose: true }]
]
}
}

Is babel-loader still required with webpack 4.7.x?

I wanted to understand if I need to add babel-loader, babel-core if my project has webpack version 4.7.0?
Initially I did not add babel-loader, and my code which contained ES6 compiled just fine and browsers got ES5.
If I do add babel-loader, I see the following warning in my npm or yarn tool install commands:
warning " > babel-loader#7.1.4" has unmet peer dependency "babel-core#6".
Hence I ask this question if I still need to add it as a devDependencies and configure it in the webpack configuration file to pre-process my .js files. I did not find documentation very clear about this.

Yes. It is still required as devDependency. You will need babel-loader, babel-core and babel-preset-env. Webpack 4 (or for that matter v4.7.0 which released today) essentially changes nothing.
As far as your webpack's behavior is concerned, it is rather strange. Can you share your config which I can replicate at my end?

package npm project written in flow

I have to publish a npm package that is written with Flow and compiled using babel.
What I did was I compiled all my source files. Then I copied compiled files from dist/ and put them into some other directory. I also put package.json there and edited it and then I published the package on npm.
I can then normally install project and require it my project. However when I run my project, it throws error that I need to require babel-core and babel-polyfills (install them as dev-dependencies). The problem is since my new project only requires my own package and does not use babel or something like that, so I see no point in requiring babel dependencies in my new project.
My question is, how can I package my library that is written with Flow and compiled by babel, so that I can then use this package in other places without requiring babel.

Did you add main and files into your package.json?
https://docs.npmjs.com/files/package.json#main
https://docs.npmjs.com/files/package.json#files
Your files should probably be
"files": [
"dist/**"
],
Also to prevent Users who install your package from needing to install the transpilers (i.e babel) add them into your devDependencies
Directly from the https://docs.npmjs.com/files/package.json#dependencies
Please do not put test harnesses or transpilers in your dependencies object. See devDependencies, below.
Also to add flow to your dist add https://github.com/AgentME/flow-copy-source
flow-copy-source -v src dist

The problem was in using incorrectly defined preset
In my babelrc I only had defined
preset: "env" without specifying that it needs to run on node 8 and higher, since the code used async.
Therefore i defined preset as:
preset: ["env", {
targets: {
"node": "8.9.1"
}
}
And the asnyc functions compiles correctly.
Also, thanks to #Kenneth I used flow-copy-source to add type to my library, so it can be seen in intelisense.