CODEWITHSUNDEEP
javascriptvue.jsbabeljs
daninthemix
daninthemix

Reputation: 2570

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?

Upvotes: 6

Views: 3068

Answers (1)

craig_h
craig_h

Reputation: 32724

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

Upvotes: 3

Related Questions