Vue-cli-3: Add babel transpile and minify/obfuscate

Question

I am running a project created with vue-cli-3 which uses webpack4. I am new to all this and cannot for the life of me figure out how to have my code transpiled to ES5 code and have it minified/obfuscated. There seems to be absolutely zero documentation on this subject... Can someone help me out?? I want to transpile for IE11 and newer browsers.

package.json

{
  "name": "dashboard",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint",
    "test:e2e": "vue-cli-service test:e2e",
    "test:unit": "vue-cli-service test:unit"
  },
  "dependencies": {
    "papaparse": "^4.6.2",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1",
    "vuetify": "^1.3.0",
    "vuex": "^3.0.1"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.1.1",
    "@vue/cli-plugin-e2e-nightwatch": "^3.1.1",
    "@vue/cli-plugin-eslint": "^3.1.1",
    "@vue/cli-plugin-unit-jest": "^3.1.1",
    "@vue/cli-service": "^3.1.1",
    "@vue/eslint-config-prettier": "^4.0.0",
    "@vue/test-utils": "^1.0.0-beta.20",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "^10.0.1",
    "babel-jest": "^23.6.0",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0-0",
    "node-sass": "^4.9.0",
    "sass-loader": "^7.0.1",
    "stylus": "^0.54.5",
    "stylus-loader": "^3.0.1",
    "uglifyjs-webpack-plugin": "^2.0.1",
    "vue-cli-plugin-vuetify": "^0.4.5",
    "vue-template-compiler": "^2.5.17",
    "vuetify-loader": "^1.0.5"
  }
}

babel.config.js

module.exports = {
  presets: [
    '@vue/app'
  ]
}

vue.config.js

module.exports = {
  productionSourceMap: false
}

Yes there is my friend. https://cli.vuejs.org/guide/browser-compatibility.html#polyfills https://cli.vuejs.org/guide/browser-compatibility.html#browserslist — Y. Gherbi, Nov 16 '18 at 00:22
@Y.Gherbi Im not sure what im supposed to add to any of my config files.. or the browserlist for ie11 — user616, Nov 16 '18 at 00:26
It's all explained in the readme of the browserlist repo https://github.com/browserslist/browserslist/blob/master/README.md — Y. Gherbi, Nov 16 '18 at 00:29
https://stackoverflow.com/questions/47754244/how-to-create-and-publish-a-vuejs-component-on-npm/47757050#47757050 — samayo, Nov 16 '18 at 00:32
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct? — user616, Nov 16 '18 at 00:47
Same trouble, but reading those docs didn't help either ... still seeing ES6 classes and comments in code generated by webpack ... very annoying. according to browserslist IE11 is covered by default, but even adding IE11 explicitly doesn't cause transpilation of code. — Thomas Urban, Apr 08 '19 at 22:10

score 0 · Answer 1 · answered Nov 16 '18 at 00:33

0

Add this to your package.json

"browserslist": [ "IE 11" ],

answered Nov 16 '18 at 00:33

Y. Gherbi

890
8
22

Build fails because i have `.browserslistrc` in the same root directory. If i rename that file and add the setting to package.json then i still get ES6+ code. Its not working in IE11 code. I have some arrow functions and CONST/let variables still in my code – user616 Nov 16 '18 at 00:44
Are you running "npm run build"? You can also ass IE 11 to the browserslistrc file instad of in the package.json – Y. Gherbi Nov 16 '18 at 00:49
Yes i am running npm run build – user616 Nov 16 '18 at 00:50

Vue-cli-3: Add babel transpile and minify/obfuscate

1 Answers1