javascript - vue webpack-simple 模板和 Uncaught TypeError : (intermediate value) is not a function

Question

在 main.js 文件中创建 IIFE 方法时出现奇怪的错误。以下是重现它的步骤，请转到命令提示符

vue init webpack-simple test
cd test
npm install test
npm run dev

编辑main.js文件并在末尾添加此方法

(function test() {
  console.log('test');
})();

它将在控制台上抛出以下错误

Uncaught TypeError: (intermediate value) is not a function
    at eval (eval at <anonymous> (build.js:978), <anonymous>:13:3)
    at Object.<anonymous> (build.js:978)
    at __webpack_require__ (build.js:660)
    at fn (build.js:84)
    at Object.<anonymous> (build.js:1378)
    at __webpack_require__ (build.js:660)
    at build.js:709
    at build.js:712

如果我将 test 设为普通函数并像 test() 一样调用它，那么它不会抛出错误，为什么在创建 IIFE 时会出现问题？

Answer 1

问题是 Vue 模板不使用分号。所以你有这样的代码:

new Vue({
  el: '#app',
  render: h => h(App)
})

(function test() {
  console.log('test');
})();

但是空白是微不足道的，你真正拥有的是:

new Vue({
  el: '#app',
  render: h => h(App)
})(function test() {
  console.log('test');
})();

这相当于:

const vue = new Vue({
  el: '#app',
  render: h => h(App)
})

vue(function test() {
  console.log('test');
})();

这会给你以下错误:

Uncaught TypeError: vue is not a function

这正是您所拥有的，但是这次 vue 有一个名称而不是中间值。

这是省略分号时需要注意的情况之一。