Question

我很擅长使用网络和再加，所以我不知道究竟是哪种方法来处理这个问题。

我有一个带有几个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中添加它？

我已将其添加到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>

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

1 个答案: