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

Question

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

npm install webpack --save-dev

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

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

请注意，该项目已经通过 BundleConfig.cs 将 jQuery 和 Bootstrap 作为 bundle ，然后在 _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代码模块化，然后使用呢？

Answer 1

Webpack 允许您使用 commonJS dependency management 的方法Node.js 使用的，所以如果你有 Node.js 的经验，它非常相似。 如果没有，看看这个 article在模块系统或 spec 上模块系统的描述。

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

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

然后你的测试函数可以移动到一个单独的 test.js 文件中，你可以 require 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;

使用函数.js

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