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.
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 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%"
} ]
]
}
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 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.