编译时 运行 的代码与 运行 时 运行 的代码
Code that run at compile-time vs code that run at runtime
我是 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
实现,它在您的代码中基本上作为 "find and replace" 操作。
只需像这样将其添加到您的 webpack 配置中:
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"',
})
]
}
这会将代码中出现的所有 process.env.NODE_ENV
替换为 "development"
。如果您将它与 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
可以在构建时生成源代码。
我是 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
实现,它在您的代码中基本上作为 "find and replace" 操作。
只需像这样将其添加到您的 webpack 配置中:
const webpack = require('webpack');
module.exports = {
...
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV': '"development"',
})
]
}
这会将代码中出现的所有 process.env.NODE_ENV
替换为 "development"
。如果您将它与 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
可以在构建时生成源代码。