Browserify和Vue：未捕獲的參考錯誤：未定義Vue

Question

這是我對基本jQuery之外的任何前端開發的首次嘗試，並且我正在將Vue.js以及其他一些帶有Browserify的軟件包一起使用。 我的主要“ app.js”如下所示：

window.$ = window.jQuery = require('jquery');
require('bootstrap');
var moment = require('moment');
var fullCalendar = require('./vendor/fullcalendar.min.js');
var datetimepicker = require('./vendor/bootstrap-datetimepicker.min.js');
var select2 = require('./vendor/select2.min.js');
var VueResource = require('vue-resource');
var Vue = require('vue');
require('./videos/show.js');
require('./home.js');
require('./search.js');

Vue.use(VueResource);

new Vue({
    el: '#search',

    data: {
        message: 'Hello World!'
    },

});

...

它可以按預期方式工作，但是當我嘗試在另一個文件（例如，在search.js中）中創建新的Vue實例時，我無法做到。 我在控制台中收到“未捕獲的參考錯誤：未定義Vue”。 在其他地方使用其他必需的程序包沒有問題-盡管我不明白為什么我需要以我的方式導入jQuery ...如果我這樣做將無法正常工作：

var $, jQuery = require('jquery');

我確信這是我尚不了解的非常基本的內容，但是任何幫助將不勝感激！

Answer 1

您遇到的問題是使用模塊的基礎。 通常，模塊應始終導出某些行為或屬性，然后您需要該模塊並使用它。 例如，假設我想在某些頁面的表單中添加隱藏內容。 我會這樣做：

AddSecretToken.js

module.exports = function(form) {
  // code here to add the hidden input to the passed in form
}

然后在其他地方，我有一個需要秘密輸入的表格，我會要求它：

MyForm.js

var addSecretToken = require('./AddSecretToken');

...
// some code that makes a form
addSecretToken(myForm);
...

顯然，在某些時候，您需要一些可以實際運行某些代碼的代碼，但這將是您的根模塊或需要該根模塊的頁面。 因此，也許您在頂部有一個app.js ，它需要它所需要的，然后運行app()而不導出任何內容。 那講得通。 但是大多數模塊都不應該這樣做。

每當您需要某種行為時，都應該創建一個模塊，然后在需要該行為的任何地方都需要該模塊。 每個模塊都應該要求它依賴什么-它不應該依賴任何全局變量（有時jQuery是一個例外）。