我是Vue和Webpack的新手.我最近使用vue-cli生成了一个静态Web应用程序,并且玩了一段时间.这是src / components / hello.vue中的一个片段:
export default {
name: 'hello',
data () {
return {
msg: process.env.NODE_ENV
}
}
}
我认识到表达式process.env.NODE_ENV是在编译时计算的.我的问题是
>如何判断表达式是在编译时还是在运行时(即在浏览器上)进行评估,因为它在任何一种情况下都是有效的javascript表达式?
>我可以定义在编译时运行的函数吗?
最佳答案 这可以通过
DefinePlugin
实现,它基本上可以作为代码中的“查找和替换”操作.
只需将其添加到您的webpack配置中,如下所示:
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"',
})
]
}
这将使用“development”替换代码中process.env.NODE_ENV的所有出现.如果将它与UglifyJsPlugin
结合使用,则需要从构建中删除生成的死代码:
// Original code
if (process.env.NODE_ENV === 'development') {
alert('development build');
} else {
alert('non-development build');
}
// After DefinePlugin
if ("development" === 'development') {
alert('development build');
} else {
alert('non-development build');
}
// After Uglify
alert('development build');
How can I tell if an expression is evaluated at compile-time or at runtime (i.e. on the browsers) since it is a valid javascript expression in either case?
传递给DefinePlugin构造函数的对象包含将在编译时转换的代码定义.
Can I define functions that run at compile-time?
我不这么认为,至少不是在构建的代码中(但你可以编写构建脚本的一部分的函数).它可能是Uglify可以做的优化,但它会非常激烈.
编辑:val-loader
可以在构建时生成源代码.