Vue-cli-3: Add babel transpile and minify/obfuscate
1
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
}
javascript vuejs2 webpack-4 vue-cli-3
asked Nov 16 '18 at 0:19
user616user616
76316
add a comment |
1
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
}
javascript vuejs2 webpack-4 vue-cli-3
asked Nov 16 '18 at 0:19
user616user616
76316
Yes there is my friend. cli.vuejs.org/guide/browser-compatibility.html#polyfills cli.vuejs.org/guide/browser-compatibility.html#browserslist
– Y. Gherbi
Nov 16 '18 at 0: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 0:26
It's all explained in the readme of the browserlist repo github.com/browserslist/browserslist/blob/master/README.md
– Y. Gherbi
Nov 16 '18 at 0:29
stackoverflow.com/questions/47754244/…
– samayo
Nov 16 '18 at 0:32
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct?
– user616
Nov 16 '18 at 0:47
add a comment |
1
1
1
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
}
javascript vuejs2 webpack-4 vue-cli-3
asked Nov 16 '18 at 0:19
user616user616
76316
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
}
javascript vuejs2 webpack-4 vue-cli-3
javascript vuejs2 webpack-4 vue-cli-3
asked Nov 16 '18 at 0:19
user616user616
76316
asked Nov 16 '18 at 0:19
user616user616
76316
edited Nov 16 '18 at 0:29
user616
asked Nov 16 '18 at 0:19
user616user616
76316
asked Nov 16 '18 at 0:19
user616user616
76316
asked Nov 16 '18 at 0:19
user616user616
76316
76316
Yes there is my friend. cli.vuejs.org/guide/browser-compatibility.html#polyfills cli.vuejs.org/guide/browser-compatibility.html#browserslist
– Y. Gherbi
Nov 16 '18 at 0: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 0:26
It's all explained in the readme of the browserlist repo github.com/browserslist/browserslist/blob/master/README.md
– Y. Gherbi
Nov 16 '18 at 0:29
stackoverflow.com/questions/47754244/…
– samayo
Nov 16 '18 at 0:32
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct?
– user616
Nov 16 '18 at 0:47
add a comment |
Yes there is my friend. cli.vuejs.org/guide/browser-compatibility.html#polyfills cli.vuejs.org/guide/browser-compatibility.html#browserslist
– Y. Gherbi
Nov 16 '18 at 0: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 0:26
It's all explained in the readme of the browserlist repo github.com/browserslist/browserslist/blob/master/README.md
– Y. Gherbi
Nov 16 '18 at 0:29
stackoverflow.com/questions/47754244/…
– samayo
Nov 16 '18 at 0:32
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct?
– user616
Nov 16 '18 at 0:47
Yes there is my friend. cli.vuejs.org/guide/browser-compatibility.html#polyfills cli.vuejs.org/guide/browser-compatibility.html#browserslist
– Y. Gherbi
Nov 16 '18 at 0:22
Yes there is my friend. cli.vuejs.org/guide/browser-compatibility.html#polyfills cli.vuejs.org/guide/browser-compatibility.html#browserslist
– Y. Gherbi
Nov 16 '18 at 0: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 0:26
@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 0:26
It's all explained in the readme of the browserlist repo github.com/browserslist/browserslist/blob/master/README.md
– Y. Gherbi
Nov 16 '18 at 0:29
It's all explained in the readme of the browserlist repo github.com/browserslist/browserslist/blob/master/README.md
– Y. Gherbi
Nov 16 '18 at 0:29
stackoverflow.com/questions/47754244/…
– samayo
Nov 16 '18 at 0:32
stackoverflow.com/questions/47754244/…
– samayo
Nov 16 '18 at 0:32
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct?
– user616
Nov 16 '18 at 0:47
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct?
– user616
Nov 16 '18 at 0:47
add a comment |
1 Answer
1
active
oldest
votes
0
Add this to your package.json
"browserslist": [
"IE 11"
],
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
Build fails because i have.browserslistrcin 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 0: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 0:49
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329684%2fvue-cli-3-add-babel-transpile-and-minify-obfuscate%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
0
Add this to your package.json
"browserslist": [
"IE 11"
],
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
Build fails because i have.browserslistrcin 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 0: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 0:49
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
add a comment |
0
Add this to your package.json
"browserslist": [
"IE 11"
],
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
Build fails because i have.browserslistrcin 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 0: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 0:49
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
add a comment |
0
0
0
Add this to your package.json
"browserslist": [
"IE 11"
],
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
Add this to your package.json
"browserslist": [
"IE 11"
],
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
answered Nov 16 '18 at 0:33
Y. GherbiY. Gherbi
25728
25728
Build fails because i have.browserslistrcin 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 0: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 0:49
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
add a comment |
Build fails because i have.browserslistrcin 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 0: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 0:49
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
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 0:44
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 0: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 0:49
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 0:49
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
Yes i am running npm run build
– user616
Nov 16 '18 at 0:50
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329684%2fvue-cli-3-add-babel-transpile-and-minify-obfuscate%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Yes there is my friend. cli.vuejs.org/guide/browser-compatibility.html#polyfills cli.vuejs.org/guide/browser-compatibility.html#browserslist
– Y. Gherbi
Nov 16 '18 at 0: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 0:26
It's all explained in the readme of the browserlist repo github.com/browserslist/browserslist/blob/master/README.md
– Y. Gherbi
Nov 16 '18 at 0:29
stackoverflow.com/questions/47754244/…
– samayo
Nov 16 '18 at 0:32
@samayo From my understanding webpack3 and webpack4 configuration files are not the same correct?
– user616
Nov 16 '18 at 0:47