我有一个名为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中管理它?
如果我不使用网络包,我会这样做:
<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>
答案 0 :(得分:1)
在我的研究中,我看到require(&#39; somefile.js&#39;)js函数用于添加webpack将解析的依赖项。
答案 1 :(得分:1)
要使用 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 /无论文件中的模块
require('lodash');
require('jquery-ui');
require('gridstack');
为了让 webpack 能够识别捆绑包中包含哪些文件,您必须要求它们。配置文件中的别名可确保 webpack 知道在哪里实际找到您尝试包含的文件。在 html 文件中包含.js文件不起作用,尤其是当您尝试组合这两种方法时(包括 html 并包括 webpack )。这是因为当它们具有依赖关系时,它们无法引用彼此。