Question

我是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表达式？
我可以定义在编译时运行的函数吗？

Answer 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可以在构建时生成源代码。

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

1 个答案: