为 Razzle 做出贡献

你好！感谢您对 Razzle 的关注。本指南将帮助您开始做出贡献。

• 为 Razzle 做出贡献
  • 在本地开发
• 可选安装添加依赖项
  • 命令
  • 与示例一起使用 razzle 核心执行工作流
• 或
• git checkout -b my-feature-branch master
• git checkout -b my-feature-branch three
• /home/oyvind/Documents/GitHub/razzle/
• 以确保测试通过
• 添加新示例
• 处理示例
• 如果是带有 webpack5 的示例，则需要执行以下操作
• 稍后切换回 webpack4 以使用 webpack4
• 然后
• 如果您想向示例中添加依赖项
• 如果您对 startserver 插件进行了更改
• 通过特定 webpack 和特定测试运行具有未发布 razzle 包的示例测试
• 在测试期间运行的命令将输出和 puppeteer 截图放在 test-artifacts/ 中。
• 遇到 puppeteer 问题？

  - [Updating your fork](#updating-your-fork)
  

  • 添加示例
    • 使用 examples/basic 作为模板
    • 命名示例
    • 如何合并您的示例
    • 准则
  • 为什么我的公关没有合并？
  • 获得认可
  • 获得帮助

Razzle 是由 Lerna 驱动的一个由多个 npm 包组成的单一存储库。

• 示例：所有示例都放在这里。
• 包：这是神奇发生的地方
  • babel-preset-razzle：Razzle 的默认 Babel 预设。
  • create-razzle-app：Razzle 的 CLI 工具，负责新项目的初始化
  • razzle：核心库
  • razzle-dev-utils：实用程序和帮助程序
• scripts：有关清理和引导储存库的实用脚本
• test：端到端测试

本地开发#

首先，将代码库 fork 到您的 GitHub 帐户。然后将 fork 克隆到本地计算机，并为您的功能/错误/修补程序等创建一个新的分支。建议不要直接在 master 上开发，这样您可以获得更新。

git clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git
cd razzle
git checkout -B <my-branch>
NODE_ENV=development yarn install ---ignore-engines
# optionally install add-dependencies
sudo npm install add-dependencies -g

这将安装所有包中的所有 node_modules，并链接内部相关项。因此，当您在任何包中进行本地更改时，您可以在所有示例中立即试用它们。add-dependencies 可用于将包添加到 package.json。

命令#

• yarn clean：清理所有 node_modules 并从包和示例中删除所有符号链接。
• yarn test --runInBand：运行所有测试
• yarn test:packages：运行包的测试
• yarn test:e2e：运行端到端测试
• yarn build-docs：构建文档/更新文档目录
• yarn publish-all-canary：执行 razzle@canary 版本。
• yarn publish-all-stable：执行稳定版本（使用所发布包的 npm 版本）
• yarn new-example：从另一个示例创建新示例。yarn new-example basic new-example。
• yarn bootstrap-examples：使用特定示例作为工作区运行 yarn。自动链接内部相关模块。在示例中运行 yarn restrap 以重新安装。
• yarn test:examples:simple：运行所有简单示例的测试（使用所发布包的 npm 版本）
• yarn test:examples:complex：运行所有复杂示例的测试（使用所发布包的 npm 版本）
• yarn test:examples：运行所有示例的测试（使用所发布包的 npm 版本）

使用示例处理 razzle core 的工作流#

git clone https://github.com/<YOUR_GITHUB_USERNAME>/razzle.git
cd razzle
git checkout -b my-feature-branch canary
# or
# git checkout -b my-feature-branch master
# git checkout -b my-feature-branch three
sudo npm install add-dependencies yalc -g
pwd
# /home/oyvind/Documents/GitHub/razzle/
NODE_ENV=development yarn install ---ignore-engines
# to make sure tests pass
yarn test --runInBand
# to add a new example
yarn new-example existingexample with-somefeature
# to work on a example
cd examples/basic
example="$(basename $PWD)"
pushd ../..
# if it is a example with webpack5 you need to do
yarn add -W webpack@5.24.0 html-webpack-plugin@5.2.0
# switch back to webpack4 later to work with webpack4
yarn add -W webpack@4.46.0 html-webpack-plugin@4.5.2
# then
yarn bootstrap-examples $example
popd
yarn build
# if you want to add dependencies to the example
add-dependencies somedependency
yarn restrap
# if you make changes to startserver plugin
pushd ../..
cd packages/razzle-start-server-webpack-plugin
yarn build
popd
# to run example tests with unreleased razzle packages with specific webpack and specific tests
WEBPACK_DEPS="webpack@5.24.0 html-webpack-plugin@5.2.0" PACKAGE_MANAGER="yalc" NPM_TAG="development" yarn test:examples --runInBand -t with-tailwindcss
WEBPACK_DEPS="webpack@4.46.0 html-webpack-plugin@4.5.2" PACKAGE_MANAGER="yalc" NPM_TAG="development" yarn test:examples --runInBand -t with-tailwindcss
# Commands being run during testing puts output and puppeteer screenshots in test-artifacts/
# Trouble with puppeteer?
sudo sysctl -w kernel.unprivileged_userns_clone=1

更新您的 fork#

当您想要将更改下拉到 fork 时，请在终端中输入以下内容

git checkout master
git pull origin master

添加示例#

使用 examples/basic 作为模板#

如果你想添加示例，我建议你复制examples/basic文件夹yarn new-example basic your-example并将其用作基本模板。在开始添加内容之前，继续更改新示例的package.json中的包名称。然后回到项目根目录并运行yarn bootstrap-examples your-example。这将确保你的新示例使用你所有包的本地版本。

示例命名#

所有示例文件夹均应命名为with-<展示事物>。每个示例的 npm 包名称（在其package.json中找到）应类似于razzle-examples-with-<展示事物>。

如何合并你的示例#

• 确保对代码的重要部分进行注释，并包括一个撰写精良的“示例背后的想法”部分。这对我的重要性高于你的实际代码。
• 将你的示例限制在一个想法/库/特性（例如，不要提交with-styled-components-and-material-ui）。话虽如此，有时会出现这种情况，规则会得到放宽，例如，如果你展示如何使用 Apollo 和 Redux 或 <Flux 库>+ React Router。
• 你的示例必须实现热模块替换。如果你进行编辑时它不更新，则表示你弄坏了一些东西。
• 你的示例应该是极简且简洁的，或者是从原始库中直接复制的另一个著名示例（例如直接从 react-redux 复制一个示例）。

指南#

提交消息指南

为什么我的 PR 未合并？#

在关闭 PR 之前，我会尽力阐述我的理由，但 80% 的时间属于以下情况...

• 你并未阅读此文档
• 你的代码破坏了内部应用程序（我会透明地说明这一点）
• 你的代码与某些未来计划冲突（我也会透明地说明这一点）
• 你说了不恰当的话或违反了行为准则

获得认可#

我们使用项目自述文件来认可项目社区成员的贡献。

要添加贡献者：all-contributors add github_username doc,code

有效的贡献键

获取帮助#

推文 / 私信 @jaredpalmer 推文 / 私信 @nima_arf 推文 / 私信 @fivethreeo