使用 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"
  }
}

请注意，该项目已经通过 jQuery 和 Bootstrap 作为捆绑包，然后在;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文档提到了import()和require.ensure(). 如何使用Webpack将isEmpty代码模块化然后使用？

Answer 1

Webpack 允许您使用Node.js 使用的commonJS方法进行依赖管理，因此如果您有使用 Node.js 的经验，那么它非常相似。如果没有，请查看有关模块系统的这篇文章或规范以获取模块系统的描述。

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

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

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

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

您可能需要对 $ 的依赖做一些事情（我猜是 jquery？），但我认为这可以通过shimming来处理

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

一些函数.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));