javascript - Webpack + Symfony encore - 如何添加库

Question

我在使用 webback 和 encore 方面还很陌生，所以我不知道究竟是哪种方法来处理这个问题。

我有一个包含一些 js 文件的网站，它使用 jQuery 和 Bootstrap。我想使用 webpack 创建一个独特的缩小 js 文件。

我已经能够按照 Symfony 网站上的示例成功地做到这一点，所以我能够只包含一个 app.js 并 encore 正确构建依赖项。

有一些 javascript 库未在我的 app.js 中使用，但会在网站内嵌的一些 javascript 代码中使用，例如 PhotoSwipe。

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

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

那么，我怎样才能告诉 encore 将这个库添加到构建的 app.js 中，而不必将它添加到我的 main.js 中？

我绑定(bind)添加到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>