为什么 webpack encore 只在 dev 中需要 [英] Why is webpack encore required only in dev

问题描述

我目前正在为一个 symfony 5 项目配置一些 docker 镜像并尝试处理生产版本.这样做，我注意到 webpack encore 仅安装在开发模式下，如本官方文档所述:https://symfony.com/doc/current/frontend/encore/installation.html :

I'm currently configuring some docker images for a symfony 5 project and trying to deal with the production build. Doing so, I noticed that webpack encore is installed only on dev mode, as advised on this official documentation : https://symfony.com/doc/current/frontend/encore/installation.html :

yarn add @symfony/webpack-encore --dev

然而，这对我来说没有意义，因为即使在生产中，我们也应该构建资产:

However, this doesn't make sense to me, since even in production, we are supposed to build the assets :

yarn encore production

有没有人有这方面的线索?谢谢

Does anyone have clues about this ? Thank you

推荐答案

The Symfony docs on 如何部署我的 Encore 资产? 提供部署资产时要记住的两个重要事项:

The Symfony docs on How Do I Deploy My Encore Assets? provide two important things to remember when deploying assets:

1) 为生产编译资产:

$ ./node_modules/.bin/encore production

现在是重要的部分:

但是，您应该在哪个服务器上运行此命令?这取决于您如何部署.例如，您可以在本地(或在构建服务器上)执行此操作，并使用 rsync 或其他方式将生成的文件传输到您的生产服务器.或者，您可以先将文件放在生产服务器上(例如通过 git pull)，然后在生产中运行此命令(理想情况下，在流量到达您的代码之前).在这种情况下，您需要在生产服务器上安装 Node.js.

But, what server should you run this command on? That depends on how you deploy. For example, you could execute this locally (or on a build server), and use rsync or something else to transfer the generated files to your production server. Or, you could put your files on your production server first (e.g. via git pull) and then run this command on production (ideally, before traffic hits your code). In this case, you’ll need to install Node.js on your production server.

第二个重要的事情:

2) 仅部署内置资产

需要部署到生产服务器的唯一文件是最终构建的资产(例如 public/build 目录).你不需要安装 Node.js、部署 webpack.config.js、node_modules 目录甚至你的源资产文件，除非你计划在你的生产机器上运行 encore 生产.构建资产后，这些是唯一需要存在于生产服务器上的东西.

The only files that need to be deployed to your production servers are the final, built assets (e.g. the public/build directory). You do not need to install Node.js, deploy webpack.config.js, the node_modules directory or even your source asset files, unless you plan on running encore production on your production machine. Once your assets are built, these are the only thing that need to live on the production server.

简单地说，在生产环境中你只需要生成的资产(通常是/public/build目录内容).在一个简单的场景中，当您只需要加载已编译的 Javascript 和 CSS 文件时，Webpack 不会在运行时使用.

Simply put, in the production environment you only need the generated assets (usually /public/build directory content). In a simple scenario when you only need to load compiled Javascript and CSS files the Webpack is not used at runtime.

在手动部署 Symfony 应用程序(没有 CI/CD)时，可以在本地机器或 Docker 容器(假设 Symfony 4/5)中执行以下步骤:

When deploying a Symfony app manually (without CI/CD) the following steps can be performed on the local machine or in a Docker container (assumes Symfony 4/5):

1. 使用git从GIT存储库导出源代码-archive，例如:git archive --prefix=myApp/HEAD |tar -xC/tmp/¹
2. 转到导出的源代码:cd/tmp/myApp
3. 安装 Symfony &其他 PHP 供应商(另请参阅 Symfony 文档): composer install --no-dev --optimize-autoloader
4. 安装 YARN/NPM 供应商(他们需要使用 Webpack 生成资产):yarn install
5. 创建生产资产:yarn build(或yarn encode production)
6. (如果需要，安装 Symfony 资产:bin/console assets:install)

1. Export the source code from GIT repository with git-archive, e.g.: git archive --prefix=myApp/ HEAD | tar -xC /tmp/¹
2. Go to exported source code: cd /tmp/myApp
3. Install Symfony & other PHP vendors (see also the Symfony docs): composer install --no-dev --optimize-autoloader
4. Install YARN/NPM vendors (they'll required to generate assets with Webpack): yarn install
5. Create production assets: yarn build (or yarn encode production)
6. (Install Symfony assets if needed: bin/console assets:install)

现在代码已准备好将它rsync 到生产服务器.您可以排除或删除 /node_modules、/var 甚至 /assets 目录和 webpack.config.js(可能 package.json & yarn.lock 也不需要 - 没有测试过！)并运行例如: rsync --archive--compress --delete .<myProductionServer>:<app/target/path/>

Now the code is ready to rsync it to the production server. You may exclude or delete the /node_modules, /var and even /assets directories and webpack.config.js (probably package.json & yarn.lock won't be needed either -- didn't tested it!) and run e.g.: rsync --archive --compress --delete . <myProductionServer>:<app/target/path/>

Symfony 部署资源:

Resources on Symfony deployment:

1. 如何部署 Symfony 应用程序(Symfony 文档)
2. 如何我要部署我的 Encore 资产吗?(Symfony 前端常见问题解答)
3. 我需要在我的生产服务器上安装 Node.js 吗?(Symfony 前端常见问题解答)
4. 生产构建&部署(SymfonyCast)

1. How to Deploy a Symfony Application (Symfony docs)
2. How Do I Deploy My Encore Assets? (Symfony Frontend FAQ)
3. Do I Need to Install Node.js on My Production Server? (Symfony Frontend FAQ)
4. Production Build & Deployment (SymfonyCast)

---

¹ 将存档的 GIT 存储库动态解压到 /tmp/myApp 目录中，而不是解压缩到 TAR 存档中.不要错过 --prefix 标志中的前导 / ！git-archive 文档.

---

¹ Untars on the fly the archived GIT repository into the /tmp/myApp directory instead of into a TAR archive. Don't miss the leading / in the --prefix flag! git-archive docs.

这篇关于为什么 webpack encore 只在 dev 中需要的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！