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

ahy6op9u  于 2023-11-18  发布在  React
关注(0)|答案(6)|浏览(106)

在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模块中不存在的Map
要解决这个问题,我们可以在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应用程序正在重新加载,但源代码中的更改不会在应用程序中反映出来。

vawmfj5a

vawmfj5a1#

我遇到了类似的问题,找到了haul
1.按照Haul入门说明进行操作。
1.使用file:../添加本地依赖项,例如:

// package.json
"dependencies": {
  "name-of-your-local-dependency": "file:../"
}

字符串
1.使用yarn --force重新安装node_modules
1.通过yarn start启动开发服务器(haul将替换启动脚本)
1.运行react-native run-android或/和react-native run-ios

unftdfkk

unftdfkk2#

我找到的答案没有一个对我有用,而且似乎符号链接不会很快得到支持(参见:https://github.com/facebook/metro/issues/1),所以我不得不手动操作。
我正在使用onchange npm包,并在我的本地包中运行它:onchange 'dist/**/*.js' -- cp -R ./dist ../../app/node_modules/@author/packagename
这对我实现开发和测试很有效,同时不会为生产版本破坏任何东西。我希望这能保存我的同行一些头痛的问题。

6l7fqoea

6l7fqoea3#

经过几年的研究,我们找到了一种可靠的方法来使用Yarn。
将您的本地依赖项添加到文件夹文件中:../CompanyPackages/package例如:

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

字符串
使用自定义metro.js.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)

uoifb46i

uoifb46i4#

你可以使用yalc。Yalc将模拟一个包的发布,而不实际发布它。
在全球范围内安装:
第一个月
在您的本地软件包中:
yalc publish
在应用程序中:
yalc add package-name && yarn
在对包进行了一些更改之后,您可以运行
yalc push
它会自动更新所有使用你本地软件包的应用

bxgwgixi

bxgwgixi5#

使用任何其他建议都无法让我自己的环境工作,但发现了一种效果很好的方法(尽管不理想),只需几行代码就可以轻松设置,而无需更改RN项目配置。
使用fs.watch递归地在你正在使用库的目录中进行更改,并在发生更改时复制更新:

import fs from 'fs'

const srcDir = `./your-library-directory`
const destDir = `../your-destination-directory`

fs.watch("./src/", {recursive: true}, () => {
  console.log('copying...')
  fs.cp(srcDir, destDir, { overwrite: true, recursive: true }, function() {
    console.log('copied')
  })
})

字符串

jtoj6r0c

jtoj6r0c6#

只需要两件事:1.Yarn--力2.Yarn开始
然后选择android for running选项

相关问题