admin管理员组

文章数量:1292612

I have a Vue.js Application with the following excerpt of code:

(function() {
    initApp();
})();

function initApp() {
    window.myApp = new Vue({
        el: '#wrapper',
        data() {
		return {
		somedata: []
            }
        }
    });
}

<script src=".5.16/vue.min.js"></script>

I have a Vue.js Application with the following excerpt of code:

(function() {
    initApp();
})();

function initApp() {
    window.myApp = new Vue({
        el: '#wrapper',
        data() {
		return {
		somedata: []
            }
        }
    });
}

<script src="https://cdnjs.cloudflare./ajax/libs/vue/2.5.16/vue.min.js"></script>

When I try to minify it, it fails with the error Error : Unexpected token: punc (() but the application runs successfully. I'm not sure why?

• javascript
• vue.js
• minify

Share Improve this question Follow edited Feb 11, 2019 at 17:34 Pierce O'Neill 3831010 silver badges2424 bronze badges asked Apr 8, 2018 at 20:53 Asa CarterAsa Carter 2,22555 gold badges3636 silver badges6464 bronze badges 9

• Which minifier are you using? Can you provide a minimal reproducible example? – Emile Bergeron Commented Apr 8, 2018 at 20:54
• 1 I've tried using the jspress. and javascript-minifier. online tools. I will attempt to create a minimal example. – Asa Carter Commented Apr 8, 2018 at 20:56
• I highly remend automating these kinds of task with a node tasks runner like Gulp, Grunt or Webpack for even much more features and use a minifier like UglifyJS2. – Emile Bergeron Commented Apr 8, 2018 at 20:58
• 1 I've updated the example to be a little more plete. Yep, I just do it manually at the moment but releases are not very frequent. – Asa Carter Commented Apr 8, 2018 at 21:08
• 2 I truly am Happy that did the trick But I have no idea I just searched for vuejs minifier on google :D – user8517929 Commented Apr 8, 2018 at 21:23

 |  Show 4 more ments

3 Answers 3

Sorted by: Reset to default 6

Those pressors simply only support an old version of JavaScript. Their support is restricted to at most ES5. To make your code work, convert it:

(function() {
    initApp();
})();

function initApp() {
    window.myApp = new Vue({
        el: '#wrapper',
        data: function() { // changed this line
            return {
                somedata: []
            }
        }
    });
}

And it should press.

Details:

They use uglify-js: "^3.3.10", that is known for not supporting ES6(uglify-es does) .

From their repo (emphasis mine):

UglifyJS 3

UglifyJS is a JavaScript parser, minifier, pressor and beautifier toolkit.

Note:

• (...)
• uglify-js only supports JavaScript (ECMAScript 5).
• To minify ECMAScript 2015 or above, transpile using tools like Babel.

Your pressor isn’t ES6 pliant

You’re getting that error because, like pacdcjunior's said, your pressor isn’t ES6 pliant. (I got your same error when I switched from jQuery to Vue.js—using ES6 syntax.)

Solution: Use Terser instead.

It’s ES6 pliant, in active development (at the time of writing), and is a direct replacement for Uglifyjs.

Bonus: How to minify lots of files in one pass with Terser

You can minify a single file in Terser from the mand line like this:

$ terser file.js -m -o file.min.js

But if you have a load of files to minify in one go, that will be tedious. I found this excellent answer and modified it just a little. Add this to your .bash_profile:

alias renderjs='rm *.min.js; for f in *.js; do short=${f%.js}; terser $f -m -o $short.min.js; done'

Navigate to your js directory and run renderjs. Now all your *.js files have a minified version. Nice!

Do you mean the piled js file (app.js)? If that case you just pile for production "npm run production".

本文标签： javascriptUnable to minify Vuejs applicationStack Overflow