使用Webpack將JavaScript模塊添加到ASP.NET MVC應用程序

我試圖使用Webpack在ASP.NET MVC 5 Visual Studio 2015項目中創建幾個簡單模塊。遵循Webpack網站上的說明，我下載了最新版本的Node.js.然後使用節點命令提示符，更改爲我的項目文件夾。在那裏，我跑這個命令來安裝的WebPack本地：使用Webpack將JavaScript模塊添加到ASP.NET MVC應用程序

{ 
    "devDependencies": { 
    "webpack": "^2.4.1" 
    } 
}

注意，該項目已擁有jQuery和引導的包：

npm install webpack --save-dev

它在我的項目的根目錄中創建一個文件的package.json通過BundleConfig.cs，然後參考_Layout.cshtml;因此它們在應用程序的所有頁面上都可用。

現在我想創建一個非常簡單的測試，以瞭解如何使用Webpack創建和需要模塊;一旦我理解得更好，我可以添加更復雜的模塊。我一直在閱讀關於代碼拆分：https://webpack.js.org/guides/code-splitting-async/，但它仍不清楚你如何做到這一點。

功能test需要功能isEmpty。我想將isEmpty定義爲模塊，然後與test一起使用。

var test = function(value){ 
    return isEmpty(value); 
}; 

var isEmpty = function(value) { 
    return $.trim(value).length === 0 ? true : false; 
};

本文已幫助：http://developer.telerik.com/featured/webpack-for-visual-studio-developers/

的Webpack documentation提到import()，也require.ensure()。如何使用Webpack將isEmpty代碼模塊化，然後使用它？

來源

2017-04-21 Alex

Webpack允許您使用commonJS方法來獲取Node.js使用的dependency management，所以如果您有使用Node.js的經驗，那麼它非常類似。如果沒有看看模塊系統上的這個article或spec以獲取模塊系統的描述。

對於這個問題，我將假設所有文件都在同一個目錄中。我想你需要先在的isEmpty代碼轉移到一個單獨的文件也許isEmpty.js，改變它的結構了一點，所以它看起來是這樣的：

module.exports = function(value) { 
    return $.trim(value).length === 0 ? true : false; 
};

那麼你的測試功能，可以移動到一個單獨的測試.js文件，你可以要求的isEmpty模塊，並使用它像這樣：

var isEmpty = require('./isEmpty'); 
var test = function(value){ 
    return isEmpty(value); 
};

你可能會做一些關於$的依賴（我猜的jQuery？），但我覺得可以處理與shimming

如果您有多個功能，你可以這樣做：

someFunctions.js

var self = {}; 

self.Double = function(value){ 
    return value*2; 
} 

self.Triple = function(value){ 
    return value*3; 
} 

module.exports = self;

useFunctions.js

var useFunctions = require('./someFunctions'); 
var num = 5; 
console.log(useFunctions.Double(num)); 
console.log(useFunctions.Triple(num));

來源

2017-04-22 12:53:36 Gun

謝謝，@Gun。後續工作：CommonJS可能在一個文件中包含一堆函數，並且需要/在另一個文件中使用它們，或者每個函數都必須駐留在它自己的文件中？ – Alex

已添加到原始答案 – Gun

謝謝@Gun。一個挑戰：我不斷收到錯誤'模塊名稱...尚未加載上下文：_。使用require（[]）'。 – Alex

使用Webpack將JavaScript模塊添加到ASP.NET MVC應用程序

回答

相關問題