freeCodeCamp/docs/chinese/how-to-setup-freecodecamp-l...

18 KiB
Raw Blame History

此指南可阅读的语言版本 English 中文 русский عربي Español Português

在本地启动freeCodeCamp

请遵循以下准则以便在系统上本地获取freeCodeCamp。如果您想定期参与强烈建议您这样做。

一些贡献工作流程如预览指南页面或编码挑战调试和修复代码库中的错误需要您在本地运行freeCodeCamp。

在GitHub上Fork代码库

[“Fork”]https://help.github.com/articles/about-forks/是您在GitHub上获得自己的freeCodeCamp主代码库a.k.a repo)副本的步骤。

这是必不可少的因为这样您就可以在GitHub上处理freeCodeCamp的副本或者下载它以便在本地工作。稍后您将能够通过拉取请求请求将更改拖入主存储库。

** ProTip** https// github.com / freeCodeCamp / freeCodeCamp的主存储库通常被关联为upstream存储库。 您在https// github.com / YOUR_USER_NAME / freeCodeCamp的分支通常被关联为origin存储库。

按照以下步骤Forkhttps// github.com / freeCodeCamp / freeCodeCamp存储库:

  1. 转到GitHub上的freeCodeCamp存储库https://github.com/freeCodeCamp/freeCodeCamp
  2. 单击界面右上角的“Fork”按钮[更多详细信息]https://help.github.com/articles/fork-a-repo/
  3. 存储库分叉后您将被带到https// github.com / YOUR_USER_NAME / freeCodeCamp的freeCodeCamp副本。

GIF —— 如何在Github上“Fork” freeCodeCamp

准备开发环境

安装必备组件后,需要为开发环境做好准备。这在许多开发工作流程中很常见,您只需要执行一次。

按照以下步骤准备好开发环境:

  1. 如果您还没有安装[Git]https://git-scm.com/或您喜欢的Git客户端。更新到最新版本与您的操作系统捆绑的版本可能已过时

  2. 可选但建议为GitHub设置[SSH密钥]https://help.github.com/articles/generating-an-ssh-key/

  3. 安装您选择的代码编辑器。

    我们强烈建议使用[VS Code]https://code.visualstudio.com/)或[Atom]https://atom.io/)。这些是一些很棒的免费和开源代码编辑器

  4. 为您的代码编辑器设置linting。

    您应该在您的编辑器中运行ESLint,它将突出显示任何不符合freeCodeCamp的JavaScript样式指南的内容。

    请不要忽略任何掉毛错误。它们旨在帮助您,并确保干净简单的代码库。

克隆你的freeCodeCamp副本

"克隆"是一个步骤,您可以下载一个属于您或其他人“远端”位置存储库的副本。在这里这个远端位置是freeCodeCamp存储库的fork,你可以在http//github.com/YOUR_USER_NAME/freeCodeCamp获得。

在本地计算机上运行以下命令:

  1. 在项目目录中打开终端/命令提示符/Bash Shell

    i.e。/ yourprojectdirectory /

  2. 克隆你的freeCodeCamp的fork用你的GitHub用户名替换YOUR_USER_NAME

    git clone https://github.com/YOUR_USER_NAME/freeCodeCamp.git
    

这会将整个freeCodeCamp存储库下载到您的项目目录中。

在主存储库中设置upstream

现在你已经下载了fork的副本你需要设置一个upstream

如前所述,https// github.com / freeCodeCamp / freeCodeCamp的主存储库通常被称为upstream存储库。你在https// github.com / YOUR_USER_NAME / freeCodeCamp的分支通常被称为origin信息库。

除了origin之外,你还需要将你的本地克隆指向upstream。这样您就可以同步主存储库中的更改。这样您就不必一次又一次地进行分叉和克隆。

  1. 将目录更改为新的freeCodeCamp目录

    cd freeCodeCamp
    
  2. 将遥控器添加到主freeCodeCamp存储库

    git remote add upstream https://github.com/freeCodeCamp/freeCodeCamp.git
    
  3. 检查配置看起来不错:

    git remote -v
    

    输出应如下所示:

    origin    https://github.com/YOUR_USER_NAME/freeCodeCamp.git (fetch)
    origin    https://github.com/YOUR_USER_NAME/freeCodeCamp.git (push)
    upstream    https://github.com/freeCodeCamp/freeCodeCamp.git (fetch)
    upstream    https://github.com/freeCodeCamp/freeCodeCamp.git (push)
    

在您的计算机上本地运行freeCodeCamp

现在您已拥有freeCodeCamp的本地副本您可以按照这些说明使其在本地运行。这将有助于您

  • 预览对学习平台上显示的页面的编辑。
  • 处理与UI相关的问题和增强功能。
  • 调试和修复应用程序服务器和客户端应用程序中的问题。

如果您只是编辑文件,执行rebase或解决merge冲突您可以跳过本地运行freeCodeCamp。您以后可以随时返回这部分说明。

跳过本地运行freeCodeCamp

安装先决条件

首先安装这些必备软件。

先决条件 版本 备注
[MongoDB社区服务器]https://docs.mongodb.com/manual/administration/install-community/ 3.6 [发布说明]https://docs.mongodb.com/manual/release-notes/),注意:我们目前在3.6[计划升级]https://github.com/freeCodeCamp/freeCodeCamp /问题/ 18275
[Node.js]http://nodejs.org 8.x [LTS Schedule]https://github.com/nodejs/Release#release-schedule
npm与Node捆绑在一起 6.x 没有LTS版本我们使用与Node LTS

重要:

我们强烈建议您更新上述最新的稳定版本a.k.a长期支持LTS版本。 如果您的计算机上已安装Node.js或MongoDB请运行以下命令以验证版本

mode -v
mongo --version
npm -v

如果您有不同的版本,请安装推荐的版本。我们只支持推荐版本的安装问题。

我在安装推荐的先决条件时遇到问题。我该怎么办?

我们定期开发流行的和最新的操作系统如macOS 10.12或更高版本Ubuntu 16.04或更高版本以及Windows 10.它建议在以下资源上查找您的特定问题GoogleStack Overflow或Stack Exchange。有可能有人遇到了同样的问题并且您的特定查询已经有了答案。

如果您使用的是其他操作系统,和/或仍然遇到问题,请联系我们公共论坛上的[贡献者社区]https://www.freeCodeCamp.org/c/contributors或[贡献者聊天室] https://gitter.im/freeCodeCamp/Contributors。我们或许可以解决一些常见问题

我们无法在GitHub上为您提供支持因为软件安装问题超出了本项目的范围。

安装依赖项

首先你需要添加私有环境变量API密钥

# 创建“sample.env”的副本并将其命名为“.env”。
# 使用必要的API密钥和秘密填充它

# macOS / Linux 环境下
cp sample.env .env

# Windows 环境下
copy sample.env .env

然后,你需要安装应用启动需要的依赖。

# 安装NPM依赖项
npm install

无需更改密钥即可在本地运行应用程序。您可以保留sample.env中的默认值。

MONGOHQ_URL是最重要的一个。除非您在不同于默认值的设置中运行MongoDB否则sample.env中的URL应该可以正常工作。

您可以保留其他键。请记住如果您想使用更多服务您必须为这些服务获取自己的API密钥并在.env文件中相应地编辑这些条目。

启动MongoDB

在启动应用程序之前您需要启动MongoDB

在单独的终端中启动MongoDB服务器

  • 在macOS和Ubuntu上

    mongod
    
  • 在Windows上您必须指定mongod二进制文件的完整路径 确保用您安装的版本替换3.6

    "C:\Program Files\MongoDB\Server\3.6\bin\mongod"
    

ProTip 通过将其作为后台服务安装您可以避免每次都启动MongoDB。 您可以在他们的操作系统文档中了解更多信息

播种数据库

接下来让数据库播种。在此步骤中我们运行以下命令该命令将使MongoDB服务器填充其他服务所需的一些初始数据集。这包括一些模式以及其他内容。

npm run seed

开始freeCodeCamp客户端应用程序和API服务器

您能现在开始API服务器和客户端应用程序。

npm run develop

这单一命令将启动所有服务包括API服务器和客户端应用程序都会为您运行。 现在打开浏览器并且访问http://localhost:8000。 如果app运行祝贺-您是全部设置好了。

专业小贴士

API服务器服务APIs在http://localhost:3000 Gatsby app为客户端应用程序服务在http://localhost:8000

意思是,如果您参观http://localhost:3000/explorer您可以看到我们有的API。

祝贺🎉! 您现在有freeCodeCamp的整个学习的平台的拷贝运行在您的本地机器上。

本地启动应用快捷命令参考

这有一些快捷参考,列举出了当你在本地启动项目是时常需要的一些命:

对克隆到本地的freeCodeCamp代码进行改动

接下来您能对文件做改动并保存commit你的改动。

遵循以下步骤:

  1. 检查你是否在 master 分支上

    git status
    

    你可能会得到如下输出:

    On branch master
    Your branch is up-to-date with 'origin/master'.
    
    nothing to commit, working directory clean
    

    如果你不是在master分支上或者你工作的文件夹不干净, 消除所有未完成的文件/保存并且切换到master分支上:

    git checkout master
    
  2. 接下来你可能想从freeCodeCamp主代码库同步master分支最新的修改

    **提示:**如果你有任何未完成的之前以你Fork的代码库的master分支发起的拉取请求,你将会丢失掉他们。 你应该让一个主持人优先跟进,合并它们。为了避免这种情况,你应当总是在一个分支上工作。

    尽量经常做此操作, 以避免日后造成冲突:

    git fetch upstream
    

    现在你可能想让副本相对于freeCodeCamp的master代码分支做一个硬性重置

    git reset --hard upstream/master
    

    推送你的分支到你名为origin的远端代码库,以清理你在GitHub上Fork的代码库的历史纪录

    git push origin master --force
    
  3. 接下来, 你需要创建一个新的分支。

    为每个单独的问题创建一个分离的分支进行处理,会帮助你保持你的本地副本库干净。你永远不要在master分支上工作。否则会弄脏你的freeCodeCamp副本而且你可能不得不通过重新克隆或者Fork来重新开始。

    像之前讲解的那样检查是否在master分支上,创建一个新的分支并离开这个分支:

    git checkout -b fix/update-guide-for-xyz
    

    你的分支名应该以 fix/feat/ 等开始。要避免在分支名中使用问题的编号。保持名称短小,有意义并且唯一。

    如下,一些比较不错的分支命:

    fix/update-challenges-for-react
    fix/update-guide-for-html-css
    fix/platform-bug-sign-in-issues
    feat/add-guide-article-for-javascript
    translate/add-spanish-basic-html
    
  4. 接下来,你可以在你喜欢的编辑器上编辑页面和代码了。

  5. 一旦对你的修改满意了你亏启动本地freeCodeCamp项目来预览你的修改。

  6. 确保你修复任意的错误并检查你的修改格式。我们有指南文章和代码挑战和风格指南。

  7. 接下来,检查和确认你更新的文件

    git status
    

    这个命令会显示一个你编辑过但未缓存的文件列表。

    On branch feat/documentation
    Your branch is up to date with 'upstream/feat/documentation'.
    
    Changes not staged for commit:
    (use "git add/rm <file>..." to update what will be committed)
    (use "git checkout -- <file>..." to discard changes in working directory)
    
        modified:   CONTRIBUTING.md
        modified:   docs/README.md
        modified:   docs/how-to-setup-freecodecamp-locally.md
        modified:   docs/how-to-work-on-guide-articles.md
    ...
    
  8. 缓存修改并保存。

    这部你只需要标记你修改或添加的文件。你可以执行一下重置,并且消除那些你不想修改的文件。

    git add path/to/my/changed/file.ext
    

    或者, 可选地你可以添加所未缓存的文件到缓存区域:

    git add .
    

    当你执行保存的时候,只有添加到缓存区的修改才会被保存。

    git status
    

    输出:

    On branch feat/documentation
    Your branch is up to date with 'upstream/feat/documentation'.
    
    Changes to be committed:
    (use "git reset HEAD <file>..." to unstage)
    
        modified:   CONTRIBUTING.md
        modified:   docs/README.md
        modified:   docs/how-to-setup-freecodecamp-locally.md
        modified:   docs/how-to-work-on-guide-articles.md
    

    现在, 你可以像这样附带一个短信息保存你的修改:

    git commit -m "fix: my short commit message"
    

    一些例子:

    fix: update guide article for Java - for loop
    feat: add guide article for alexa skills
    

    可选的:

    我们高度推荐提交约定保存信息。这是一个你可以在其他一些流行的开源库上看到最佳实践。作为一个开发者,这鼓励你遵循标准实践

    一些约定的保存信息例子:

    fix: update HTML guide article
    fix: update build scripts for Travis-CI
    feat: add article for JavaScript hoisting
    docs: update contributing guidelines
    

    保持短小, 不要超过50个字母。你可以一直在保存信息的描述上添加额外信息。

    这并不会比'update file'或者'add index.md'这样的非约定信息消耗更多额外的时间。

    你可以通过这里了解更多关于我们为什么需要使用约定保存。

  9. 如果你在做了保存后意识到你需要编辑一个文件或者更新保存信息,在编辑文件之后这样做:

    git commit --amend
    

    这会打开一个默认的像nanovi的文本编辑器,你可以在上面编辑保存信息标题并且添加/编辑描述。

  10. 接下来你可以推送你的修改到你的Fok仓库了。

    git push origin branch/name-here
    

提交一个拉取请求Pull Request——PR

  1. 一旦提交了编辑內容系统将提示您在fork的GitHub页面上创建一个拉取请求。

    Image - Compare pull request prompt on GitHub

  2. 默认情况下所有拉取请求都应该针对freeCodeCamp主代码库的master分支。

    提出拉取请求时请确保将Base Fork设置为freeCodeCamp/freeCodeCamp。

    Image - Comparing forks when making a pull request

  3. 将分支的拉取求提交给freeCodeCamp的master分支。

  4. 在PR的正文中包含尽量详细的摘要包括您所做的更改以及原因。

     - 您將看到一個拉取请求模板。这是在打开拉取請求之前应该遵循的清单。

     - 填写适合您的详细信息。我们将核对此信息,并决定是否接受您的拉取请求。

     - 如果PR旨在解决现有的错误/问题,那么,在结束时       你PR的描述附加关键字closes和#xxxx其中xxxx       是问题编号)。示例:close#1337。這告訴GitHub       如果PR被接受并合并则自动关闭现有问题。

  1. 表明您是否在本地网站上进行过测试。

    当您进行非复制编辑markdown文件的修改时这非常重要。例如对CSS或JavaScript代码等的更改。

获取帮助

如果您遇到困难并需要帮助,请通过我们论坛上的'贡献者'类別或在Gitter上的贡献者者聊天室询问我們。

您的浏览器控制台或Bash/終端/命令行中可能存在錯誤有助於识別問題。

故障排除

如果應用程序啟動但您遇到UI本身的錯誤例如如果未加載字體或代碼編輯器未正確顯示您可以嘗試至少一次以下故障排除步驟

# 刪除所有已安裝的節點模塊
rm -rf node_modules ./**/node_modules

# 重新安裝npm包
npm安裝

# 引導項目
npm運行bootstrap

# 種子數據庫
npm run seed

#重新啟動應用程序
npm run develop