Installing Encore

First, make sure you install Node.js. Optionally you can also install the Yarn package manager. In the next sections you will always see the commands for both npm and yarn, but you only need to run one of them.

まず、Node.js をインストールしてください。オプションで、Yarn パッケージ マネージャーをインストールすることもできます。次のセクションでは、npm と yarn の両方のコマンドが常に表示されますが、実行する必要があるのはどちらか一方だけです。

The following instructions depend on whether you are installing Encore in a Symfony application or not.

次の手順は、Encore を Symfony アプリケーションにインストールするかどうかによって異なります。

Installing Encore in Symfony Applications

Run these commands to install both the PHP and JavaScript dependencies in your project:

次のコマンドを実行して、プロジェクトに PHP と JavaScript の両方の依存関係をインストールします。
1
2
3
4
5
6
7
 
$ composer require symfony/webpack-encore-bundle

# if you use the Yarn package manager
$ yarn install

# if you use the npm package manager
$ npm install

If you are using Symfony Flex, this will install and enable the WebpackEncoreBundle, create the assets/ directory, add a webpack.config.js file, and add node_modules/ to .gitignore. You can skip the rest of this article and go write your first JavaScript and CSS by reading Encore: Setting up your Project!

Symfony Flex を使用している場合、これにより WebpackEncoreBundle がインストールされて有効になり、assets/ ディレクトリが作成され、webpack.config.js ファイルが追加され、node_modules/ が .gitignore に追加されます。この記事の残りの部分をスキップして、Encore: プロジェクトの設定を読んで、最初の JavaScript と CSS を書き始めることができます。

If you are not using Symfony Flex, you'll need to create all these directories and files by yourself following the instructions shown in the next section.

Symfony Flex を使用していない場合は、次のセクションで説明する手順に従って、これらすべてのディレクトリとファイルを自分で作成する必要があります。

Installing Encore in non Symfony Applications

Install Encore into your project via Yarn:

Yarn 経由でプロジェクトに Encore をインストールします。
1
2
3
4
5
 
# if you use the Yarn package manager
$ yarn add @symfony/webpack-encore --dev

# if you use the npm package manager
$ npm install @symfony/webpack-encore --save-dev

This command creates (or modifies) a package.json file and downloads dependencies into a node_modules/ directory. Yarn also creates/updates a yarn.lock (called package-lock.json if you use npm).

このコマンドは、package.json ファイルを作成 (または変更) し、依存関係を node_modules/ ディレクトリにダウンロードします。 Yarn は、yarn.lock (npm を使用する場合は package-lock.json と呼ばれます) も作成/更新します。

Tip

ヒント

You should commit package.json and yarn.lock (or package-lock.json if using npm) to version control, but ignore node_modules/.

package.json と yarn.lock (または npm を使用する場合は package-lock.json) をバージョン管理にコミットする必要がありますが、node_modules/ は無視してください。

Creating the webpack.config.js File

Next, create a new webpack.config.js file at the root of your project. This is the main config file for both Webpack and Webpack Encore:

次に、プロジェクトのルートに新しい webpack.config.js ファイルを作成します。これは、Webpack と Webpack Encore の両方のメイン構成ファイルです。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
 
const Encore = require('@symfony/webpack-encore');

// Manually configure the runtime environment if not already configured yet by the "encore" command.
// It's useful when you use tools that rely on webpack.config.js file.
if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

Encore
    // directory where compiled assets will be stored
    .setOutputPath('public/build/')
    // public path used by the web server to access the output path
    .setPublicPath('/build')
    // only needed for CDN's or sub-directory deploy
    //.setManifestKeyPrefix('build/')

    /*
     * ENTRY CONFIG
     *
     * Each entry will result in one JavaScript file (e.g. app.js)
     * and one CSS file (e.g. app.css) if your JavaScript imports CSS.
     */
    .addEntry('app', './assets/app.js')

    // enables the Symfony UX Stimulus bridge (used in assets/bootstrap.js)
    .enableStimulusBridge('./assets/controllers.json')

    // When enabled, Webpack "splits" your files into smaller pieces for greater optimization.
    .splitEntryChunks()

    // will require an extra script tag for runtime.js
    // but, you probably want this, unless you're building a single-page app
    .enableSingleRuntimeChunk()

    /*
     * FEATURE CONFIG
     *
     * Enable & configure other features below. For a full
     * list of features, see:
     * https://symfony.com/doc/current/frontend.html#adding-more-features
     */
    .cleanupOutputBeforeBuild()
    .enableBuildNotifications()
    .enableSourceMaps(!Encore.isProduction())
    // enables hashed filenames (e.g. app.abc123.css)
    .enableVersioning(Encore.isProduction())

    .configureBabel((config) => {
        config.plugins.push('@babel/plugin-proposal-class-properties');
    })

    // enables @babel/preset-env polyfills
    .configureBabelPresetEnv((config) => {
        config.useBuiltIns = 'usage';
        config.corejs = 3;
    })

    // enables Sass/SCSS support
    //.enableSassLoader()

    // uncomment if you use TypeScript
    //.enableTypeScriptLoader()

    // uncomment if you use React
    //.enableReactPreset()

    // uncomment to get integrity="..." attributes on your script & link tags
    // requires WebpackEncoreBundle 1.4 or higher
    //.enableIntegrityHashes(Encore.isProduction())

    // uncomment if you're having problems with a jQuery plugin
    //.autoProvidejQuery()
;

module.exports = Encore.getWebpackConfig();

Creating Other Supporting File

Next, open the new assets/app.js file which contains some JavaScript code and imports some CSS:

次に、いくつかの JavaScript コードを含み、いくつかの CSS をインポートする新しい assets/app.js ファイルを開きます。
1
2
3
4
5
6
7
8
9
10
11
12
13
 
// assets/app.js
/*
 * Welcome to your app's main JavaScript file!
 *
 * We recommend including the built version of this JavaScript file
 * (and its CSS file) in your base layout (base.html.twig).
 */

// any CSS you import will output into a single css file (app.css in this case)
import './styles/app.css';

// start the Stimulus application
import './bootstrap';

And the new assets/styles/app.css file:

そして、新しい assets/styles/app.css ファイル:
1
2
3
4
 
/* assets/styles/app.css */
body {
    background-color: lightgray;
}

You should also add an assets/bootstrap.js file, which initializes Stimulus: a system that you'll learn about soon:

また、Stimulus を初期化する assets/bootstrap.js ファイルを追加する必要があります。このシステムについては、後で説明します。
1
2
3
4
5
6
7
8
9
10
11
12
 
// assets/bootstrap.js
import { startStimulusApp } from '@symfony/stimulus-bridge';

// Registers Stimulus controllers from controllers.json and in the controllers/ directory
export const app = startStimulusApp(require.context(
    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
    true,
    /\.(j|t)sx?$/
));

// register any custom, 3rd party controllers here
// app.register('some_controller_name', SomeImportedController);

Then create an assets/controllers.json file, which also fits into the Stimulus system:

次に、assets/controllers.json ファイルを作成します。これは Stimulus システムにも適合します。
1
2
3
4
 
{
    "controllers": [],
    "entrypoints": []
}

Finally, though it's optional, add the following scripts to your package.json file so you can run the same commands in the rest of the documentation:

最後に、オプションですが、次のスクリプトを package.json ファイルに追加して、ドキュメントの残りの部分で同じコマンドを実行できるようにします。
1
2
3
4
5
6
 
"scripts": {
    "dev-server": "encore dev-server",
    "dev": "encore dev",
    "watch": "encore dev --watch",
    "build": "encore production --progress"
}

You'll customize and learn more about these files in Encore: Setting up your Project. When you execute Encore, it will ask you to install a few more dependencies based on which features of Encore you have enabled.

これらのファイルのカスタマイズと詳細については、Encore の「プロジェクトのセットアップ」を参照してください。

Caution

注意

Some of the documentation will use features that are specific to Symfony or Symfony's WebpackEncoreBundle. These are optional, and are special ways of pointing to the asset paths generated by Encore that enable features like versioning and split chunks.

一部のドキュメントでは、Symfony または Symfony の WebpackEncoreBundle に固有の機能を使用します。これらはオプションであり、バージョニングや分割チャンクなどの機能を有効にする、Encore によって生成されたアセット パスを指す特別な方法です。