Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to ditch Babel from Vue build chain?

I'm developing a Vue app solely for Chrome, which leads me to believe (please correct me if wrong) that I can write native ES6 and don't need to transpile.

The Vue CLI generates a package.json like this:

  "devDependencies": {
    "babel-core": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babelify": "^7.2.0",
    "browserify": "^13.0.1",
    "browserify-hmr": "^0.3.1",
    "cross-env": "^1.0.6",
    "envify": "^3.4.1",
    "http-server": "^0.9.0",
    "npm-run-all": "^2.1.2",
    "uglify-js": "^2.5.0",
    "vueify": "^9.1.0",
    "watchify": "^3.4.0"
  },
  "browserify": {
    "transform": [
      "vueify",
      "babelify"
    ]
  }

But if I remove the 4 references to Babel, I get compile errors on my very first file. So really I just have two questions:

1) Am I correct in thinking that I can ditch Babel?
2) How do I do it?

like image 359
daninthemix Avatar asked Jan 06 '17 11:01

daninthemix


People also ask

Do I need Babel for Vue?

While vue loader helps transform vue components into plain JavaScript module. To configure webpack to use these loaders, we need to create two files namely, babel. config. js, and webpack.

Does Vue CLI use Babel?

Vue CLI uses babel. config. js which is a new config format in Babel 7.

How do I remove a plugin from Vue?

Under "Dependencies" (second tab on the left of vue ui) you'll find all plugins listed. And on the right of each plugin there is a little trash icon, which removes the respective plugin.

What is Babel for Vue?

Babel is a JavaScript compiler Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments.


1 Answers

I don't think browserify can handle ES6 imports without Babel. Usually, you could just get away with using something like gulp to uglify and minify without transpiling, because browserify is intended to allow require to be used in the browser, but if the browser supports import then you don't really need it. Unfortunately, this means that you won't be able to use vueify, so you lose the ability to use single file components, so I guess it's down to whether you think that trade-off is acceptable.

You may be interested in this discussion on GitHub: https://github.com/substack/node-browserify/issues/1186

like image 153
craig_h Avatar answered Oct 18 '22 18:10

craig_h