入门

快速入门

npx create-razzle-app my-app
cd my-app
npm start

如果您先前通过 npm install -g create-razzle-app 全局安装了 create-razzle-app，我们建议您使用 npm uninstall -g create-razzle-app 或 yarn global remove create-razzle-app 卸载该软件包，以确保 npx 始终使用最新版本。

(npm 5.2 及更高版本附带 npx，请参阅较低版本的 npm 的说明)

然后，打开 http://localhost:3000/ 以查看您的应用程序。控制台应如下所示

就是这样。您不必担心设置多个 webpack 配置或其他构建工具。只需开始编辑 src/App.js 就行！

Razzle 有许多示例，我们可能有一款适合您的需求

参见：示例

命令

下面列出了一些可能对您有用的命令。

npm start

在开发模式下运行项目。您可以在 http://localhost:3000 上查看自己的应用程序

如果您进行编辑，页面将会重新加载。

npm run build

为生产构建文件夹构建应用。

构建已最小化，文件名包含哈希。你的应用已准备就绪，可以部署了！

默认情况下，这使用 NODE_ENV=production，并且会询问你是否要运行它。

如果你不想进行确认，请将 --noninteractive 添加到你的构建命令。

如果你想使用不同的 env 文件（例如 .env.something-staging 文件），则可以添加 --node-env=something-staging

npm run start:prod

在生产环境中运行已编译的应用程序。

你可以在 http://localhost:3000 再次查看你的应用程序

npm test

在交互模式下运行测试观察器（Jest）。默认情况下，运行与自上次提交以来已更改的文件相关的测试。

npm export

导出生产模式中的静态应用程序版本。必须将 export 命令添加到 package.json 的脚本以及 src 目录中的 static_export.js 文件中。有关更多详细信息，请参阅静态网站生成。

rs

如果你的应用程序正在运行，并且你需要手动重新启动服务器，则无需完全关闭并重新捆绑你的应用程序。你可以直接在终端中键入 rs 并按 Enter。

依赖项

为了确保 Razzle 正确安装，请确保安装了 Razzle devDependencies，运行

yarn add --dev \
  razzle \
  razzle-dev-utils \
  babel-preset-razzle

... 并且安装了 Razzle peerDependencies，运行

yarn add --dev \
  webpack-dev-server@3.11.0 \
  mini-css-extract-plugin@0.9.0 \
  postcss@8.2.4

选择你的 webpack 版本

yarn add --dev webpack@5.65.0 html-webpack-plugin@5.2.0
# or
yarn add --dev webpack@4.46.0 html-webpack-plugin@4.5.2

此外，如果遇到问题，请尝试将特定软件包版本添加到 package.json 中的分辨率。

常见问题

如果你遇到 css 问题，这可能与 postcss 解析错误有关。

要修复此问题，请添加

{
  "postcss": "8.2.4"
}

到你的 package.json 中的分辨率。有关 npm，请参阅此处。

如果你收到类似这样的错误

node_modules/react-images-upload/index.css:1
.fileUploader {
^

SyntaxError: Unexpected token '.'
    at wrapSafe (internal/modules/cjs/loader.js:1072:16)

这意味着 node 尝试将 index.css 用作 node 模块。

要修复此问题，请确保包含 css 的模块未外部化。

// razzle.config.js
'use strict';
module.exports = {
  modifyWebpackOptions({
    options: {
      webpackOptions, // the modified options that was used to configure webpack/ webpack loaders and plugins
    }
  }) {
      webpackOptions.notNodeExternalResMatch = (request, context) => {
         return /react-images-upload/.test(request)
      };
    return webpackOptions;
  },
};

开发服务器未启动且未显示错误

使 razzle 更详细

// razzle.config.js
'use strict';
module.exports = {
  options: {
    verbose: true
  }
};

使用 Inspector 调试

npm start -- --inspect=[host:port] 或 yarn start --inspect=[host:port] 这将启动节点服务器并启用检查器代理。
npm start -- --inspect-brk=[host:port] 或 yarn start --inspect-brk=[host:port] 此选项与 --inspect 相同，但在用户代码启动之前也会中断。（为了在代码提前运行前留给调试器足够的时间进行连接）有关更多信息，请参阅此处。
npm test -- --inspect=[host:port] 或 yarn test --inspect=[host:port] 这将启动测试服务器并启用检查器代理。
npm test -- --inspect-brk=[host:port] 或 yarn test --inspect-brk=[host:port] 此选项与 --inspect 相同，但在用户代码启动之前也会中断。（为了在代码提前运行前留给调试器足够的时间进行连接）有关更多信息，请参阅此处。