[英]Unable to minify Vue.js application
I have a Vue.js Application with the following excerpt of code: 我有一个Vue.js应用程序,其中包含以下代码摘录:
(function() { initApp(); })(); function initApp() { window.myApp = new Vue({ el: '#wrapper', data() { return { somedata: [] } } }); }
<script src="https://cdnjs.cloudflare.com/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? 当我尝试缩小它时,它失败并显示错误
Error : Unexpected token: punc (()
但应用程序运行成功。我不知道为什么?
Those compressors simply only support an old version of JavaScript. 那些压缩器只支持旧版本的JavaScript。 Their support is restricted to at most ES5.
他们的支持最多只限于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 compress. 它应该压缩。
They use uglify-js: "^3.3.10"
, that is known for not supporting ES6( uglify-es
does) . 他们使用
uglify-js: "^3.3.10"
,这是因为不支持ES6( uglify-es
) 。
From their repo (emphasis mine): 从他们的回购 (强调我的):
UglifyJS 3
UglifyJS 3
UglifyJS is a JavaScript parser, minifier, compressor and beautifier toolkit.
Note:UglifyJS是一个JavaScript解析器,minifier,压缩器和美化工具包。
注意:
You're getting that error because, like pacdcjunior's said , your compressor isn't ES6 compliant. 你得到的错误是因为,就像pacdcjunior所说 ,你的压缩机不符合ES6标准。 (I got your same error when I switched from jQuery to Vue.js—using ES6 syntax.)
(当我使用ES6语法从jQuery切换到Vue.js时,我得到了同样的错误。)
Solution: Use Terser instead. 解决方案:改用Terser 。
It's ES6 compliant, in active development (at the time of writing), and is a direct replacement for Uglifyjs . 它符合ES6标准,处于积极开发阶段(撰写本文时),是Uglifyjs的直接替代品 。
You can minify a single file in Terser from the command line like this: 您可以从命令行缩小Terser中的单个文件,如下所示:
$ terser file.js -m -o file.min.js
$
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:
将其添加到.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
. 导航到您的
js
目录并运行renderjs
。 Now all your *.js
files have a minified version. 现在, 所有
*.js
文件都有缩小版本。 Nice! 太好了!
Do you mean the compiled js file (app.js)? 你的意思是编译的js文件(app.js)? If that case you just compile for production "npm run production".
如果是这种情况,你只需编译生产“npm run production”。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.