webpack，如何管理依赖项答案

【问题标题】：webpack, how to manage dependencieswebpack，如何管理依赖项
【发布时间】：2016-03-03 15:46:47
【问题描述】：

我有一个名为 gridstack 的模块，它使用以下内容：

(function(factory) {
    if (typeof define === 'function' && define.amd) {
        define(['jquery', 'lodash', 'jquery-ui/core', 'jquery-ui/widget', 'jquery-ui/mouse', 'jquery-ui/draggable',
            'jquery-ui/resizable'], factory);
    }

但是无法解析jquery-ui的依赖，如何在webpack中进行管理？

如果我不使用 webpack，我会这样做：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/3.10.1/lodash.min.js"> </script>
<script type="text/javascript" src="gridstack.js/dist/gridstack.js"> </script>

【问题讨论】：

标签： javascript dependencies webpack

【解决方案1】：

在我的研究中，我看到 require('somefile.js') js 函数用于添加 webpack 将解析的依赖项。

【讨论】：

【解决方案2】：

要使用 webpack 和 npm 解决此问题，请执行以下操作：

使用npm安装包

npm install jquery-ui lodash gridstack --save-dev

在webpack.config.js中创建一个别名

alias: {
            "lodash": "node_modules/lodash",
            "jquery-ui": "node_modules/jquery-ui",
            "gridstack": "node_modules/gridstack"
        }

需要您的 javascript/typescript/whatever 文件中的模块

require('lodash');
require('jquery-ui');
require('gridstack');

为了让 webpack 识别你的包中包含哪些文件，你必须要求它们。配置文件中的别名确保 webpack 知道在哪里实际找到您尝试包含的文件。在您的 html 文件中包含 .js 文件不起作用，尤其是当您尝试组合这两种方法时（包括在 html 和通过 webpack em>）。这是因为当它们有依赖关系时，它们不能相互引用。

【讨论】：