Webpack + Symfony再次加入 - 如何添加庫

Question

我是使用webback和encore的新手，所以我不知道究竟是哪種方法來處理它。

我有一個帶有幾個js文件的網站，它使用jQuery和Bootstrap。 我想使用webpack創建一個獨特的縮小的js文件。

我已經能夠按照Symfony網站上的示例成功地做到這一點，所以我能夠只包含一個app.js和encore正確構建依賴項。

我的app.js中沒有使用一些javascript庫，但會在網站內嵌的一些javascript代碼中使用，例如PhotoSwipe。

目前，我需要在main.js文件中使用PhotoSwipe庫，盡管此文件不使用此庫。

// Resources/public/js/main.js
import PhotoSwipe from 'photoswipe';
import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default';

那么，我如何告訴安可將這個庫添加到構建的app.js中而不必將其添加到我的main.js中？

我已將其添加到webpack.config.json中

.addEntry('app', [
    './src/AppBundle/Resources/public/js/main.js',
    'photoswipe',
    'photoswipe/dist/photoswipe-ui-default'
])

如果我檢查生成的app.js，我可以看到代碼已添加到app.js，但是當我嘗試使用我的html代碼調用Photoswipe時，我得到錯誤Uncaught ReferenceError: PhotoSwipe is not defined

我猜這是因為庫被限制在js文件中，我應該添加某種導出才能訪問，我不知道，正如我所說的，我是非常新的;）

Answer 1

這就是我管理我的庫的方式：

// Resources/public/js/myCustomScript.js
const PhotoSwipe = require('photoswipe.js)';
const PhotoSwipeUI_Default = require ('photoswipe/dist/photoswipe-ui-default');
[...] // do PhotoSwipe stuff

僅在您的webpack.config.json ：

.addEntry('myCustomScript', './src/AppBundle/Resources/public/js/myCustomScript.js')

然后在需要此腳本的模板中：

<script type="text/javascript" src="{{ asset('build/myCustomScript.js') }}"></script>