feat: 项目 monorepo 改造

.editorconfig

@@ -0,0 +1,12 @@
+# http://editorconfig.org
+root = true
+
+[*]
+indent_style = space
+indent_size = 2
+charset = utf-8
+trim_trailing_whitespace = true
+insert_final_newline = true
+
+[*.md]
+trim_trailing_whitespace = false

.eslintrc.js

@@ -0,0 +1,76 @@
+module.exports = {
+  extends: ['plugin:react/recommended', 'plugin:@typescript-eslint/recommended', "plugin:@typescript-eslint/eslint-recommended"],
+  parser: '@typescript-eslint/parser',
+  plugins: ['@typescript-eslint', "react-native"],
+  rules: {
+    'arrow-parens': ['error', 'as-needed'], // 箭头函数单参数时不使用括号 多参数时使用括号
+    'object-curly-newline': [
+      // 强制在花括号内使用一致的换行符
+      'off',
+      { minProperties: 2 }, // 属性数量超过2时强制使用换行符
+    ],
+    'object-property-newline': [
+      // 强制将对象的属性放在不同的行上
+      'off',
+      { allowAllPropertiesOnSameLine: true }, // 禁止所有的属性都放在同一行
+    ],
+
+    'object-curly-spacing': ['error', 'always'], // 要求大括号与内容间总是有空格
+    'dot-location': ['error', 'property'], // 强制在点号之后换行 object-跟随对象 property-跟随属性
+    'curly': 'error', // 强制所有控制语句使用一致的括号风格
+    'import/no-commonjs': ['off'], // 禁止commonjs写法 如module.exports
+    'complexity': ['off', 16], // 限制圈复杂度 阈值3 如if else if else语句最多嵌套三层 TODO: 需要放开
+    'react/jsx-indent-props': 0, // 不验证jsx缩进
+    'no-unused-vars': [
+      // 不允许未使用的变量
+      'error',
+      { varsIgnorePattern: 'Taro' }, // Taro框架要求在使用class组件的时候必须在文件中声明Taro 但是不是所有文件都会显式使用到 所以忽略
+    ],
+    'arrow-spacing': [
+      // 要求箭头函数的箭头之前或之后有空格
+      'error',
+      { before: true, after: true },
+    ],
+    'prefer-arrow-callback': ['error'], // 要求使用箭头函数作为回调
+    'react/no-string-ref': 0, // 不允许字符串ref
+    'react/jsx-filename-extension': [
+      // 识别jsx的文件扩展名
+      1,
+      { extensions: ['.js', '.jsx', '.tsx'] },
+    ],
+    '@typescript-eslint/no-unused-vars': [
+      // 禁止未使用的变量
+      'error',
+      { varsIgnorePattern: 'Taro' }, // 忽略正则
+    ],
+    '@typescript-eslint/member-delimiter-style': [
+      'error',
+      {
+        multiline: {
+          delimiter: 'none',
+          requireLast: false,
+        },
+        singleline: {
+          delimiter: 'semi',
+          requireLast: false,
+        },
+      },
+    ],
+    '@typescript-eslint/explicit-function-return-type': ['off'], // function和class的方法必须有明确的返回值
+    '@typescript-eslint/no-empty-function': ['warn'], // 禁止空函数体
+    '@typescript-eslint/no-var-requires': 0, // 在import引用之外禁止require引用
+    'import/first': 0, // import必须位于文件头部
+    'import/newline-after-import': 0, // import之后必须隔行
+    '@typescript-eslint/no-explicit-any': 0, // 禁止any声明
+    '@typescript-eslint/interface-name-prefix': 0, // interface名必须以大写字母I开头
+    '@typescript-eslint/camelcase': 0, // 变量必须使用驼峰命名
+    '@typescript-eslint/no-this-alias': 0, // 禁止将this赋值给其他变量
+  },
+  parserOptions: {
+    ecmaFeatures: {
+      jsx: true,
+    },
+    useJSXTextNode: true,
+    project: ['tsconfig.json', 'apps/**/tsconfig.json', 'packages/**/tsconfig.json'],
+  },
+}

.gitignore

@@ -1,14 +1,18 @@
-node_modules/
-.expo/
-dist/
-npm-debug.*
-*.jks
-*.p8
-*.p12
-*.key
-*.mobileprovision
-*.orig.*
-web-build/
-
-# macOS
+node_modules
 .DS_Store
+.idea
+
+lib
+dist
+dist-ssr
+docs
+coverage
+test-results
+.pnpm-store
+tsconfig.tsbuildinfo
+
+.env
+*.local
+*.cache
+*error.log
+*debug.log

.npmrc

@@ -0,0 +1,2 @@
+node-linker=hoisted
+strict-peer-dependencies=false

.watchmanconfig

@@ -0,0 +1 @@
+{}

apps/expo/.gitignore

@@ -0,0 +1,14 @@
+node_modules/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

apps/expo/App.tsx

@@ -0,0 +1,3 @@
+import App from '@packages/app'
+
+export default App

apps/expo/AppEntry.js

@@ -0,0 +1,8 @@
+import { registerRootComponent } from 'expo';
+
+import App from './App';
+
+// registerRootComponent calls AppRegistry.registerComponent('main', () => App);
+// It also ensures that whether you load the app in Expo Go or in a native build,
+// the environment is set up appropriately
+registerRootComponent(App);

app.json → apps/expo/app.json

@@ -18,7 +18,7 @@
       "**/*"
     ],
     "ios": {
-      "supportsTablet": true
+      "supportsTablet": false
     },
     "android": {
       "adaptiveIcon": {

apps/expo/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: [['babel-preset-expo', { jsxRuntime: 'automatic' }]],
+    plugins: ['react-native-reanimated/plugin']
+  };
+};

apps/expo/metro.config.js

@@ -0,0 +1,22 @@
+// Learn more https://docs.expo.io/guides/customizing-metro
+/**
+ * @type {import('expo/metro-config')}
+ */
+const { getDefaultConfig } = require('expo/metro-config');
+const path = require('path');
+
+// Find the workspace root, this can be replaced with `find-yarn-workspace-root`
+const workspaceRoot = path.resolve(__dirname, '../..');
+const projectRoot = __dirname;
+
+const config = getDefaultConfig(projectRoot);
+
+// 1. Watch all files within the monorepo
+config.watchFolders = [workspaceRoot];
+// 2. Let Metro know where to resolve packages, and in what order
+config.resolver.nodeModulesPaths = [
+  path.resolve(projectRoot, 'node_modules'),
+  path.resolve(workspaceRoot, 'node_modules'),
+];
+
+module.exports = config;

apps/expo/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@apps/expo",
+  "version": "1.0.0",
+  "main": "AppEntry.js",
+  "scripts": {
+    "start": "expo start -c",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "eject": "expo eject"
+  },
+  "dependencies": {
+    "@packages/app": "workspace:*",
+    "babel-preset-expo": "^9.1.0",
+    "expo": "^45.0.0",
+    "expo-splash-screen": "~0.15.1",
+    "expo-status-bar": "~1.3.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-native": "0.68.2",
+    "react-native-web": "0.17.7",
+    "react-native-reanimated": "^2.8.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@types/react": "^17.0.39",
+    "@types/react-native": "^0.67.7",
+    "typescript": "^4.6.4"
+  },
+  "private": true
+}

apps/expo/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "extends": "expo/tsconfig.base",
+  "compilerOptions": {
+    "allowJs": true,
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "experimentalDecorators": true,
+    "forceConsistentCasingInFileNames": true,
+    "isolatedModules": true,
+    "jsx": "react",
+    "module": "esnext",
+    "moduleResolution": "node",
+    "noEmit": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "resolveJsonModule": true,
+    "strict": true,
+    // Solves https://github.com/DefinitelyTyped/DefinitelyTyped/issues/16825
+    // "skipLibCheck": true,
+    "target": "esnext"
+  },
+  "exclude": ["node_modules"]
+}

apps/next/.gitignore

@@ -0,0 +1,15 @@
+node_modules/
+.next/
+.expo/
+dist/
+npm-debug.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+*.orig.*
+web-build/
+
+# macOS
+.DS_Store

apps/next/App.tsx

@@ -0,0 +1 @@
+export { default } from './pages'

apps/next/app.json

@@ -0,0 +1,4 @@
+{
+  "name": "next",
+  "displayName": "next"
+}

apps/next/babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+  presets: ["@expo/next-adapter/babel", ["babel-preset-expo", { jsxRuntime: "automatic" }]],
+  plugins: [
+    ["@babel/plugin-proposal-class-properties", { "loose": true }],
+    ["@babel/plugin-proposal-private-methods", { "loose": true }],
+    ["@babel/plugin-proposal-private-property-in-object", { "loose": true }],
+    "react-native-reanimated/plugin"
+  ]
+};

apps/next/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/next/next.config.js

@@ -0,0 +1,24 @@
+const withPlugins = require('next-compose-plugins');
+const withImages = require('next-images');
+const withFonts = require('next-fonts');
+const { withExpo } = require('@expo/next-adapter');
+
+const withTM = require('next-transpile-modules')([
+  '@packages/app'
+]);
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  webpack5: true
+};
+
+module.exports = withPlugins(
+  [
+    withTM,
+    [withImages, { projectRoot: __dirname }],
+    [withFonts, { projectRoot: __dirname }],
+    [withExpo, { projectRoot: __dirname }],
+  ],
+  nextConfig
+);

apps/next/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "@apps/next",
+  "version": "0.0.1",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@packages/app": "workspace:*",
+    "next": "~12.1.0",
+    "next-fonts": "^1.5.1",
+    "next-images": "^1.8.4",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-native-reanimated": "^2.8.0",
+    "setimmediate": "^1.0.5"
+  },
+  "devDependencies": {
+    "@babel/plugin-proposal-class-properties": "^7.17.12",
+    "@babel/plugin-proposal-private-methods": "^7.17.12",
+    "@babel/plugin-proposal-private-property-in-object": "^7.17.12",
+    "@expo/next-adapter": "^4.0.5",
+    "@types/node": "^17.0.34",
+    "babel-preset-expo": "^9.1.0",
+    "eslint-config-next": "^12.1.0",
+    "next-compose-plugins": "^2.2.1",
+    "next-transpile-modules": "^9.0.0"
+  }
+}

apps/next/pages/_document.tsx

@@ -0,0 +1 @@
+export { default } from "@expo/next-adapter/document"

apps/next/pages/index.tsx

@@ -0,0 +1,7 @@
+// Many libraries in the React ecosystem use the setImmediate() API (like react-native-reanimated),
+// which Next.js doesn't polyfill by default.
+import 'setimmediate';
+
+import App from '@packages/app';
+
+export default App;

apps/next/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../tsconfig.base",
+  "compilerOptions": {
+    "incremental": true,
+    "jsx": "preserve",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "skipLibCheck": true
+  },
+  "include": [
+    "next-env.d.ts",
+    "public",
+    "pages"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}