如何在 React Native 项目中使用符号链接？

Question

React-native https://github.com/facebook/metro/issues/1中尚未正式提供符号链接支持。

实际上可以将 package.json 中的符号链接与 npm （不是yarn）一起使用

{
  "name": "PROJECT",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start",
    "test": "jest"
  },
  "dependencies": {
    "my_module1": "file:../shared/my_module1/",
    "my_module2": "file:../shared/my_module2/",
    "react": "16.8.3",
    "react-native": "0.59.5",
  },
  "devDependencies": {
    "babel-jest": "24.7.1",
    "jest": "24.7.1",
    "metro-react-native-babel-preset": "0.53.1",
    "react-test-renderer": "16.8.3"
},
"jest": {
    "preset": "react-native"
  }
}

虽然我们会得到my_module1不存在于Haste模块的地图

为了解决这个问题，我们可以在 Metro.config.js（以前的 rn-cli.config.js）之前执行此操作

const path = require("path")

const extraNodeModules = {
  /* to give access to react-native-firebase for a shared module for example */
  "react-native-firebase": path.resolve(__dirname, "node_modules/react-native-firebase"),
}
const watchFolders = [
  path.resolve(__dirname, "node_modules/my_module1"),
  path.resolve(__dirname, "node_modules/my_module2"),
]

module.exports = {
  resolver: {
    extraNodeModules
  },
  watchFolders,
  transformer: {
    getTransformOptions: async () => ({
      transform: {
        experimentalImportSupport: false,
        inlineRequires: false
      }
    })
  }
}

不幸的是，它在react-native 0.59上不再工作应用程序正在重新加载，但源代码中的更改不会反映在应用程序中。任何人都有实现这一目标的线索吗？

Answer 1

经过几年的研究，我们找到了一种使用纱线的可靠方法。

在文件夹 file:../CompanyPackages/package 中添加本地依赖项，例如：

// package.json
"dependencies": {
  "local-package": "file:../CompanyPackages/local-package"
}

使用自定义的 Metro.config.js

const path = require("path")
const { mapValues } = require("lodash")

// Add there all the Company packages useful to this app
const CompanyPackagesRelative = {
  "CompanyPackages": "../CompanyPackages",
}

const CompanyPackages = mapValues(CompanyPackagesRelative, (relativePath) =>
  path.resolve(relativePath)
)

function createMetroConfiguration(projectPath) {
  projectPath = path.resolve(projectPath)

  const watchFolders = [...Object.values(CompanyPackages)]
  const extraNodeModules = {
    ...CompanyPackages,
  }

  // Should fix error "Unable to resolve module @babel/runtime/helpers/interopRequireDefault"
  // See https://github.com/facebook/metro/issues/7#issuecomment-508129053
  // See https://dushyant37.medium.com/how-to-import-files-from-outside-of-root-directory-with-react-native-metro-bundler-18207a348427
  const extraNodeModulesProxy = new Proxy(extraNodeModules, {
    get: (target, name) => {
      if (target[name]) {
        return target[name]
      } else {
        return path.join(projectPath, `node_modules/${name}`)
      }
    },
  })

  return {
    projectRoot: projectPath,
    watchFolders,
    resolver: {
      transform: {
        experimentalImportSupport: false,
        inlineRequires: true,
      },
      extraNodeModules: extraNodeModulesProxy,
    },
  }
}

module.exports = createMetroConfiguration(__dirname)