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.
Related
I am running a React web app inside React Native via WebView.
The website uses Object.fromEntries which doesn't appear to be available to the browswer on the device I am using and causes my webapp to crash (with no error) when I try call Object.fromEntries.
The device is running Android 8.1.0 so I assume it will be using an older Android browser that doesn't support Object.fromEntries.
In my web app babel config I am trying to target Android 8.0 but the app still crashes when Object.fromEntries gets called.
{
"presets": [
[
"#babel/preset-env",
{
"loose": true,
"modules": false,
"shippedProposals": true,
"targets": {
"Android": "8.0",
"browsers": ["last 2 version"]
}
}
],
[
"#babel/preset-react",
{
"useBuiltIns": true,
"pragma": "React.createElement"
}
],
"#babel/preset-typescript"
],
"plugins": [
[
"#babel/plugin-proposal-class-properties",
{
"loose": true
}
],
"#babel/plugin-syntax-dynamic-import",
"babel-plugin-macros",
[
"#babel/plugin-transform-runtime",
{
"helpers": true,
"regenerator": true
}
]
]
}
Is there something else I need to include in the babel config or perhaps something that overrides it (i.e. Typescript)?
I had a similar issue when loading a webpage in an Android 8 Chrome browser. These two changes helped fix it for me:
1. Manually adding polyfills
https://github.com/es-shims/Object.fromEntries
https://github.com/facebook/create-react-app/tree/main/packages/react-app-polyfill
Add your dependencies
yarn add react-app-polyfill
yarn add object.fromentries
Then, at the root of your app (index.js), add these two imports:
import 'react-app-polyfill/stable';
import fromEntries from 'object.fromentries';
fromEntries.shim(); // will be a no-op if not needed
2. Changing the build target
I'm using create-react-app and not directly configuring babel so this may be different for you, but I changed my browserslist setting to
">0.2%",
"not dead",
"not op_mini all"
(This may not be required at all)
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 was trying to convert my react project into an electron-app. As
the project is bundled via webpack, I began using electron-webpack for
the build. When running electron-webpack dev, neither the /main nor the /renderer compiles correctly.
Console logs throw Decorator plugin error
The decorators plugin requires a 'decoratorsBeforeExport' option,
whose value must be a boolean. If you want to use the
legacy decorators semantics, you can set the 'legacy: true' option
Sooo, why not following that wise suggestion?. Then, I updated all my dependencies and update my .babelrc file, for adding the decoratorsBeforeExport and the legacy option (false and true respectively)
"plugins": [
["#babel/plugin-proposal-decorators", {
"decoratorsBeforeExport": false,
"legacy": true,
}],
As the Error still showing after that, I open the plugin-proposal-decoratorsfolder from _/node_modules_ and added a log for the options. Apparently, it does not identify my options set. I tried
directly from the webpack loader config, but the problem still showing.
My env
Node: v11.2.0
Webpack: v4.29.0
#babel/core: v7.0.0
This .babelrc worked for me:
{
"presets": [
"#babel/preset-react",
[ "#babel/preset-env", {
"targets": {
"browsers": [ "last 1 version" ]
}
} ]
],
"plugins": [
"#babel/plugin-proposal-object-rest-spread",
["#babel/plugin-proposal-decorators", { "legacy": true }],
["#babel/plugin-proposal-class-properties", { "loose" : true }]
]
}
Mind how decorators plugin comes before class-properties.
Somehow, it didn't work for me in non-legacy mode. loose option is required if decorators runs in legacy mode, according to official docs: https://babeljs.io/docs/en/next/babel-plugin-proposal-decorators.html
It also states:
In Babel 7, transform-decorators-legacy will be the default plugin in Stage-0.
(Source: https://babeljs.io/docs/en/babel-plugin-transform-decorators.html)
More info:
Babel 7 - Decorators transform doesn't work with babel-loader
Simple ES7 decorator with babel
I'm trying to add react to a very large solution, but one component on the site uses preact. My current .bablerc is
{
"presets": ["env"],
"ignore": [
"**/what-input.js",
"**/HostedPCIAdapter.js",
"InstantPreview/**/*.js",
"Wishlist/**/*.js"
],
"plugins": [
"transform-object-rest-spread",
"transform-react-jsx"
]
}
Original .baberc looked like this:
{
"sourceMaps": true,
"presets": [],
"plugins": [
[
"transform-react-jsx",
{
"pragma": "preact.h"
}
],
"transform-object-assign",
[
"transform-es2015-classes",
{
"loose": true
}
],
"transform-es2015-arrow-functions",
"transform-es2015-block-scoping",
"transform-es2015-template-literals"
]
}
So can I add pragma back for just the wishlist feature? Any help would be appreciated. I'm using gulp as a taskrunner and webpack to build my assets.
Babel files can be nested in sub-directories with unique settings which is pretty cool stuff.
So if you have a folder structure like this:
app
reactCode
.babelrc
index.js
preactCode
.babelrc
index.js
You can add a separate .babelrc file for branch.
I don't think it's ideal but if you're working with a large monolithic solution that has lots of different frameworks and requirements it certainly can fix a lot of bugs and QA work.
In Atom 1.18 every time I open the editor my .babelrc file defaults to the JSON file type, which makes syntax highlighting look way off. And I have to keep changing it back to the Babel type.
How to fix (temporarily):
Have to reset it every time I close and open the .babelrc file.
Now I realize this is a file that will be rarely touched, but would be helpful to know how to fix this for other file type.
There is a very specific way to set this up in the config.cson
https://discuss.atom.io/t/how-do-i-make-atom-recognize-a-file-with-extension-x-as-language-y/26539
http://flight-manual.atom.io/using-atom/sections/basic-customization/#configuring-with-cson
"*":
core:
customFileTypes:
"source.js.jsx": [
"js"
"es6"
"es"
"babel"
"babelrc"
"jsx"
]
The way I removed these errors was to just make the file JSON compatible.
Not the perfect solution but works.
//.babelrc
{
"plugins": [
"transform-class-properties"
],
"presets": [
["es2015", { "modules": false}],
"react",
],
}