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.
Related
If I have a browserslist config, how can I check if a given JS file would work with the browsers specified in the config? I tried running Babel on it to see if it changes, but Babel always changes too much to be able to tell.
The parameters specified in your browserlist config should be honored by babel. If you'd like to test your configuration on a single file to ensure your browserlist config is visible to babel, you can use #babel/cli to execute a test run and check the results.
npm install --save-dev #babel/core #babel/cli
Then run the following command:
npx babel someFile.js --out-file script-compiled.js
That'll make it easy for you to poke around. Try some array methods like Array.from and Array.includes.
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/
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?
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.
I am trying to use UglifyJS to minimize/compress my bundle.js file. When I run webpack -p, I am getting the following:
ERROR in bundle.js from UglifyJs
Name expected [bundle.js:105519,6]
Line 105519 is as follows:
const {M, l, pattern} = __webpack_require__(862).
I am using React w/ ES6. Any thoughts as to what is wrong?
Every version of Webpack has a built-in version of UglifyJS (0.4.6) which doesn't support ES6. This version supports ES5 syntax only.
There are two possible solutions:
Make transpiler target es5
Don't use the built-in version of uglifyjs-webpack-plugin and install the latest version using npm install -D uglifyjs-webpack-plugin. Add it to your plugins property in your configuration:
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
module.exports = {
plugins: [
new UglifyJSPlugin()
]
}
Definitely an issue with the version of uglifyjs and the javascript target you are trying to compile to. It could be 2 things, your webpack setup and your babel setup causing this.
If you are using the latest version of webpack v3.5.5 it comes with uglifyjs-webpack-plugin ^0.4.6 which doesn't support a target of es6 or above.
Referring to the current Webpack docs about UglifyjsWebpackPlugin options it covers how to use the latest beta version of uglify-js-webpack-plugin v1.0.0-beta.2. But isnt that clear on how to install that version.
To use it with the Webpack do
yarn add uglifyjs-webpack-plugin#beta --dev
As you don't mention what your Babel setup is. You might be or want to use babel-preset-env as your preset. There is an option for uglifyjs.
Be great to see a repo or a Gist.
This error comes when uglifyjs-webpack-plugin is not able to Uglify particular dependency
So, How to find library that creates such error ?
I was using react , so i deleted all forms in my app and kept just 1 form and imported all dependencies in it, and remove/add those dependencies one by one
and run command
webpack -p
SO In My case it was browser-history creating such error .Now you can report this issue to that library's author with some replicating example
working Package.json & .babelrc