LukeParke/unicorn-utterances
1
0
Fork 0
mirror of https://github.com/LukeHagar/unicorn-utterances.git synced 2025-12-08 12:57:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

docs: namespace org

Browse Source
This commit is contained in:
Corbin Crutchley
2023-06-29 01:56:04 -07:00
parent 4897b6e294
commit d475d8a7d8
1 changed files with 16 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
content/blog/setup-a-react-native-monorepo/index.md
View File

@@ -282,7 +282,7 @@ Now that we've disabled Yarn PNP, we need to configure Yarn to install all deps
```json {4-10} ```json {4-10}
{ {
"name": "AppRoot", "name": "@your-org/app-root",
"version": "0.0.1", "version": "0.0.1",
"private": true, "private": true,
"workspaces": { "workspaces": {
@@ -296,6 +296,8 @@ Now that we've disabled Yarn PNP, we need to configure Yarn to install all deps
} }
``` ```
> Replace `your-org` with an NPM organization that your company owns. Otherwise, [you're susceptible with various attacks](https://medium.com/@alex.birsan/dependency-confusion-4a5d60fec610) without this org namespace.
Finally, let's configure `yarn` to install a fresh version of `node_modules` for each of our apps, so that React Native can easily detect our packages without having to configure Metro to find multiple `node_modules`. To do that, we'll add [a new line](https://yarnpkg.com/configuration/yarnrc#nmHoistingLimits) to our `.yarnrc.yml` file: Finally, let's configure `yarn` to install a fresh version of `node_modules` for each of our apps, so that React Native can easily detect our packages without having to configure Metro to find multiple `node_modules`. To do that, we'll add [a new line](https://yarnpkg.com/configuration/yarnrc#nmHoistingLimits) to our `.yarnrc.yml` file:
```yml ```yml
@@ -405,7 +407,7 @@ export default defineConfig({
build: { build: {
lib: { lib: {
entry: { entry: {
"shared-elements": path.resolve(__dirname, "src/index.tsx"), "@your-org/shared-elements": path.resolve(__dirname, "src/index.tsx"),
}, },
name: "SharedElements", name: "SharedElements",
fileName: (format, entryName) => `${entryName}-${format}.js`, fileName: (format, entryName) => `${entryName}-${format}.js`,
@@ -419,7 +421,7 @@ The `fileName`, `formats`, and `entry` files tell Vite to "build everything insi
```json {8-18} ```json {8-18}
{ {
"name": "shared-elements", "name": "@your-org/shared-elements",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"dev": "vite build --watch", "dev": "vite build --watch",
@@ -520,7 +522,7 @@ export default defineConfig({
build: { build: {
lib: { lib: {
entry: { entry: {
"shared-elements": path.resolve(__dirname, "src/index.tsx"), "@your-org/shared-elements": path.resolve(__dirname, "src/index.tsx"),
}, },
name: "SharedElements", name: "SharedElements",
fileName: (format, entryName) => `${entryName}-${format}.js`, fileName: (format, entryName) => `${entryName}-${format}.js`,
@@ -551,7 +553,7 @@ Because these packages aren't included in the bundle anymore, we need to flag to
```json {19-31} ```json {19-31}
{ {
"name": "shared-elements", "name": "@your-org/shared-elements",
"version": "0.0.1", "version": "0.0.1",
"scripts": { "scripts": {
"dev": "vite build --watch", "dev": "vite build --watch",
@@ -600,7 +602,7 @@ Now that we have our package setup in our monorepo, we need to tell Yarn to asso
{ {
"/* ... */": "...", "/* ... */": "...",
"dependencies": { "dependencies": {
"shared-elements": "workspace:*" "@your-org/shared-elements": "workspace:*"
} }
} }
``` ```
@@ -644,7 +646,8 @@ module.exports = (__dirname) => {
// Add to this list whenever a new React-reliant dependency is added // Add to this list whenever a new React-reliant dependency is added
moduleName.startsWith("react") || moduleName.startsWith("react") ||
moduleName.startsWith("@react-native") || moduleName.startsWith("@react-native") ||
moduleName.startsWith("@react-native-community") moduleName.startsWith("@react-native-community") ||
moduleName.startsWith("@your-org")
) { ) {
const pathToResolve = path.resolve( const pathToResolve = path.resolve(
__dirname, __dirname,
@@ -1132,6 +1135,12 @@ Let's take a look at two of the most popular tools to do this:
- TypeScript - TypeScript
- ESLint - ESLint
- Jest
## Setting up the `config` package
## Enforce Consistent TypeScript Usage with `tsconfig` {#tsconfig} ## Enforce Consistent TypeScript Usage with `tsconfig` {#tsconfig}