WebpackEncore：FAQ 和常见问题

编辑此页

如何部署我的 Encore 资源？

在部署您的资源时，有两件重要的事情要记住。

1) 编译生产环境资源

通过运行以下命令，优化您的生产环境资源：

        1
        $ ./node_modules/.bin/encore production
    

这将最小化您的资源并进行其他性能优化。耶！

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

2) 仅部署构建后的资源

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

我需要在我的生产服务器上安装 Node.js 吗？

否，除非您计划在您的生产服务器上构建您的生产环境资源，但这不推荐。请参阅如何部署我的 Encore 资源？。

我应该将哪些文件提交到 git？哪些应该忽略？

您应该将您的所有文件提交到 git，除了 node_modules/ 目录和构建的文件。您的 .gitignore 文件应包含

        1
2
3
        /node_modules/
# whatever path you're passing to Encore.setOutputPath()
/public/build
    

您应该提交您的所有源资源文件、package.json 和 package-lock.json。

我的应用位于子目录下

如果您的应用没有位于 Web 服务器的根目录（即，它位于子目录下，例如 /myAppSubdir），您需要在调用 Encore.setPublicPath() 时配置它

        1
2
3
4
5
6
7
8
9
10
11
12
13
14
        // webpack.config.js
  Encore
      // ...

      .setOutputPath('public/build/')

-     .setPublicPath('/build')
+     // this is your *true* public path
+     .setPublicPath('/myAppSubdir/build')

+     // this is now needed so that your manifest.json keys are still `build/foo.js`
+     // (which is a file that's used by Symfony's `asset()` function)
+     .setManifestKeyPrefix('build')
  ;
    

如果您正在使用 encore_entry_script_tags() 和 encore_entry_link_tags() Twig 快捷方式（或者正在以其他方式通过 entrypoints.json 处理您的资源），那么您就完成了！这些快捷方法从 entrypoints.json 文件中读取，该文件现在将包含子目录。

“jQuery is not defined” 或 “$ is not defined”

当您的代码（或您正在使用的一些库）期望 $ 或 jQuery 是全局变量时，会发生此错误。但是，当您使用 Webpack 和 require('jquery') 时，不会设置全局变量。

修复方法取决于错误是发生在您的代码中还是发生在您正在使用的某些第三方代码中。请参阅 Webpack Encore 中的 jQuery 插件和遗留应用以获取修复方法。

Uncaught ReferenceError: webpackJsonp is not defined

如果您收到此错误，可能是因为您忘记为包含 Webpack 运行时的 runtime.js 文件添加 script 标签。如果您正在使用 encore_entry_script_tags() Twig 函数，则永远不会发生这种情况：文件脚本标签会自动呈现。

This dependency was not found: some-module in ./path/to/file.js

通常，在您通过 npm 安装软件包后，您可以 require / import 它来使用它。例如，在运行 npm install respond.js 后，您尝试 require 该模块

        1
        require('respond.js');
    

但是，您看到一个错误，而不是正常工作

This dependency was not found

respond.js in ./assets/app.js

通常，软件包会通过在其 package.json 中添加 main 键来“声明”其“主”文件。但有时，旧库不会有这个。相反，您需要专门 require 您需要的文件。在这种情况下，您应该使用的文件位于 node_modules/respond.js/dest/respond.src.js。您可以通过以下方式 require 它

        1
2
        // require a non-minified file whenever possible
require('respond.js/dest/respond.src.js');
    

我需要在第三方模块上执行 Babel

为了性能，Encore 不会通过 Babel 处理 node_modules/ 内的库。但是，您可以通过 configureBabel() 方法更改它。请参阅使用 Encore 配置 Babel 以了解详细信息。

如何将我的 Encore 配置与我的 IDE 集成？

PhpStorm 中的 Webpack 集成和其他 IDE 使您的开发更高效（例如，通过解析别名）。但是，您可能会遇到此错误

        1
2
3
4
        Encore.setOutputPath() cannot be called yet because the runtime environment
doesn't appear to be configured. Make sure you're using the encore executable
or call Encore.configureRuntimeEnvironment() first if you're purposely not
calling Encore directly.
    

失败的原因是 Encore 运行时环境仅在您运行时配置（例如，当执行 npx encore dev 时）。要解决此问题，请调用 Encore.isRuntimeEnvironmentConfigured() 和 Encore.configureRuntimeEnvironment() 方法

        1
2
3
4
5
6
7
8
        // webpack.config.js
const Encore = require('@symfony/webpack-encore')

if (!Encore.isRuntimeEnvironmentConfigured()) {
    Encore.configureRuntimeEnvironment(process.env.NODE_ENV || 'dev');
}

// ... the rest of the Encore configuration
    

我的测试由于 `entrypoints.json` 文件而失败

安装 Encore 后，您在本地或在您的持续集成服务器上运行测试时，可能会看到以下错误

        1
2
3
4
        Uncaught PHP Exception Twig\Error\RuntimeError:
"An exception has been thrown during the rendering of a template
("Could not find the entrypoints file from Webpack:
the file "/var/www/html/public/build/entrypoints.json" does not exist.
    

发生这种情况是因为您没有构建您的 Encore 资源，因此没有 entrypoints.json 文件。要解决此错误，请构建 Encore 资源或将 strict_mode 选项设置为 false（这可以防止 Encore 的 Twig 函数在没有 entrypoints.json 文件时触发异常）

        1
2
3
4
        # config/packages/test/webpack_encore.yaml
webpack_encore:
    strict_mode: false
    # ...
    

本作品，包括代码示例，根据 Creative Commons BY-SA 3.0 许可协议获得许可。

版本