I am using Vue CLI to create a Vue 2.0 project and one of the options is using Babel. I understand Babel is a transpiler but what exactly does it do? I created a project with it and another without it and I don't see the difference so what exactly is the pro/con of it ? I can't see offhand what it is doing.
You are correct. Babel is a transpiler. It transpiles your JavaScript code to one or more taget browsers, that does not support the lastest fetures. You will not see any difference, if using a newer browser.
Babal usually only makes sense if you need to support older browsers, like IE 11 or browsers from before 2017.
Related
I'm maintaining a library (MyLib) published on npm that is a vuejs plugin. When I started this library, vuejs was at major version 2.x.x. vuejs now has a new major version 3.x.x that changed how plugins work.
Both 2.x.x and 3.x.x versions of vuejs are supported and will be for a while longer. I want my plugin library (currently version 5.x.x) to be available and supported for both.
Options I've seen or considered so far:
Have 5.x.x as the last version that supports vuejs#2 and 6.x.x and above for vuejs#3.
Easy enough
Doesn't allow me to release a new version with breaking changes that supports vuejs#2 ever if I follow semver rules.
Create a version 6.x.x of my library that supports both versions of vuejs.
Potentially possible, depending on the specifics.
Makes my library bloated because it needs to support both versions of vuejs and have (flaky) runtime version detection to choose the right code path.
Publish a separate library (e.g. MyLib-v2) that supports vuejs#3. Can possibly use a scoped package, but that would force users of 5.x.x of my library to change their dependency name with very poor discoverability.
Not sure how to manage this in a single repo. Monorepo?
Clunky, higher overhead
Is there a better way, or at least a not-awful way of managing publishing my library in this seemingly common scenario?
Use vue-demi. It lets you publish for both vue2 and vue3 in the same project. When using vue2, you have will access to the composition api as well.
https://github.com/vueuse/vue-demi
From the read me:
Vue Demi (half in French) is a developing utility
allows you to write Universal Vue Libraries for Vue 2 & 3
I am trying to deploy a vue application. I have to use Firefox ESR as browser (45.4.0) but I get the following error: TypeError: Object.values is not a function. If I use a different browser it works fine.
Could anyone help me?
Thank you
Support for Object.values was introduced in Firefox 47.
Your browser is from 2015. That is hideously ancient in Internet terms. Upgrade it.
(If you really want to to get the Vue application to work, you'll need to set up a Polyfill for Object.values. There is one linked from the MDN page I linked to above. It should also be available in core-js which can be used with Babel in the transpiling step of your build process.)
I'm building an application with vue-cli and I see that webpack config is not explicitly defined in my repo. It's hidden from us (although it can be changed). Default run dev script by vue-cli also use vue-cli-service instead of webpack.
I'm a questionning myself about the consequence of this.
Are we losing control over the webpack config?
Does new version could modify the base hidden config without us knowing it ?
Are vue-cli taking too much space and break some decoupling principle (since it will be more difficult to change from webpack to another bundler for example) ?
Thanks in advance.
Regards
(English not my primary language, sorry)
No modern framework's CLI (including Vue) is going to operate not according to best practices.
You can read on how to work with Webpack in Vue here: Link.
New versions with breaking changes are documented like so: Link.
An application built on any framework will depend on that framework, regardless of CLI use. Configurations built from the CLI can always be changed manually.
Say I wanted to support IE11 (and sadly, I do), how would I go about making gatsby develop work on that poor old browser?
Right now, I get this message:
webpack-hot-middleware's client requires EventSource to work.
This polyfill looks promising, but that's as far as I've made it.
Any help?
P.S. Probably worth mentioning that I'm using Gatsby v 2.4.7
Looks like Gatsby doesn't support IE in development, only in production, so no polyfills will be added and IE will error when using gatsby develop.
https://www.gatsbyjs.org/packages/babel-preset-gatsby/
Can confirm on my project that running gatsby develop doesn't make it work for IE11, but using gatsby build does. When running gatsby develop, all I could see on IE11 is a blank page.
As per the documentation of Gatsby, You need to use babel 7.
Babel helps ensure the JavaScript you write works across different browsers (including older versions of Internet Explorer).
Reference:
Babel 7 (Gatsby)
Gatsby leverages Babel 7’s ability to automatically add polyfills for your target browsers.
Newer browsers support more JavaScript APIs than older browsers. For older versions, Gatsby (via Babel) automatically adds the minimum “polyfills” necessary for your code to work in those browsers.
If you start using a newer JavaScript API like [].includes that isn’t supported by some of your targeted browsers, you won’t have to worry about it breaking the older browsers as Babel will automatically add the needed polyfill core-js/modules/es7.array.includes.
Reference:
Browser Support
I'm writing an aurelia application with aurelia-fetch-client library.
When I try to post an object to my api service I get the error:
TypeMismatchError
In console only from Edge. Other browsers (Chrome, Firefox and IE11) have no problems. There are no description or any other details about it.
In all but the newest versions of Edge you need to include the fetch polyfill in order for aurelia-fetch-client to work. I think it's supported since version 14 but I wouldn't necessarily rely on it. Edge is known to be quirky with some of these things (the Promise implementation is also horribly slow, which is why I personally always use bluebird)
You can install it with npm i whatwg-fetch --save and make sure to import it + include it in your bundle config (the instructions for this depend on which build system you're using)