了解如何在现有的React项目中使用Rekit Studio

by Nate Wang

内特·王

了解如何在现有的React项目中使用Rekit Studio (Learn how to use Rekit Studio in an existing React project)

I introduced Rekit Studio in the last article, and since then many people have been interested in using it in an existing React project. This article will introduce how to do that. To learn how to migrate is really just to learn how Rekit works. So this is not only a guide for the migration, but also an introduction to how Rekit works.

我在上一篇文章中介绍了Rekit Studio ，从那时起，许多人对在现有的React项目中使用它感到兴趣。 本文将介绍如何做到这一点。 学习如何迁移实际上只是为了学习Rekit的工作方式。 因此，这不仅是迁移的指南，而且是Rekit运作方式的简介。

It’s actually better to think about adding Rekit Studio to existing projects rather than migrating it, because you don’t need to refactor all of your existing code to Rekit at one time. You can write new code with Rekit and leave old code as it is — your project will not be broken. Then you can refactor old code at anytime later when necessary. Maybe you want to see full-featured dependency diagraming or edit an old component with Rekit Studio.

实际上，最好考虑将Rekit Studio添加到现有项目中而不是迁移它，因为您不需要一次将所有现有代码重构为Rekit。 您可以使用Rekit编写新代码，而保留旧代码不变—您的项目不会被破坏。 然后，您可以在以后必要时随时重构旧代码。 也许您想查看功能齐全的依赖关系图，或使用Rekit Studio编辑旧组件。

We will take Redux’s TodoMVC implementation as our example, so you may need to check its source code first. It is created by create-react-app, which is an official and very popular React boilerplate. If your project is also created by this boilerplate, then this article will be more useful.

我们将以Redux的TodoMVC实现为例，因此您可能需要首先检查其源代码 。 它是由create-react-app创建的 ，它是官方的并且非常流行的React样板。 如果您的项目也是由该样板创建的，那么本文将更加有用。

先决条件 (Prerequisite)

There are only three prerequisites for your project to use Rekit:

您的项目只有三个先决条件才能使用Rekit：

1. React v0.14+
   React v0.14 +
2. Redux
   Redux
3. ES6 modules
   ES6模块

To be able to migrate, the project should be based on React, Redux. It doesn’t matter if your project doesn’t use React Router. But you may need an adapter to consume React Router’s JSON API, because Rekit uses it as the routing config. This enables Rekit to know how to create/update/delete and display routing rules.

为了能够迁移，该项目应基于React，Redux。 您的项目是否不使用React Router都没关系。 但是您可能需要一个适配器来使用React Router的JSON API ，因为Rekit会将其用作路由配置。 这使Rekit知道如何创建/更新/删除和显示路由规则。

Rekit uses Babylon, the parser used by Babel, to parse ES6 modules for refactoring and dependency diagraming. So it doesn’t support TypeScript or Flow projects for now.

Rekit使用Babel所用的解析器Babylon来解析ES6模块，以进行重构和依赖关系图。 因此，它暂时不支持TypeScript或Flow项目。

1.安装rekit-core和rekit-studio (1. Install rekit-core and rekit-studio)

Both Rekit Studio and Rekit CLI use rekit-core to manage project elements. Install them to your project first:

Rekit Studio和Rekit CLI都使用rekit-core来管理项目元素。 首先将它们安装到您的项目中：

yarn add rekit-core rekit-studio --dev

Or with npm:

或使用npm：

npm install rekit-core rekit-studio --save-dev

2.将Rekit文件夹结构/文件复制到您的项目中 (2. Copy Rekit folder structure/files to your project)

Rekit projects have a special folder structure. To create it for your project quickly, create a clean Rekit app and copy the folders/files to your project.

Rekit项目具有特殊的文件夹结构。 要为您的项目快速创建它，请创建一个干净的Rekit应用并将文件夹/文件复制到您的项目中。

npm install rekit --globalrekit create my-app --clean

Then copy these two folders to your project:

然后将这两个文件夹复制到您的项目中：

• src/
  src /
• tools/
  工具/

Keep in mind that there will be conflict with yours: for the folders, just merge them. For files, don’t replace any of your files and remember which ones have conflicts — then merge or rename them manually (I’ll introduce this later).

请记住，这将与您的冲突：对于文件夹，只需合并它们。 对于文件，请勿替换任何文件，并记住哪些文件有冲突-然后手动合并或重命名它们(我将在稍后介绍)。

3.启动Rekit Studio (3. Start Rekit Studio)

Rekit uses the script under tools/server.js to start dev servers and Rekit Studio. For an existing project, you should already have your own script for dev server and building. So we need to merge them.

Rekit使用tools/server.js下的脚本启动开发服务器和Rekit Studio。 对于现有项目，您应该已经具有用于开发服务器和构建的自己的脚本。 因此，我们需要将它们合并。

There are 4 functions inside Rekit’s server.js:

Rekit的server.js内部有4个函数：

• startDevServer: read webpack config and start webpack dev server.

  startDevServer ：读取webpack配置并启动webpack开发服务器。

• buildDevDll: build third party libraries into Dll to improve Webpack’s performance for development using the Webpack dll plugin.

  buildDevDll ：将第三方库构建到Dll中，以使用Webpack dll插件提高Webpack的开发性能。

• startStudioServer: start an Express server with Rekit Studio middleware

  startStudioServer ：使用Rekit Studio中间件启动Express服务器

• startBuildServer: start an Express server for verifying the built bundle.

  startBuildServer ：启动Express服务器以验证构建的包。

You can either edit server.js to start your dev server or edit your own npm start script by copying startStudioServer function to start Rekit Studio.

您可以编辑server.js来启动开发服务器，也可以通过复制startStudioServer函数来启动Rekit Studio来编辑自己的npm start脚本。

For Redux’s TodoMVC example, the script starts dev server is scripts/start.js, we edit it by appending the following code at the bottom to start Rekit Studio:

对于Redux的TodoMVC示例，脚本启动dev服务器的scripts/start.js是scripts/start.js ，我们通过在底部添加以下代码来启动Rekit Studio来对其进行编辑：

Alternatively, you can also just save above script as a separate file like start_rekit_studio.js then execute it with node, rather then insert it to your existing script.

或者，您也可以将上述脚本另存为单独的文件，例如start_rekit_studio.js然后使用node执行它，而不是将其插入到现有脚本中。

Then we need to add necessary deps if not installed yet:

然后，如果尚未安装，则需要添加必要的部门：

yarn add express express-history-api-fallback --dev

Or with npm:

或使用npm：

npm install express express-history-api-fallback --save-dev

And config the Rekit Studio port in package.json:

并在package.json中配置Rekit Studio端口：

{   ...   "rekit": { "studioPort": 6090 },   ...}

Note that the “rekit” property in package.json is necessary because Rekit uses it to detect a Rekit project.

请注意，package.json中的“ rekit”属性是必需的，因为Rekit使用它来检测Rekit项目。

That’s all. Then you can start Rekit Studio with npm start(assuming you start Studio in your npm start script)! Access http://localhost:6090 for it. And the TodoMVC app itself runs as well. Still access http://localhost:3000 for the app:

就这样。 然后，您可以使用npm start启动Rekit Studio(假设您在npm start脚本中启动Studio)！ 访问http：// localhost：6090 。 TodoMVC应用程序本身也可以运行。 仍访问该应用程序的http：// localhost：3000 ：

We didn’t change anything, but Rekit Studio is now running behind.

我们没有做任何更改，但是Rekit Studio现在正在后面运行。

开始使用Rekit Studio编写代码！ (Start using Rekit Studio to write code!)

Once Rekit Studio is started you can use it to write code. Remember that Rekit just helps to write standard React, Redux code, so you can use it without any limitation in your project. For example let’s create a component HelloRekit under the home feature by Rekit Studio and edit the default text to “Hello Rekit!”

Rekit Studio启动后，您可以使用它来编写代码。 请记住，Rekit仅有助于编写标准的React，Redux代码，因此您可以在项目中不受任何限制地使用它。 例如，让我们在Rekit Studio的home功能下创建一个组件HelloRekit ，然后将默认文本编辑为“ Hello Rekit！”。

Now we have a React component: src/features/home/HelloRekit.js. Then use it in the TodoMVC app by editing src/containers/App.js which is the root component of the app. You can find it in the others folder in Rekit Studio. Open it and add only 2 lines of code:

现在我们有了一个React组件： src/features/home/HelloRekit.js 。 然后通过编辑src/containers/App.js它是应用程序的根组件)在TodoMVC应用程序中使用它。 您可以在Rekit Studio的others文件夹中找到它。 打开它并仅添加两行代码：

Save the file, and then you can even see the dependency diagram though App.js was not created by Rekit:

保存文件，然后即使App.js并非创建App.js，您甚至可以看到依赖关系图：

One thing to keep in mind is that when importing a module, you should use the physical path rather then the logic path showed in the project explorer.

要记住的一件事是，导入模块时，应该使用物理路径，而不是项目浏览器中显示的逻辑路径。

Then open the TodoMVC app, and you can see the HelloRekit component has been displayed:

然后打开TodoMVC应用程序，您可以看到已显示HelloRekit组件：

Though not that beautiful, since we have not added style yet, it works well!

虽然不是那么漂亮，但是由于我们还没有添加样式，因此效果很好！

整合风格 (Integrating styles)

Now, let’s integrate styles managed by Rekit into your project. For now, Rekit only supports Less or Sass as the CSS transpiler. You need to config your bundler (Webpack, Rollup, etc.) to support it: take Less and Webpack, for example, and add src/styles/index.less to the entry in config/webpack.config.dev.js:

现在，让我们将Rekit管理的样式集成到您的项目中。 目前，Rekit仅支持Less或Sass作为CSS编译器。 您需要配置捆绑程序(Webpack，汇总等)以支持它：以Less和Webpack为例，并将src/styles/index.less添加到config/webpack.config.dev.js的条目：

entry: [  ...,  'src/styles/index.less',  ...],

Note that Rekit uses some default style in src/styles/reset.css which should not be used for existing projects. So just remove that @import line in src/styles/index.less.

请注意，Rekit在src/styles/reset.css reset.css中使用一些默认样式，不应将其用于现有项目。 因此，只需删除src/styles/index.less中的@import行src/styles/index.less 。

Then add the Less-loader to the config under oneOf for the TodoMVC app. It might be unnecessary if your project has been using Less.

然后欠加载程序添加到下的config oneOf为TodoMVC应用。 如果您的项目一直在使用Less，则可能没有必要。

{  test: /\.less$/,  loader: 'style-loader!css-loader!less-loader'}

Install Less and Less-loader if necessary:

如有必要，安装越来越少的装载机：

yarn add less@2.3.1 less-loader --dev

Note that Less-loader is now only compatible with Less @2.3.1 but not the latest 3.0.1.

请注意，Less-loader现在仅与Less @ 2.3.1兼容，而与最新的3.0.1不兼容。

All configuration for styling is done, so now let’s add some style to the component HelloRekit and see the result:

样式的所有配置均已完成，因此现在让我们向组件HelloRekit添加一些样式并查看结果：

We can see that the style managed by Rekit has been used by the existing project.

我们可以看到，Rekit管理的样式已被现有项目使用。

集成Redux (Integrating Redux)

Next let’s integrate existing Redux code to Rekit. Each Redux app has a root reducer. The key is to merge Rekit’s reducer with the existing one. It’s super easy! For the TodoMVC app, just import src/reducers/todos.js to Rekit’s root reducer src/common/rootReducer.js:

接下来，让我们将现有的Redux代码集成到Rekit中。 每个Redux应用都有一个根减速器。 关键是将Rekit的减速器与现有的减速器合并。 超级简单！ 对于TodoMVC应用程序，只需将src/reducers/todos.js todos.js导入到Rekit的根减少器src/common/rootReducer.js ：

Then use this root reducer in the TodoMVC app by editing src/index.js:

然后通过编辑src/index.js在TodoMVC应用程序中使用此root reducer：

Ok, you’re able to use Rekit to manage new Redux actions and reducers. Now create an action with Rekit by yourself and try it!

好的，您可以使用Rekit来管理新的Redux动作和reducer。 现在，您可以自己通过Rekit创建一个动作，然后尝试！

集成React Router (Integrating React Router)

As mentioned above, Rekit manages routing rules in JSON format. The root route config file is src/common/routeConfig.js which loads route rules from each feature’s src/features/<feature-name>/route.js. When creating a component with some URL path, Rekit updates the route.js file to insert a routing rule.

如上所述，Rekit以JSON格式管理路由规则。 根路由配置文件是src/common/routeConfig.js ，该文件从每个功能的src/features/<feature-name>/ro ute.js加载路由规则。 当创建一些URL路径的组成部分，Rekit更新s the ro ute.js文件中插入路由规则。

So it’s not necessary to use React Router — you can use any router library that can consume the rules defined by JSON’s API. In a Rekit app, src/Root.js is the place where JSON rules are handled to generate React Router v4 declarations in JSX.

因此，没有必要使用React Router-您可以使用任何可以使用JSON API定义的规则的路由器库。 在Rekit应用中， src/Root.js是处理JSON规则以在JSX中生成React Router v4声明的地方。

Since the TodoMVC app doesn’t use a router, we just use Rekit’s default way. First install react-router-dom and react-router-redux to your project if not installed yet:

由于TodoMVC应用程序不使用路由器，因此我们仅使用Rekit的默认方式。 如果尚未安装，请先将react-router-dom和react-router-redux安装到您的项目中：

yarn add react-router-dom react-router-redux@next --dev

Then you need to touch two files of the TodoMVC app:

然后，您需要触摸TodoMVC应用程序的两个文件：

1. Update src/index.js to render Root.js instead of src/containers/App.js.

   更新src/index.js以呈现Root.js而不是src/containers/App.js

Note that Root.js has used Provider from react-redux for a component, so it’s no longer necessary in index.js.

请注意，Root.js已使用react-redux中的Provider作为组件，因此在index.js中不再需要。

2. Update src/features/home/route.js to add a rule which matches some URL path to TodoMVC’s component src/containers/App.js:

2.更新src/features/home/route.js以添加一条规则，该规则与TodoMVC的组件src/containers/App.js某些URL路径匹配：

You don’t have to add rules to home’s route.js. It could belong to any feature, even the root routeConfig.js.

您不必在home的route.js中添加规则。 它可能属于任何功能，甚至包括根routeConfig.js。

Now you can access the TodoApp by this URL: http://localhost:3000/todos . We can see that TodoMVC’s container component App.js is managed by React Router now.

现在，您可以通过以下URL访问TodoApp： http：// localhost：3000 / todos 。 我们可以看到TodoMVC的容器组件App.js现在由React Router管理。

We have finished migrating React Router. This was just the sample code of TodoMVC. For your app, the approach is similar. If you also use React Router v4, then just use Root.js — otherwise write your own adapter to consume Rekit’s routing config JSON.

我们已经完成了React路由器的迁移。 这只是TodoMVC的示例代码。 对于您的应用程序，方法是相似的。 如果您还使用React Router v4，则只需使用Root.js-否则编写您自己的适配器以使用Rekit的路由配置JSON。

单元测试 (Unit Tests)

Rekit Studio uses the script tools/run_test.js to run unit tests by test file pattern so you should not rename or move it. For example use this command to test the home feature:

Rekit Studio使用脚本tools/run_test.js按测试文件模式运行单元测试，因此您不应重命名或移动它。 例如，使用以下命令测试主页功能：

node run_test.js features/home/**/*.test.js

The script uses Mocha to run tests and nyc to generate a test coverage report. If you use other test frameworks, like Jest, edit this script to run tests for your own.

该脚本使用Mocha运行测试，使用nyc生成测试覆盖率报告。 如果您使用其他测试框架(例如Jest) ，请编辑此脚本以运行自己的测试。

建立 (Build)

Rekit Studio uses the script tools/build.js to build the project. So you should not rename or move it. All you need to do is put your build script inside this script so that you can start building via Rekit Studio’s GUI.

Rekit Studio使用脚本tools/build.js来构建项目。 因此，您不应重命名或移动它。 您需要做的就是将构建脚本放入该脚本中，以便可以通过Rekit Studio的GUI开始构建。

重新安装程序完成 (Rekit setup is done)

For now, we have added Rekit to an existing project. It means you can start to write new code with Rekit Studio and leave the old code as it is. The project should still be running well as before.

目前，我们已经将Rekit添加到现有项目中。 这意味着您可以开始使用Rekit Studio编写新代码，而保留旧代码不变。 该项目应该仍然像以前一样运行良好。

But as I mentioned above, we may need refactor the old code so that it can be managed by Rekit. Next let’s see how to do the migration.

但是如上所述，我们可能需要重构旧代码，以便可以由Rekit对其进行管理。 接下来，让我们看看如何进行迁移。

思考功能 (Thinking in features)

One of the key abilities of Rekit is dividing a complicated application into loosely decoupled features. A feature is a high level concept, and I once introduced the architecture here. For your application, you should also consider creating features to manage existing code rather than putting all code into a single feature.

Rekit的主要功能之一就是将复杂的应用程序分解为松散分离的功能。 功能是一个高级概念，我曾经在这里介绍过该体系结构。 对于您的应用程序，您还应该考虑创建功能来管理现有代码，而不是将所有代码放入一个功能中。

迁移组件 (Migrating components)

Each component consists of three files:

每个组件都包含三个文件：

1. Component.js: should always be put directly under a feature folder: src/features/<feature-name/Component.js

   Component.js：应始终直接放在功能文件夹下： src/features/<feature-name/Component .js

2. Component.less/scss: should always be put directly under a feature folder: src/features/<feature-name/Component.less

   Component.less / scss：应始终直接放在功能文件夹下： src/features/<feature-name/Component.l /Component.l ess

3. Component.test.js: should be in the tests folder: tests/features/<feature-name>/Component.test.js

   Component.test.js：应位于tests文件夹中： tests/features/<feature-name>/Component.t est.js

The position of files and the naming pattern should follow Rekit’s conventions described here so that Rekit can refactor them when necessary. Rekit detects a component by checking if a module under the feature folder imports React.

文件的位置和命名模式应遵循此处描述的Rekit约定，以便Rekit可以在必要时对其进行重构。 Rekit通过检查功能文件夹下的模块是否导入React来检测组件。

Each component’s root DOM node should have a unique CSS class name. In Rekit, the pattern is <feature-name>-<component-name> . It’s always in kebab case using lodash’s _.kebabCase function. This class name will be auto-updated when you rename a component with Rekit.

每个组件的根DOM节点应具有唯一CSS类名称。 在Rekit中，模式为<feature-name>-<compon名称>。 经常使用lodash的 _.kebabCase函数进行烤肉。 当您使用Rekit重命名组件时，该类名称将自动更新。

While keeping these rules in mind, you can move your component to a feature folder. Then Rekit Studio can load it in the project explorer and edit it with the element editor (with tabs for different parts of a component).

在牢记这些规则的同时，您可以将组件移动到功能文件夹。 然后，Rekit Studio可以将其加载到项目浏览器中，并使用元素编辑器(带有用于组件不同部分的选项卡)对其进行编辑。

You can check the final result here to see how Rekit organizes components for the TodoMVC app.

您可以在此处查看最终结果，以查看Rekit如何为TodoMVC应用程序组织组件。

迁移动作和减速器 (Migrating actions and reducers)

Rekit uses a different approach to organize Redux actions and reducers compared to Redux’s official examples (described here). So you need to split your actions.js and reducers.js into different files. Each file has one action and its reducer. The easiest way is to create an action by Rekit Studio then move your old action/reducer logic inside it.

与Redux的官方示例( 此处所述)相比，Rekit使用不同的方法来组织Redux动作和化简。 因此，您需要将actions.js和reducers.js拆分为不同的文件。 每个文件都有一个动作及其简化程序。 最简单的方法是通过Rekit Studio创建一个动作，然后在其中移动旧的动作/减少器逻辑。

Action names and action type constants should also be named in the Rekit way so that Rekit can refactor them. For example, this picture shows how to migrate addTodo action to the Rekit way:

操作名称和操作类型常量也应该以Rekit方式命名，以便Rekit可以对其进行重构。 例如，此图显示了如何将addTodo操作迁移到Rekit方式：

You don’t need to change your business logic. Just put them in a new place. With this approach, you will be able to manage Redux actions/reducers more easily.

您无需更改业务逻辑。 只需将它们放在新位置即可。 使用这种方法，您将能够更轻松地管理Redux动作/减速器。

You can also check the final result here to see how Rekit organizes actions for the TodoMVC app.

您也可以在此处查看最终结果，以查看Rekit如何为TodoMVC应用程序组织动作。

摘要 (Summary)

I have to admit that adding Rekit to an existing project is much easier than I originally thought. You don’t need to change your webpack/rollup/parcel config, how you build/test your project, or how your start your application. But just make sure Rekit runs in your project in three steps:

我必须承认，将Rekit添加到现有项目比我原先想象的要容易得多。 您无需更改webpack / rollup / parcel配置，构建/测试项目的方式或启动应用程序的方式。 但是只需确保Rekit分三步在您的项目中运行：

1. Create folder structure/base boilerplate that Rekit understands
   创建Rekit可以理解的文件夹结构/基础样板

2. Add rekit-core rekit-studio to you project.

   将rekit-core rekit-studio添加到您的项目。

3. Create the script to start Rekit Studio
   创建脚本以启动Rekit Studio

Now you can write new code with Rekit Studio!

现在，您可以使用Rekit Studio编写新代码！

This article uses the TodoMVC app as the example to migrate. Your projects might be much more complicated, so you may have some other problems when migrating. If you do, feel free to put your questions in the comments, and I’ll try my best to help you resolve them. Thanks!

本文以TodoMVC应用为例进行迁移。 您的项目可能要复杂得多，因此在迁移时可能会遇到其他问题。 如果您愿意，请随时在评论中提出您的问题，我会尽力帮助您解决。 谢谢！

翻译自: https://www.freecodecamp.org/news/using-rekit-studio-in-an-existing-react-project-39713d9667b/