I am trying to configure webpack/babel 7 to transpile to the most backwards compatible code possible. But I still see things like includes and find in my code.
.babelrc
{
"presets": [
["#babel/preset-env"]
],
}
How can I tell babel to do the most it can?
From https://babeljs.io/docs/en/babel-preset-env, we can use a browser list string or target browsers individually (see below for example).
{
"presets": [
["#babel/preset-env", {
"targets" : ">0.001%"
} ]
]
}
Related
I am new to Babel+Webpack and have some confusion regarding .babelrc configuration.
FIRST CONFIGURATION
{
"presets": [
[
"#babel/env",
{
"modules": false,
"useBuiltIns": "usage",
"targets": "> 0.25%, not dead",
"corejs": {
"version": 3,
"proposals": true
}
}
]
],
"plugins": [
"#babel/transform-runtime"
]
}
SECOND CONFIGURATION:
{
"presets": [
[
"#babel/env",
{
"modules": false,
}
]
],
"plugins": [
[
"#babel/plugin-transform-runtime", //target environment are not supported
{
"corejs": 3,
"helpers": true,
"regenerator": true
}
]
]
}
Facts that are true for second configuration's are:
Increased bundle size
Core-js-pure will include ponyfills that will not pollute global environment.
My question is we are going to export a "umd" library for public use with a Library Name "XYZ" and i am confused which of the above settings are suitable as one thing really confuse me is that if the bundle i.e created at the end is minified and built completely on esm pattern(use-strict mode) and for public use they can access like "XYZ.method()", then how the second configuration is suitable and it stop polluting global namespace.
Can anyone explain me with an example and help me clearing this concept?
For libraries Rollup is a much better option than WebPack.
This a good starting point.
https://github.com/rollup/rollup-starter-lib
If you must use webpack, avoid using regenerater, as it adds a lot of bloat to the output of Babel, if you code needs it, then the consuming app should include it, so you don’t end up having it twice in the end app
Ran into this myself, in the past. Honestly, Webpack is terrible with anything that exports more than a single default, which is why you see most libraries use Rollup or Parcel for bundling.
I am trying to enable support for IE 11 in my application. However, some of my dependencies haven't transpiled the code to es5. Therefor, I tried added one of them to my rules, but it still doesn't transpile that dependency.
This is how I am including my dependency, this time being vue2-google-maps. However the produced code still contains Object.entries after running npm run dev.
mix.webpackConfig({
module: {
rules: [
{
test: /node_modules\/(vue2-google-maps)\/.+\.js$/,
use: [
{
loader: 'babel-loader',
options: mix.config.babel()
}
]
}
]
}
});
mix.js('resources/js/app.js', 'public/js')
.extract()
.babel(['public/js/manifest.js'], 'public/js/manifest.es5.js')
.babel(['public/js/vendor.js'], 'public/js/vendor.es5.js')
.babel(['public/js/app.js'], 'public/js/app.es5.js')
Here is a similar question, but the answer didn't help me yet. Here is another similar question, but there is no answer in that one.
Here is my .babelrc:
{
"presets": [
[
"#babel/preset-env",
{
"targets": { "ie": "10" }
}
]
]
}
What am I doing wrong? Why is not the dependency also transpiled?
Inspect your config with: mix.dump();
b/c your rules and test look good (helpful & worked for me in different scenario).
I'd give a try to mix.babelConfig(<your config>) - seems to be more explicit to me
I'm using the latest ES8 features in my react code, for example, async and await. Because of misconfiguration problem in my webpack config, I cannot use source maps, and this slows down debugging.
A quick solution could be to locally compile source code into ES7 or ES8, and test in the latest Chrome. How can I set this in .babelrc? Here's my current .babelrc:
{
"presets": [
"react-app"
]
}
Answered here,
{
"presets": [
"react",
["env", {
"targets": {
"chrome": 67
}
}]
]
}
As of Jul 2018, the above setting would not support spread operator in objects. To enable it,
npm install --save-dev babel-plugin-transform-object-rest-spread
Use the following configuration in .babelrc:
{
"presets": [
"react",
["env", {
"targets": {
"chrome": 67
}
}]
],
"plugins": ["transform-object-rest-spread"]
}
I'm using babel 7.
In their docs they mention the new naming for plugin is with #babel/ prefix.
React-hot-loader babrlrc config recommendation is:
{
"plugins": ["react-hot-loader/babel"]
}
my .babelrc config is:
{
"presets": ["#babel/env", "#babel/react"],
"env": {
"development": {
"plugins": ["#babel/react-hot-loader"]
},
"production": {}
}
}
Is it correct to assume that #babel/react-hot-loader is correct definision?
I could not find any more docs about it.
Saying #babel/react-hot-loader will have babel look within itself for a plugin called react-hot-loader. From what I can tell the package/plugin you're trying to use is not maintained/owned by babel itself. Therefore #babel/react-hot-loader will not work. You should configure your .babelrc as per the documentation of the plugin you're trying to use.
I think this is the plugin you're referring to in your question: react-hot-loader
Follow these setup instructions: react-hot-loader/getting-started
you have to still use it as mentioned in react hot reloader docs. below is the link
https://github.com/gaearon/react-hot-loader#user-content-add-babel-before-typescript
I don't think so, react-hot-loader does not update there docs for prefix definition and I also found there given example
https://github.com/gaearon/react-hot-loader/blob/master/examples/typescript/.babelrc
Using babel 7 prefix for other plugins but for react-hot-loader still the same
{
"plugins": [
"#babel/plugin-syntax-typescript",
"#babel/plugin-syntax-decorators",
"#babel/plugin-syntax-jsx",
"react-hot-loader/babel"
]
}
I'm looking for a way to completely disable generator functions transform with babel. With babel 5 there was a blacklist option, but it seems that with babel 6 there is no way to do that (at least I did not find any documentation on the official website).
My current configuration
{
"presets": [
"react",
],
"plugins": [
"transform-object-rest-spread",
]
}
Disabling it like described here https://babeljs.io/docs/plugins/transform-regenerator/ did not help.
Any ideas?
Have you tried "exclude"? Like:
{
"presets": [
["env", {
"exclude": ["transform-regenerator"]
}]
]
}
Please see https://babeljs.io/docs/plugins/preset-env/#optionsexclude for details.