在编译时运行的代码与在运行时运行的代码答案

【问题标题】：Code that run at compile-time vs code that run at runtime在编译时运行的代码与在运行时运行的代码
【发布时间】：2017-12-16 08:29:37
【问题描述】：

我是 Vue 和 Webpack 的新手。我最近使用 vue-cli 生成了一个静态 Web 应用程序，并用它玩了一段时间。这是src/components/hello.vue中的一个sn-p：

export default {
  name: 'hello',
  data () {
    return {
      msg: process.env.NODE_ENV
    }
  }
}

我认识到表达式process.env.NODE_ENV 是在编译时计算的。我的问题是

我如何判断表达式是在编译时还是在运行时（即在浏览器上）计算的，因为它在任何一种情况下都是有效的 javascript 表达式？
我可以定义在编译时运行的函数吗？

【问题讨论】：

标签： webpack vue.js vue-cli

【解决方案1】：

DefinePlugin 使这成为可能，它本质上是代码中的“查找和替换”操作。

只需像这样将它添加到您的 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');

我如何判断一个表达式是在编译时还是在运行时（即在浏览器上）评估的，因为它在任何一种情况下都是有效的 javascript 表达式？

您传递给DefinePlugin 的构造函数的对象包含将在编译时翻译的代码定义。

我可以定义在编译时运行的函数吗？

我不这么认为，至少不在正在构建的代码中（但您可以编写作为构建脚本一部分的函数）。这可能是 Uglify 可以做的优化，但会非常激烈。

编辑：val-loader 可以在构建时生成源代码。

【讨论】：