Php 如何使用Symfony网页包Encore使jQuery在外部工作？_Php_Jquery_Webpack Encore_Symfony 4.3

Php 如何使用Symfony网页包Encore使jQuery在外部工作？

php jquery

Php 如何使用Symfony网页包Encore使jQuery在外部工作？,php,jquery,webpack-encore,symfony-4.3,Php,Jquery,Webpack Encore,Symfony 4.3,我正在跟随一个关于如何在法国网站GraphikArt上用Symfony创建一个网站的教程。我目前在“Symfony Encore”部分，当我需要jQuery在我的JS文件中，而jQuery在我的Twig文件中时，我无法让它工作我正在使用Symfony 4.3.3和纱线1.17.3。正如这家伙所展示的，我试图在我的webpack.config.js的末尾使用该部分使其在外部工作： var config = Encore.getWebpackConfig(); config.externals.

我正在跟随一个关于如何在法国网站GraphikArt上用Symfony创建一个网站的教程。我目前在“Symfony Encore”部分，当我需要jQuery在我的JS文件中，而jQuery在我的Twig文件中时，我无法让它工作

我正在使用Symfony 4.3.3和纱线1.17.3。正如这家伙所展示的，我试图在我的

webpack.config.js

的末尾使用该部分使其在外部工作：

var config = Encore.getWebpackConfig();

config.externals.jquery = 'jQuery';

module.exports = config;

我也尝试了一些在这个网站上找到的解决方案，但似乎没有任何效果

我当前的文件：

webpack.config.js

var Encore=require（'@symfony/webpack Encore'）；
//如果尚未通过“encore”命令配置，请手动配置运行时环境。
//当您使用依赖webpack.config.js文件的工具时，它非常有用。
如果（！Encore.isRuntimeEnvironmentConfigured（））{
Encore.configureRuntimeEnvironment（process.env.NODE|u env||'dev'）；
}
再来一个
//将存储已编译资产的目录
.setOutputPath（'public/build/'）
//web服务器用于访问输出路径的公共路径
.setPublicPath（“/build”）
//仅用于CDN或子目录部署
//.setManifestKeyPrefix（'build/'））
/*
*入口配置
*
*为应用程序的每个“页面”添加1个条目
*（包括每页包含的一个-例如“应用程序”）
*
*每个条目将产生一个JavaScript文件（例如app.js）
*和一个CSS文件（例如app.CSS），如果您的JavaScript导入CSS。
*/
.addEntry（'app'，'./assets/js/app.js'）
//.addEntry（'page1'，'。/assets/js/page1.js'）
//.addEntry（'page2'，'。/assets/js/page2.js'）
//启用后，Webpack会将文件“拆分”为更小的部分，以实现更大的优化。
.splitEntryChunks（）
//将需要runtime.js的额外脚本标记
//但是，你可能想要这个，除非你正在构建一个单页应用程序
.enableSingleRuntimeChunk（）
/*
*功能配置
*
*启用并配置以下其他功能。整整
*功能列表，请参见：
* https://symfony.com/doc/current/frontend.html#adding-更多功能
*/
.cleanupOutputBeforeBuild（）之前
.enableBuildNotifications（）
.enableSourceMaps（！Encore.isProduction（））
//启用哈希文件名（例如app.abc123.css）
.enableVersioning（Encore.isProduction（））
//启用@babel/预设环境多边形填充
.configureBabel（（）=>{
}, {
useBuiltIns:“用法”，
corejs:3
} )
//启用Sass/SCSS支持
.enablesASloader（）
//如果使用TypeScript，请取消注释
//.enableTypeScriptLoader（）
//取消注释以获取脚本和链接标记上的integrity=“…”属性
//需要WebpackenCombundle 1.4或更高版本
//.EnableIntegrityHash（Encore.isProduction（））
//如果jQuery插件出现问题，请取消注释
.autoProvidejQuery（）
//如果使用API平台管理（composer req API Admin），请取消注释
//.enableReactPreset（）
//.addEntry（'admin'，'。/assets/js/admin.js'）
;
var config=Encore.getWebpackConfig（）；
config.externals.jquery='jquery'；
module.exports=config；

app.js

/*
*欢迎使用应用程序的主JavaScript文件！
*
*我们建议包含此JavaScript文件的构建版本
*（及其CSS文件）在基本布局（base.html.twig）中。
*/
//您需要的任何CSS都将输出到单个CSS文件（本例中为app.CSS）
需要（'../css/app.css'）；
//需要jQuery吗？使用“添加jquery”安装它，然后取消注释以要求它。
var$=require（'jquery'）；
全局。$=global.jQuery=$；
要求（'select2'）；
log（'Hello Webpack Encore！Edit me in assets/js/app.js'）；

base.html.twig

JavaScript部分

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
        integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
        crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
        integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
        crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
        integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
        crossorigin="anonymous"></script>
{{ encore_entry_script_tags( 'app' ) }}

教程（以及在线解决方案）怎么可能适用于其他人而不适用于我

解决方案在

webpack.config.js

文件中，而不是：

var config=Encore.getWebpackConfig（）；
config.externals.jquery='jquery'；
module.exports=config；

在

.autoProvidejQuery（）

行之前，写下：

.addExternals(
{
jquery:'jquery'
}
)

此外，问题是我没有使用正确的命令行。使用

Thread encore dev

会出现此错误，因为您试图将类似jQuery的内容导入到由Webpack（

require（'jQuery'）

）处理的文件中，而实际上在

节点模块

文件夹中没有依赖项

为了解决此问题，您需要：

```
添加
```
（或
```
npm安装
```
）这些依赖项，并从您的网页包配置中删除
标记和
```
config.externals.jquery='jquery'
```
行（这将导致jquery绑定到您的JS文件中）
使用
```
Encore.addExternal（）
```
（一种更简洁的方式
```
config.externals.jquery='jquery'
```
）告诉Webpack jquery将在外部提供，不应捆绑

您之所以会出现此错误，是因为您试图将jQuery之类的内容导入到由Webpack（

require（'jQuery'）

）处理的文件中，而您的

节点模块

文件夹中实际上没有依赖项

为了解决此问题，您需要：

```
添加
```
（或
```
npm安装
```
）这些依赖项，并从您的网页包配置中删除
标记和
```
config.externals.jquery='jquery'
```
行（这将导致jquery绑定到您的JS文件中）
使用
```
Encore.addExternal（）
```
（一种更简洁的方式
```
config.externals.jquery='jquery'
```
）告诉Webpack jquery将在外部提供，不应捆绑

我也遇到过同样的情况，经过搜索，我发现上面提供了解决方案。为那些

Error: ./assets/js/app.js
Error: Can't resolve 'jquery' in 'C:\wamp\www\symfony4\assets\js'

Encore
.addExternals({
    jquery: 'jQuery'
})