What does babel do while webpack is working? - javascript

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.

Related

Can you use custom typescript compiler with #typescript-eslint?

Basically, I have a webpack, package.json, tsconfig.json configs with, but it doesn't lint typescript files, for that you need #typescript-eslint package which can't configure custom compiler, are there any workarounds around this?
In my webpack config i use ts-loader and a eslint-webpack-plugin.

Using Babel 7.10 to compile to module js files without imports

tl;dr: How to use babel 7.10 as a complete beginner for frontend js files in a fullstack node app?
I am trying to use the newest version of Babel (7.10.5) to compile the JS files of my website and this is my first time using Babel. Since the documentation of babel doesn't seem to be fully updated or because I'm too dumb to get it.
I only produce JS files with either "require", which the browser doesn't understand, or with some "import" of some babel file that the browser doesn't see.
I have no clue what I should be doing, I have tried with a babel.config.json file as well as a .babelrc file. I installed and uninstalled all kinds of packages and plugins and whatever, but nothing seemed to work.
I don't care about module size or anything advanced, I just want my simple website written with es6 to work in all browsers, to use es5 basically. I know that I need #babel/cli #babel/core and #babel/preset-env and that I need some kind of config file and then I wanna run it via the command line. What's the easiest way to do this?
As a side note, I am not using any framework, just plain old vanilla JavaScript
Sorry if this question is super dumb or if it's badly asked. I can't show any code, because I don't
1, install dependencies:
npm i #babel/cli #babel/core #babel/preset-env
2, add .babelrc:
{
"presets": [
"#babel/preset-env"
]
}
3, edit package.json, in this example, make sure all your source files in "src" dir
//package.json
{
"scripts": {
"build": "babel src --out-dir dist"
},
4, run script, generated files will be in "dist" dir
npm run build

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.

Are babel and uglify.js installed when we install 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. The question is Does webpack 4 use uglify.js and babel behind the scenes even if I do not install them manually?
Webpack doesn’t know how to make the transformation, so you would need to install babel dependencies. Also for uglify.js, you would need to install the plugin. see the links I posted below.
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/
https://webpack.js.org/plugins/uglifyjs-webpack-plugin/

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?

Categories

Resources