зеркало из https://github.com/microsoft/rnx-kit.git
Docsite3 (#1380)
* Final draft of getting started * Final draft of introduction page * Update menu and tab styling. * update vscode recommended extension list to include markdown * formatting * minor language/tone update * Add a note about meta capabilities * refine intro of getting started guide * Add prettier formatting for MDX files. * Refine getting started page. Factor out code and text fragments which are useful on other pages. * fix link styling in admonition blocks * write the depenedency management how-to guide * Darken the background for light-mode inline "code" blocks * docs(changeset): Another round of additions and refinments to the documentation website.
This commit is contained in:
Adam Foxman
GitHub
Родитель
8515a519a5
Коммит
3bb4a34f3f
|
|
@ -0,0 +1,5 @@
|
|||
---
|
||||
"@rnx-kit/docsite": patch
|
||||
---
|
||||
|
||||
Another round of additions and refinments to the documentation website.
|
||||
|
|
@ -2,8 +2,11 @@
|
|||
// See http://go.microsoft.com/fwlink/?LinkId=827846
|
||||
// for the documentation about the extensions.json format
|
||||
"recommendations": [
|
||||
// Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
"esbenp.prettier-vscode",
|
||||
"silvenon.mdx",
|
||||
"bierner.markdown-preview-github-styles",
|
||||
"bierner.markdown-emoji",
|
||||
"bierner.markdown-checkbox"
|
||||
]
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,2 @@
|
|||
Was this helpful? Spread the word on [Twitter](https://twitter.com):
|
||||
`@ReactNativeMSFT` `#rnxkit`
|
||||
|
|
@ -69,6 +69,27 @@ const profile_0_67: Profile = {
|
|||
};
|
||||
```
|
||||
|
||||
## Meta Capabilities
|
||||
|
||||
Meta capabilities let you group capabilities together:
|
||||
|
||||
```typescript
|
||||
{
|
||||
"core/all": {
|
||||
name: "#meta",
|
||||
capabilities: [
|
||||
"core-android",
|
||||
"core-ios",
|
||||
"core-macos",
|
||||
"core-windows",
|
||||
],
|
||||
},
|
||||
}
|
||||
```
|
||||
|
||||
Mata capabilities aren't versioned, and always have `#meta` in the name
|
||||
property.
|
||||
|
||||
## Configuration
|
||||
|
||||
A package tells the dependency manager about itself using configuration. It
|
||||
|
|
|
|||
|
|
@ -0,0 +1,38 @@
|
|||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
|
||||
<Tabs groupId="package-manager">
|
||||
<TabItem value="yarn" label="Yarn" default>
|
||||
|
||||
```sh
|
||||
yarn rnx-dep-check --init app
|
||||
```
|
||||
|
||||
```sh
|
||||
yarn rnx-dep-check --init library
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
|
||||
```sh
|
||||
pnpm rnx-dep-check --init app
|
||||
```
|
||||
|
||||
```sh
|
||||
pnpm rnx-dep-check --init library
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="npm">
|
||||
|
||||
```sh
|
||||
npx rnx-dep-check --init app
|
||||
```
|
||||
|
||||
```sh
|
||||
npx rnx-dep-check --init library
|
||||
```
|
||||
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
import CodeBlock from "@theme/CodeBlock";
|
||||
|
||||
<Tabs groupId="package-manager">
|
||||
<TabItem value="yarn" label="Yarn" default>
|
||||
<CodeBlock language="sh">yarn {props.yarnArgs || props.args}</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
<CodeBlock language="sh">pnpm {props.pnpmArgs || props.args}</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="npm">
|
||||
<CodeBlock language="sh">npm {props.npmArgs || props.args}</CodeBlock>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
|
@ -0,0 +1,15 @@
|
|||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
import CodeBlock from "@theme/CodeBlock";
|
||||
|
||||
<Tabs groupId="package-manager">
|
||||
<TabItem value="yarn" label="Yarn" default>
|
||||
<CodeBlock language="sh">yarn {props.yarnArgs || props.args}</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="pnpm" label="pnpm">
|
||||
<CodeBlock language="sh">pnpm {props.pnpmArgs || props.args}</CodeBlock>
|
||||
</TabItem>
|
||||
<TabItem value="npm" label="npm">
|
||||
<CodeBlock language="sh">npx {props.npxArgs || props.args}</CodeBlock>
|
||||
</TabItem>
|
||||
</Tabs>
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
# Dependency Management
|
||||
|
||||
:::danger Draft Content
|
||||
|
||||
This page needs to be converted from a draft to real instructions.
|
||||
|
||||
Guides should be step-by-step instructions. Devs use them to complete a task.
|
||||
Doing, not learning. If you want to explain why, add notes
|
||||
[here](/docs/dependencies)
|
||||
|
||||
:::
|
||||
|
||||
## On-boarding
|
||||
|
||||
- use vigilant mode first to establish a baseline
|
||||
- work through the warnings/errors that it uncovers
|
||||
- add validation check to CI loops for PRs and builds
|
||||
- configure (init) one package at a time, manually reviewing output
|
||||
- repeat until all packages are configured
|
||||
- keep vigilant mode running in CI so that new packages are validated
|
||||
|
||||
## Updating Dependencies
|
||||
|
||||
- when: after dep-check update (new profile data), when adding/removing
|
||||
capabilties
|
||||
- run dep-check with --write on all packages in monorepo
|
||||
- review results manually
|
||||
- run full test suite to validate apps
|
||||
|
||||
## Upgrading React Native
|
||||
|
||||
- update dep-check to get latest profile data
|
||||
- set-version command across all packages (will update dependencies
|
||||
automatically)
|
||||
- review results manually
|
||||
- run full test suite to validate apps
|
||||
|
||||
## Using a Custom Profile
|
||||
|
||||
- NOTE: This isn't covered in the dep-check [article](/docs/dependencies); add
|
||||
it there and keep this focused on the "How"
|
||||
- create profile and link into package config wherever needed
|
||||
- run dep-check --write across the repo
|
||||
- review results manually
|
||||
- run full test suite to validate apps
|
||||
- encourage [contributing](/docs/contributing) through an issue or a PR
|
||||
|
|
@ -0,0 +1,315 @@
|
|||
import DepCheckInit from "./_dep-check-init.mdx";
|
||||
import PackageCommand from "./_package-command.mdx";
|
||||
import PackageRunCommand from "./_package-run-command.mdx";
|
||||
import AmplifyCallout from "../_amplify-callout.mdx";
|
||||
import Tabs from "@theme/Tabs";
|
||||
import TabItem from "@theme/TabItem";
|
||||
|
||||
# Dependency Management
|
||||
|
||||
Ready for some magic? This guide will fundamentally change the way you maintain
|
||||
your React Native applications and libraries. It all centers on one tool -- the
|
||||
dependency manager.
|
||||
|
||||
:::tip
|
||||
|
||||
Not quite ready to make the leap? Learn more about
|
||||
[dependencies](/docs/dependencies) first.
|
||||
|
||||
:::
|
||||
|
||||
## Onboarding
|
||||
|
||||
The first order of business is onboarding your React Native packages to the
|
||||
dependency manager. Do this for every React Native package you have. It can be
|
||||
done all at once, or gradually over multiple PRs.
|
||||
|
||||
First, add the dependency manager to your package.
|
||||
|
||||
<PackageCommand
|
||||
yarnArgs="add @rnx-kit/dep-check --dev"
|
||||
pnpmArgs="add -D @rnx-kit/dep-check"
|
||||
npmArgs="add --save-dev @rnx-kit/dep-check"
|
||||
/>
|
||||
|
||||
Add new script commands for convenience. We'll use these later.
|
||||
|
||||
```json title="package.json"
|
||||
{
|
||||
"scripts": {
|
||||
"check-dependencies": "rnx-dep-check",
|
||||
"fix-dependencies": "rnx-dep-check --write"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Next, generate the dependency manager configuration for your package. If your
|
||||
package produces a bundle, it's an `app`. Otherwise, it's a `library`.
|
||||
|
||||
<DepCheckInit />
|
||||
|
||||
Fix any React Native package versions that might have compatibility issues.
|
||||
|
||||
<PackageRunCommand args="fix-dependencies" />
|
||||
|
||||
**Review** and **test** your changes before committing. This is important, even
|
||||
for seemingly harmless updates.
|
||||
|
||||
## Automating Everything
|
||||
|
||||
Once onboarding is done, you're ready to set up automation.
|
||||
|
||||
Automation validates your React Native dependencies during builds and PRs. It
|
||||
also keeps the dependency manager up-to-date, including the built-in list of
|
||||
known/good React Native package versions and releases. This list can change
|
||||
frequently, based on the volatility of the React Native ecosystem.
|
||||
|
||||
### Builds
|
||||
|
||||
To validate dependencies during a build, you'll integrate the
|
||||
`check-dependencies` command into your build workflow.
|
||||
|
||||
In each of your React Native packages, add it to the `build` command:
|
||||
|
||||
```json title="package.json"
|
||||
{
|
||||
"scripts": {
|
||||
"build": "... existing-stuff ... && yarn fix-dependencies"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
_Replace `yarn` with `npm run` or `pnpm`, depending on your package manager._
|
||||
|
||||
When the validation process finds a compatibility problem, it fails with a
|
||||
detailed message, showing you what went wrong before you commit to the repo.
|
||||
|
||||
:::tip Using a Task Runner?
|
||||
|
||||
If you're using a task runner like [Lage](https://microsoft.github.io/lage) or
|
||||
[Gulp](https://gulpjs.com), you can go for a more sophisticated integration. The
|
||||
advantage being that `fix-dependencies` could run in its own "step" with
|
||||
isolated logging and error handling. And, you can run it in parallel with other
|
||||
tasks.
|
||||
|
||||
:::
|
||||
|
||||
### Pull Requests
|
||||
|
||||
To validate dependencies during PRs, you'll use the dependency manager to check
|
||||
every package in your repo.
|
||||
|
||||
Add the dependency manager to your repo's root package.json.
|
||||
|
||||
<PackageCommand
|
||||
yarnArgs="add @rnx-kit/dep-check --dev -W"
|
||||
pnpmArgs="add -D @rnx-kit/dep-check"
|
||||
npmArgs="add --save-dev @rnx-kit/dep-check"
|
||||
/>
|
||||
|
||||
Next, add this command to your PR loop. It runs the dependency manager from the
|
||||
root of the repo, scanning all packages. This include packages which haven't
|
||||
onboarded yet. For those, `--vigilant [version]` controls the target React
|
||||
Native release to use when checking compatibility.
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --vigilant 0.66" />
|
||||
|
||||
When a compatibility problem is found, the command fails with a non-zero exit
|
||||
code, which causes the PR loop to fail. This protects the repo from risky
|
||||
changes.
|
||||
|
||||
In the PR logs, you'll see a detailed report, in `diff` format, explaining what
|
||||
went wrong.
|
||||
|
||||
```diff
|
||||
error Found 3 violation(s) in @rnts/app:
|
||||
react-native "^0.66.0" -> "^0.66.0-0" (dependencies)
|
||||
react-native-macos "^0.66.0" -> "^0.66.0-0" (dependencies)
|
||||
react-native-windows "^0.66.0" -> "^0.66.0-0" (dependencies)
|
||||
- Current
|
||||
+ Expected
|
||||
|
||||
{
|
||||
"name": "@rnts/button",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"main": "src/index.ts",
|
||||
"typings": "lib/index.d.ts",
|
||||
"scripts": {
|
||||
"clean": "rimraf ./lib",
|
||||
"build": "yarn run clean && yarn run tsc && yarn run api-extract",
|
||||
"api-extract": "api-extractor run --local --verbose"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/api-extractor": "^7.19.4",
|
||||
"@office-iss/react-native-win32": "^0.66.0",
|
||||
"@rnx-kit/dep-check": "^1.12.9",
|
||||
"@types/react-native": "^0.66.0",
|
||||
- "rimraf": "^3.0.2",
|
||||
"react": "17.0.2",
|
||||
- "react-native": "^0.66.0",
|
||||
- "react-native-macos": "^0.66.0",
|
||||
- "react-native-windows": "^0.66.0",
|
||||
+ "react-native": "^0.66.0-0",
|
||||
+ "react-native-macos": "^0.66.0-0",
|
||||
+ "react-native-windows": "^0.66.0-0",
|
||||
+ "rimraf": "^3.0.2",
|
||||
"typescript": "^4.5.5"
|
||||
},
|
||||
"rnx-kit": {
|
||||
"reactNativeVersion": "^0.66",
|
||||
"reactNativeDevVersion": "^0.66.0",
|
||||
"kitType": "library",
|
||||
"capabilities": [
|
||||
"core",
|
||||
"core-android",
|
||||
"core-ios",
|
||||
"core-macos",
|
||||
"core-windows",
|
||||
"react"
|
||||
]
|
||||
+ },
|
||||
+ "peerDependencies": {
|
||||
+ "react": "17.0.2",
|
||||
+ "react-native": "^0.66.0-0",
|
||||
+ "react-native-macos": "^0.66.0-0",
|
||||
+ "react-native-windows": "^0.66.0-0"
|
||||
}
|
||||
}
|
||||
error Changes are needed to satisfy all requirements. Re-run with `--write` to have dep-check apply them.
|
||||
info Visit https://aka.ms/dep-check for more information about dep-check.
|
||||
error Command failed with exit code 1.
|
||||
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
|
||||
```
|
||||
|
||||
Fixing problems is automated, too! From your development terminal, run the same
|
||||
command with a `--write` parameter.
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --vigilant 0.66 --write" />
|
||||
|
||||
**Review** and **test** the fixes before pushing them to your PR.
|
||||
|
||||
### Dependency Manager Updates
|
||||
|
||||
The dependency manager comes with a built-in list of known/good React Native
|
||||
package versions and releases. Keeping the dependency manager up-to-date gives
|
||||
you the latest compatibilty data.
|
||||
|
||||
If you are in GitHub, use
|
||||
[Dependabot](https://docs.github.com/en/code-security/dependabot/dependabot-version-updates/about-dependabot-version-updates)
|
||||
to keep your packages up-to-date, including the dependency manager. If you host
|
||||
your repo elsewhere, you can use tools like [Snyk](https://snyk.io) instead.
|
||||
|
||||
When a dependency manager update happens, the associated PR loop may fail with
|
||||
incompatible package errors. This is OK. It means the built-in list of React
|
||||
Native package versions has changed, and you need to update your packages in
|
||||
response.
|
||||
|
||||
Run this command from the root of your repo. It uses the dependency manager to
|
||||
make the fixes automatically.
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --write" />
|
||||
|
||||
**Review** and **test** the fixes before pushing them to the PR with the
|
||||
dependency manager update.
|
||||
|
||||
## Upgrading React Native
|
||||
|
||||
When you're ready to upgrade to a new release of React Native (or downgrade to
|
||||
an old release), you can use the dependency manager to help you out.
|
||||
|
||||
First, update your PR loop definition. Find the
|
||||
`rnx-dep-check --vigilant [version]` command and change the target React Native
|
||||
version.
|
||||
|
||||
Then, run these commands from the root of your repo to change your React Native
|
||||
version and adjust all React Native dependencies to be compatible. Replace
|
||||
`[version]` with your target React Native version in `major.minor` format, such
|
||||
as "0.66" or "0.68".
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --set-version [version]" />
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --vigilant [version] --write" />
|
||||
|
||||
**Review** and **test** your packages thoroughly before merging these changes.
|
||||
|
||||
## Customization
|
||||
|
||||
Did you know that you can add your own packages to the dependency manager's
|
||||
built-in list?
|
||||
|
||||
If your repo uses React Native packages that aren't known to the dependency
|
||||
manager, add them to the list! Or if you want to align other dependencies
|
||||
automatically, add them to the list too!
|
||||
|
||||
First, write the list of packages you want to manage. Each one is expressed as a
|
||||
[capability](/docs/dependencies#capabilities-and-profiles). You can use a `.js`
|
||||
module, a `.json` file, or a module name.
|
||||
|
||||
```json title="dependency-profile.json"
|
||||
{
|
||||
"@types/node": {
|
||||
"name": "@types/node",
|
||||
"version": "^16.0.0",
|
||||
"devOnly": true
|
||||
},
|
||||
"chalk": {
|
||||
"name": "chalk",
|
||||
"version": "^4.1.0"
|
||||
},
|
||||
"0.63": {
|
||||
"native-base": {
|
||||
"name": "native-base",
|
||||
"version": "^3.3.11",
|
||||
"capabilities": ["react"]
|
||||
}
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
:::note
|
||||
|
||||
Look at `native-base` in the example above. It's wrapped in a `0.63` version
|
||||
tag. That means it only applies to React Native 0.63 and above.
|
||||
|
||||
:::
|
||||
|
||||
Next, configure each of your onboarded React Native packages to use the list.
|
||||
|
||||
```json title="package.json"
|
||||
{
|
||||
"rnx-kit": {
|
||||
"customProfiles": "path/to/dependency-profile.json"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Now its time to use the list. Run the dependency manager to update all of your
|
||||
packages.
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --vigilant 0.66 --customProfiles path/to/dependency-profile.json --write" />
|
||||
|
||||
**Review** and **test** the changes before continuing.
|
||||
|
||||
The last step is updating the automation. Each command needs an extra
|
||||
`--customProfiles [path]` parameter.
|
||||
|
||||
- Pull Requests: Change the `rnx-dep-check --vigilant [version]` command
|
||||
- Dependency Manager Updates: Change the `rnx-dep-check --write` command
|
||||
- Upgrading React Native: Change the
|
||||
`rnx-dep-check --vigilant [version] --write` command
|
||||
|
||||
## Finish Line
|
||||
|
||||
Congratulations! Your React Native apps and libraries are now up-to-date and
|
||||
compatible with each other! And they should stay that way thanks to the
|
||||
automation you've put in place!
|
||||
|
||||
<AmplifyCallout />
|
||||
|
||||
And, if you customized your list of dependencies, please consider
|
||||
[contributing](/docs/contributing) your work so that everyone can use it
|
||||
(including you). You can
|
||||
[create an **issue** with your customizations](https://github.com/microsoft/rnx-kit/issues/new?title=Dependency%20Manager%20Customizations&body=%3c%21--%20Please%20add%20your%20custom%20dependency%20list%20here.%20--%3e%0a%0a)
|
||||
or even [submit a **pull-request**](https://github.com/microsoft/rnx-kit).
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
# Getting Started
|
||||
|
||||
:::danger Draft Content
|
||||
|
||||
This page needs to be converted from a draft to real instructions.
|
||||
|
||||
Guides should be step-by-step instructions. Devs use them to complete a task.
|
||||
Doing, not learning. If you want to explain why, add notes to pages under "The
|
||||
Basics" (or add a new page there).
|
||||
|
||||
:::
|
||||
|
||||
This page should be a run-through of using the
|
||||
[`rnx-init`](https://github.com/microsoft/rnx-kit/issues/1263) command, but it
|
||||
hasn't been built yet. In the mean time, walk the reader through the manual
|
||||
steps that `rnx-init` will automate.
|
||||
|
||||
Start with dep-check init. This sets up a basic config and configures the
|
||||
dependency manager.
|
||||
|
||||
For App packages, create or update Metro/Babel config files. Metro:
|
||||
@rnx-kit/metro-config, @rnx-kit/metro-resolver-symlinks. Babel:
|
||||
@rnx-kit/babel-preset-metro-react-native.
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
import DepCheckInit from "./_dep-check-init.mdx";
|
||||
import PackageCommand from "./_package-command.mdx";
|
||||
import PackageRunCommand from "./_package-run-command.mdx";
|
||||
|
||||
# Getting Started
|
||||
|
||||
Welcome! A good place to start with any React Native package is the dependency
|
||||
manager. It keeps your React Native dependencies up-to-date and healthy using
|
||||
**automation** that ties into your developer workflows.
|
||||
|
||||
This guide gets you off and running with the dependency manager. To begin,
|
||||
choose a package that uses React Native and open a terminal window.
|
||||
|
||||
:::tip
|
||||
|
||||
If you want to learn more about this project before jumping in, head to the
|
||||
[introduction](/docs/introduction) page.
|
||||
|
||||
:::
|
||||
|
||||
Start by adding the dependency manager to your package.
|
||||
|
||||
<PackageCommand
|
||||
yarnArgs="add @rnx-kit/dep-check --dev"
|
||||
pnpmArgs="add -D @rnx-kit/dep-check"
|
||||
npmArgs="add --save-dev @rnx-kit/dep-check"
|
||||
/>
|
||||
|
||||
Next, generate the dependency manager configuration for your package. If your
|
||||
package produces a bundle, it's an `app`. Otherwise, it's a `library`.
|
||||
|
||||
<DepCheckInit />
|
||||
|
||||
Fix any React Native package versions that might have compatibility issues.
|
||||
|
||||
<PackageRunCommand args="rnx-dep-check --write" />
|
||||
|
||||
Review the changes. They should be limited to package.json and your Yarn / npm /
|
||||
pnpm lock file.
|
||||
|
||||
:::info Test Your Package
|
||||
|
||||
If any dependency versions changed, test your package to be sure everything is
|
||||
still in working order.
|
||||
|
||||
:::
|
||||
|
||||
Congratulations! You can now automatically maintain your package as the React
|
||||
Native ecosystem grows and changes. Take a look at the
|
||||
[dependency management](/docs/guides/dependency-management) guide to learn how.
|
||||
|
|
@ -4,19 +4,40 @@ React Native engineering is complicated, and the ecosystem changes quickly. The
|
|||
tools here are purpose-built to give you an exceptional developer experience,
|
||||
throughout the lifecycle of your React Native apps and libraries.
|
||||
|
||||
## Tools? I Like Tools!
|
||||
|
||||
Then you're in the right place! There are lots of tools here to help you.
|
||||
|
||||
Have you struggled to find the right combination of React Native dependencies
|
||||
that work well together and are compatble with each other? _And_ that match the
|
||||
React Native release you're using? There's
|
||||
[a tool for that](./guides/dependency-management)! It's all automated, too.
|
||||
|
||||
Can't use Metro because it doesn't understand symlinks? Yarn, npm, and pmpm all
|
||||
use symlinks these days. There's
|
||||
[a tool for that](./packages/metro-resolver-symlinks)! A few lines of
|
||||
configuration, and you're ready to go.
|
||||
|
||||
Do you use Metro and miss type-safe bundling and bundle-serving? There's a tool
|
||||
for that!
|
||||
|
||||
This just scratches the surface, and more are being built all the time.
|
||||
|
||||
## Using the Tools
|
||||
|
||||
Adding tools to a project or monorepo isn't a linear journey, and it won't be
|
||||
the same for everyone. Each situation is different, and has its own unique
|
||||
challenges and requirements.
|
||||
|
||||
There are two paths you can follow: command-line interface, and á la carte.
|
||||
You can use the command-line interface, which is a turn-key solution focused on
|
||||
common engineering tasks. You can also pick individual tools, integrating them
|
||||
into your repo wherever they are needed.
|
||||
|
||||
### Command-Line Interface
|
||||
|
||||
The most convenient way to go is the
|
||||
[command-line interface](https://github.com/microsoft/rnx-kit/tree/main/packages/cli).
|
||||
It brings many of the tools together to perform common tasks, like bundling and
|
||||
The
|
||||
[command-line interface](https://github.com/microsoft/rnx-kit/tree/main/packages/cli)
|
||||
brings many of the tools together to perform common tasks, like bundling and
|
||||
dependency management. The CLI helps developers get things done from their
|
||||
terminal, and fits nicely into CI loops and package script blocks.
|
||||
|
||||
|
|
@ -27,25 +48,51 @@ them as overrides. Package configuration is _also_ optional, though it is
|
|||
recommended. Configuration is how a package tells the CLI about itself. For
|
||||
example, a package can describe the options and paths to use during bundling.
|
||||
|
||||
```json title='Example configuration in package.json'
|
||||
{
|
||||
"rnx-kit": {
|
||||
"kitType": "app",
|
||||
"reactNativeVersion": "^0.66 || ^0.67",
|
||||
"capabilities": [
|
||||
"core-android",
|
||||
"core-ios",
|
||||
"core-macos",
|
||||
"core-windows",
|
||||
"react"
|
||||
],
|
||||
"bundle": true
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
With a configuration in place, you only need command-line parameters to override
|
||||
specific behaviors.
|
||||
|
||||
```bash title='Example commands'
|
||||
$ yarn react-native rnx-bundle --platform windows --entry-path ./src/index.ts
|
||||
// Only bundle windows, and use a test entry point
|
||||
$ yarn react-native rnx-bundle --platform windows --entry-path ./src/index-test.ts
|
||||
|
||||
$ yarn react-native rnx-start --project-root ./src
|
||||
// Run a bundle server on an unusual port
|
||||
$ yarn react-native rnx-start --port 23000
|
||||
|
||||
// Run the dependency manager, scanning all packages and targeting React Native 0.66
|
||||
$ yarn react-native rnx-dep-check --vigilant 0.66
|
||||
```
|
||||
|
||||
### Á la carte
|
||||
### Choosing Individual Tools
|
||||
|
||||
The tools are designed to be used individually, as well. Each has its own API,
|
||||
test suite, and change history. You can pick and choose the specific tools you
|
||||
need, and use them independently.
|
||||
The tools are designed to be used individually. You can choose
|
||||
[specific tools](./packages/overview), and use them however and wherever they
|
||||
are needed. Mix and match with other tools and the CLI.
|
||||
|
||||
Tools come with How-To guides, API documentation, and examples. Some even have
|
||||
notes on architectural choices. Each tool is released individually, as features
|
||||
are added and fixes are made.
|
||||
Each tool has its own TypeScript API. There is plenty of documentation,
|
||||
including How-To guides and examples to get you going.
|
||||
|
||||
### Web
|
||||
Tools are released on their own schedule, as features are added and fixes are
|
||||
made. Tools have their own test suite to keep quality high. And when you take a
|
||||
new drop, you can review the change history that is generated from each PR.
|
||||
|
||||
## Web
|
||||
|
||||
Many of these tools work with web projects, too! Some examples include the
|
||||
dependency manager and the plugins for Babel and ESLint.
|
||||
|
|
|
|||
|
|
@ -0,0 +1,7 @@
|
|||
# metro-resolver-symlinks
|
||||
|
||||
:::danger Draft Content
|
||||
|
||||
This page is a draft placeholder.
|
||||
|
||||
:::
|
||||
|
|
@ -34,7 +34,11 @@ const sidebars = {
|
|||
{
|
||||
type: "category",
|
||||
label: "Tools",
|
||||
items: ["packages/overview", "packages/typescript-react-native-compiler"],
|
||||
items: [
|
||||
"packages/overview",
|
||||
"packages/metro-resolver-symlinks",
|
||||
"packages/typescript-react-native-compiler",
|
||||
],
|
||||
},
|
||||
],
|
||||
|
||||
|
|
|
|||
|
|
@ -27,6 +27,7 @@
|
|||
--ifm-color-primary-lighter: #105fd9;
|
||||
--ifm-color-primary-lightest: #1a6eee;
|
||||
|
||||
--ifm-code-background: rgb(226, 227, 228);
|
||||
--ifm-code-padding-horizontal: 0.25rem;
|
||||
--ifm-code-padding-vertical: 0.25rem;
|
||||
--ifm-code-font-size: 95%;
|
||||
|
|
@ -47,6 +48,9 @@
|
|||
|
||||
--ifm-footer-background-color: rgb(var(--footer-background-color-rgb));
|
||||
|
||||
--ifm-tabs-padding-horizontal: 1rem;
|
||||
--ifm-tabs-padding-vertical: 0.2rem;
|
||||
|
||||
--ifm-transition-fast: 100ms;
|
||||
--ifm-transition-slow: 300ms;
|
||||
|
||||
|
|
@ -263,6 +267,10 @@ html[data-theme="dark"] .markdown li a:hover {
|
|||
border-bottom-color: rgb(var(--react-native-color-rgb));
|
||||
}
|
||||
|
||||
.alert a {
|
||||
--ifm-link-decoration: none;
|
||||
}
|
||||
|
||||
/*
|
||||
* Menus
|
||||
*/
|
||||
|
|
@ -277,10 +285,14 @@ html[data-theme="dark"] .markdown li a:hover {
|
|||
.menu__list-item-collapsible {
|
||||
font-size: 16px;
|
||||
font-weight: var(--ifm-font-weight-bold);
|
||||
padding: 5px 12px;
|
||||
padding: 0px 12px;
|
||||
}
|
||||
|
||||
/* child items under a dropdown menu title */
|
||||
.menu__list .menu__list {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.menu__list .menu__list .menu__link {
|
||||
font-size: 13px;
|
||||
font-weight: var(--ifm-font-weight-normal);
|
||||
|
|
@ -288,6 +300,10 @@ html[data-theme="dark"] .markdown li a:hover {
|
|||
padding: 3px 12px;
|
||||
}
|
||||
|
||||
.menu__list-item:not(:first-child) {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
/* selected child item */
|
||||
.menu__list .menu__list .menu__link--active {
|
||||
border-left-color: var(--ifm-menu-color-active);
|
||||
|
|
|
|||
|
|
@ -86,7 +86,10 @@
|
|||
"prettier": {
|
||||
"overrides": [
|
||||
{
|
||||
"files": "*.md",
|
||||
"files": [
|
||||
"*.md",
|
||||
"*.mdx"
|
||||
],
|
||||
"options": {
|
||||
"proseWrap": "always"
|
||||
}
|
||||
|
|
|
|||
Загрузка…
Ссылка в новой задаче