使用Webpack将JavaScript模块添加到ASP.NET MVC应用程序

我正在尝试使用Webpack在ASP.NET MVC 5 Visual Studio 2015项目中创build几个简单的模块。 遵循Webpack网站上的说明，我下载了最新版本的Node.js。 然后使用节点命令提示符，更改为我的项目的文件夹。 在那里，我运行这个命令来在本地安装Webpack：

npm install webpack --save-dev 

它在我的项目的根目录下创build了一个package.json文件：

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

请注意，该项目已通过BundleConfig.cs将jQuery和Bootstrap作为捆绑包进行捆绑，然后在_Layout.cshtml引用; 因此它们在应用程序的所有页面上都可用。

现在我想创build一个非常简单的testing，以了解如何使用Webpack创build和需要模块; 一旦我理解得更好，我可以添加更复杂的模块。 我一直在阅读代码拆分： 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文档提到import()和require.ensure() 。 如何使用Webpack模块化isEmpty代码然后使用它？

Answer 1

Webpack允许你使用commonJS方法来实现Node.js使用的依赖pipe理 ，所以如果你有使用Node.js的经验，那么它非常相似。 如果没有看看这篇文章的模块系统或者说明模块系统的说明。

对于这个问题，我将假定所有的文件都在同一个目录下。 我想你将需要首先将isEmpty代码移动到一个单独的文件，也许是isEmpty.js，并改变它的结构有点像这样：

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

那么你的testing函数可以被移动到一个单独的test.js文件中，你可以要求使用isEmpty模块，像这样使用它：

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

你可能不得不做一些关于$的依赖关系（我猜jQuery的？），但我认为这可以用填补处理

如果你有一些function，你可以这样做：

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));