WebPack, как управлять зависимостями

Question

У меня есть модуль, который называется 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> 

Answer 1

В моем исследовании, я видел, что функция требует («somefile.js») JS используется для добавления этой зависимости WebPack будет разрешаться.

Answer 2

Чтобы решить эту проблему, используя WebPack и НПМ, сделайте следующее:

Установка пакетов с помощью НПМ

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/машинописи/любой файл

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

Для того, чтобы WebPack распознать, какие файлы необходимо включить в пачке, вы должны требовать от них. Псевдоним в вашем файле конфигурации гарантирует, что webpack знает, где можно найти файлы, которые вы пытаетесь включить. Включение файлов .js в файл html не работает, особенно если вы пытаетесь объединить оба метода (в том числе в html и в том числе через webpack). Это связано с тем, что они не могут ссылаться на eachother, когда у них есть зависимости.