jQuery Plugins and Legacy Applications

Inside Webpack, when you require a module, it does not (usually) set a global variable. Instead, it just returns a value:

Webpack 内では、モジュールが必要な場合、(通常) グローバル変数を設定しません。代わりに、値を返すだけです。
1
2
 
// this loads jquery, but does *not* set a global $ or jQuery variable
const $ = require('jquery');

In practice, this will cause problems with some outside libraries that rely on jQuery to be global or if your JavaScript isn't being processed through Webpack (e.g. you have some JavaScript in your templates) and you need jQuery. Both will cause similar errors:

実際には、これは、jQuery をグローバルに使用することに依存する一部の外部ライブラリで問題が発生するか、JavaScript が Webpack を介して処理されておらず (たとえば、テンプレートに JavaScript が含まれている)、jQuery が必要な場合に発生します。どちらも同様のエラーを引き起こします:
1
2
 
Uncaught ReferenceError: $ is not defined at [...]
Uncaught ReferenceError: jQuery is not defined at [...]

The fix depends on what code is causing the problem.

修正方法は、問題の原因となっているコードによって異なります。

Fixing jQuery Plugins that Expect jQuery to be Global

jQuery plugins often expect that jQuery is already available via the $ or jQuery global variables. To fix this, call autoProvidejQuery() from your webpack.config.js file:

jQuery プラグインは、多くの場合、$ orjQuery グローバル変数を介して jQuery が既に利用可能であることを期待しています。これを修正するには、webpack.config.js ファイルから autoProvidejQuery() を呼び出します。
1
2
3
4
5
 
// webpack.config.js
  Encore
      // ...
+     .autoProvidejQuery()
  ;

After restarting Encore, Webpack will look for all uninitialized $ and jQuery variables and automatically require jquery and set those variables for you. It "rewrites" the "bad" code to be correct.

Encore を再起動すると、Webpack は初期化されていないすべての $ 変数と jQuery 変数を探し、自動的に jquery を要求してそれらの変数を設定します。「悪い」コードを正しいものに「書き換え」ます。

Internally, this autoProvidejQuery() method calls the autoProvideVariables() method from Encore. In practice, it's equivalent to doing:

内部的に、この autoProvidejQuery() メソッドは Encore から autoProvideVariables() メソッドを呼び出します。実際には、次のことと同等です。
1
2
3
4
5
6
7
8
9
10
 
Encore
    // you can use this method to provide other common global variables,
    // such as '_' for the 'underscore' library
    .autoProvideVariables({
        $: 'jquery',
        jQuery: 'jquery',
        'window.jQuery': 'jquery',
    })
    // ...
;

Accessing jQuery from outside of Webpack JavaScript Files

If your code needs access to $ or jQuery and you are inside of a file that's processed by Webpack/Encore, you should remove any "$ is not defined" errors by requiring jQuery: var $ = require('jquery').

コードが $ または jQuery にアクセスする必要があり、Webpack/Encore によって処理されるファイル内にいる場合は、jQuery を要求して「$ is not defined」エラーを削除する必要があります: var $ = require('jquery')。

But if you also need to provide access to $ and jQuery variables outside of JavaScript files processed by Webpack (e.g. JavaScript that still lives in your templates), you need to manually set these as global variables in some JavaScript file that is loaded before your legacy code.

ただし、Webpack によって処理される JavaScript ファイルの外部にある $ および jQuery 変数へのアクセスも提供する必要がある場合 (たとえば、テンプレートにまだ存在する JavaScript)、レガシー コードの前にロードされる JavaScript ファイルでこれらをグローバル変数として手動で設定する必要があります。

For example, in your app.js file that's processed by Webpack and loaded on every page, add:

たとえば、Webpack によって処理され、すべてのページに読み込まれる app.js ファイルに、次を追加します。
1
2
3
4
5
6
7
 
// app.js

  // require jQuery normally
  const $ = require('jquery');

+ // create global $ and jQuery variables
+ global.$ = global.jQuery = $;

The global variable is a special way of setting things in the window variable. In a web context, using global and window are equivalent, except that window.jQuery won't work when using autoProvidejQuery(). In other words, use global.

グローバル変数は、window 変数に設定する特別な方法です。 Web コンテキストでは、autoProvidejQuery() を使用すると window.jQuery が機能しないことを除いて、global と window を使用することは同等です。つまり、global を使用します。

Additionally, be sure to set the script_attributes.defer option to false in your webpack_encore.yaml file:

さらに、webpack_encore.yaml ファイルで script_attributes.defer オプションを false に設定してください。
1
2
3
4
5
 
# config/packages/webpack_encore.yaml
webpack_encore:
    # ...
    script_attributes:
        defer: false

This will make sure there is not a defer attribute on your script tags. For more information, see Moving <script> inside <head> and the "defer" Attribute

これにより、scripttags に defer 属性がないことが確認されます。詳細については、Movinginside および「defer」属性を参照してください。