README

我们可以根据新的标准和模式添加一个新的前端开发文件夹，这些 JS 代码片段可以通过 Webpack 进行转换和编译。

Symfony Webpack Encore

此包试图提供添加新 JS 代码的兼容性，此代码可能有多种用途，但其主要目的是提供一个放置前端代码的章节。

Symfony Webpack Encore 在 3.3 版本之前不可用，如果您有旧版本，可以尝试安装此包。

如何安装（后端）

在项目文件夹内部，您需要运行以下命令通过 Composer CLI 安装包

$ composer require jneyra/mvc-webpack-encore:dev-master

然后安装包并将其添加到您的 vendor 文件夹中

$ composer install

如果没有与项目的兼容性问题，这些命令不应该显示错误。

最后，在项目的 parameters.yml 和 services.yml 中添加以下配置。

parameters:
    web_dir: '%kernel.root_dir%/../web' # You need to define the location of your public folder
    webpack_twig_tag: 'webpack_asset' # You need to add a new asset tag to use in your 'twig' that imports the JS code

注意： 这些定义可能根据您的项目结构而有所不同。

services:
    Jneyra\MvcWebpackEncore\Contracts\WebpackEncoreManifestLocatorInterface:
        alias: Jneyra\MvcWebpackEncore\Asset\WebpackEncoreManifestLocator
        public: true

    Jneyra\MvcWebpackEncore\Contracts\AssetHashInterface:
        alias: Jneyra\MvcWebpackEncore\Asset\AssetHash
        public: true

    Jneyra\MvcWebpackEncore\Asset\WebpackEncoreManifestLocator:
        class: Jneyra\MvcWebpackEncore\Asset\WebpackEncoreManifestLocator
        public: true
        arguments:
            - '%web_dir%'

    Jneyra\MvcWebpackEncore\Asset\AssetHash:
        class: Jneyra\MvcWebpackEncore\Asset\AssetHash
        public: true
        arguments:
            - '@Jneyra\MvcWebpackEncore\Asset\WebpackEncoreManifestLocator'
            - '%webpack_twig_tag%'

    Jneyra\MvcWebpackEncore\Twig\Extension\WebpackEncoreAsset:
        public: false
        class: Jneyra\MvcWebpackEncore\Twig\Extension\WebpackEncoreAsset
        arguments:
            - '@service_container'
        tags:
            - { name: twig.extension }

注意： 在未来的更新中，您将不再需要定义所有这些服务。

如何安装（前端）

您必须在项目中创建一个文件夹，所有源代码都将在此文件夹中，然后再使用 webpack 进行转换。

您必须已安装 NodeJS 并管理 Encore 包。

https://symfony.com.cn/doc/current/frontend/encore/installation.html#installing-encore-in-non-symfony-applications

最后，根据您的配置在项目中对 Webpack 文件进行配置。

https://symfony.com.cn/doc/current/frontend/encore/installation.html#creating-the-webpack-config-js-file

Webpack 转换模式

您需要安装 Webpack 并编译您的文件，编译后的文件将保存在 public 文件夹中。

$ npm i

Webpack 安装，此命令运行一次以安装所有必要的模块。

$ npm run dev

开发者模式，此命令运行一次，在编译完成后输出bach。

$ npm run watch

监控模式，在编译输出后，bach 将继续“监听”文件变化。

$ npm run prod

生产模式，对准备就绪的生产部署的代码进行编译，并应用清洁的压缩。