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

我试图在ASP.NET MVC 5 Visual Studio 2015项目中创建几个简单的模块。按照网页上的说明，我下载了Node.js的最新版本。然后使用Node命令提示符，更改为我的项目文件夹。在那里，我运行此命令在本地安装Webpack：

npm install webpack --save-dev

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

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

请注意，该项目已经通过

BundleConfig.cs

将jQuery和引导作为捆绑包，然后在

\u Layout.cshtml

中引用这些捆绑包；因此，它们可以在应用程序的所有页面上使用

现在我想创建一个非常简单的测试，看看如何使用Webpack创建和要求模块；一旦我更好地理解它，我就可以添加更复杂的模块。我一直在读关于代码拆分的文章：但仍然不清楚如何实现这一点

函数

测试

需要函数

为空

。我想将

isEmpty

定义为一个模块，然后将其与

test

一起使用

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

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

这篇文章有助于：

---

文件中提到了导入（）和require.sure（）。如何使用Webpack模块化

isEmpty

代码，然后使用它

Webpack允许您使用Node.js使用的方法，因此如果您有Node.js的使用经验，则非常类似。 如果没有，请查看模块系统或上的，以了解模块系统的说明

对于这个问题，我假设所有文件都在同一个目录中。我认为您需要首先将isEmpty代码移动到单独的文件（可能是isEmpty.js）中，并稍微更改其结构，使其看起来像这样：

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

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

然后，您的测试函数可以移动到一个单独的test.js文件中，您可以要求isEmpty模块并按如下方式使用它：

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

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

您可能需要对$的依赖性做些什么（我猜是jquery？），但我认为这可以用

如果您有许多功能，可以执行以下操作：

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

---

谢谢，枪。后续问题：CommonJS是否可能在一个文件中包含一组函数，并在另一个文件中需要/使用它们，或者每个函数都必须驻留在自己的文件中？添加到原始答案谢谢，@Gun。一个挑战：我不断得到错误

模块名。。。尚未加载上下文：\的。使用require（[]）

。您使用的是lodash还是下划线？如果是这样，您可能需要根据需要对其进行填隙well@Alex忽略lodash和下划线注释，我看到了。看起来像下划线语法。我认为这是由于webpack加载模块的异步方式造成的，错误似乎指向“模块名称…”。。。尚未加载'。看一看，因为我认为它有一个很好的例子，这可能会有所帮助