关于前端:在reactnative-项目中使用yarn-link

最近把我的项目中积淀进去的一些工具函数整理出来编写成一个代码仓库，筹备先在本地把每个函数都调试一遍之后再公布，须要应用yarn link 或者npm link 在测试的我的项目中 link 指定的本地依赖库，在这过程中遇到一些问题

问题

在 React Native 我的项目下无奈应用yarn link 或者npm link 来 link 本地的依赖，起因是 RN 应用的打包工具 Metro 不反对 symlinks

逛了一番 issues 后，找到了一个可行的解决方案

解决方案

应用第三方库 metro-symlinked-deps

这个库能够用来自定义 metro 的打包配置，应用办法能够参考 metro-symlinked-deps 的文档

这里贴一下 metro-symlinked-deps 给出的例子

// metro.config.js

const {applyConfigForLinkedDependencies,} = require('@carimus/metro-symlinked-deps');

module.exports = applyConfigForLinkedDependencies(
    {
        transformer: {getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: false,
                },
            }),
        },
    },
    {
        projectRoot: __dirname,
        blacklistLinkedModules: ['react-native'],
    },
);

然而在应用这个库的时候也遇到了一些 问题

另一个问题

一开始应用这个库并没有解决yarn link 有效的问题。确定本人配置没错之后，就开始寻找问题。因为看到有人说这个库有用，有人说没用。就开始看这个库的源码，看看它到底干了啥

于是，发现这个库会拿到我的项目下node_modules 外面应用 symlink 的依赖的实在地址。

那么按理来说我用yarn link 是合乎他的这个逻辑的，并且我应用 ls -l 命令查看我 link 的本地依赖也是正确返回了软链的地址。于是带着疑难我查看了这个库用来收集 link 的依赖的办法，最终发现这个库应用了 get-dev-paths 来查看 link 的依赖

/**
 * Resolve all detected linked directories to unique absolute paths without a trailing slash.
 *
 * @param {string} projectRoot
 */
function resolveDevPaths(projectRoot) {
    return Array.from(
        new Set(getDevPaths(projectRoot)
                .map((linkPath) => {return `${fs.realpathSync(linkPath)}`.replace(/\/+$/, '');
                })
                .filter((absLinkPath) => !!absLinkPath),
        ),
    );
}

所以眼光来到了 get-dev-paths

首先看看它是如何返回 link 的依赖的

addPath = function(dep) {
  var target;
  if (!fs.lstatSync(dep).isSymbolicLink()) {return;}
  try {target = realpath.sync(dep);
  } catch (error) {
    err = error;
    return typeof opts.onError === "function" ? opts.onError(err) : void 0;
  }
  // Skip target paths with "/node_modules/" in them.
  if (nodeModulesRE.test(target)) {return typeof opts.onError === "function" ? opts.onError(new Error(`Symlink leads to nothing: '${dep}'`)) : void 0;
  }
  if (opts.preserveLinks) {paths.push(dep);
  }
  if (!visited.has(target)) {visited.add(target);
    if (!opts.preserveLinks) {paths.push(target);
    }
    queue.push(dep);
  }
};

addPath 办法通过判断一个文件门路是否是软链，并文件的实在门路增加最终的输入后果中

那么addPath 在哪调用的呢，在这个库的源码里发现上面这段代码

return fs.readdirSync(depsDir).forEach(function(name) {
        var scope;
        if (name[0] === '.') { // Skip hidden directories.
          return;
        }
        if (name[0] === '@') {
          scope = name;
          fs.readdirSync(path.join(depsDir, name)).forEach(function(name) {if (deps[name = scope + '/' + name]) {return addPath(path.join(depsDir, name));
            }
          });
        } else if (deps[name]) {addPath(path.join(depsDir, name));
        }
      });

下面代码中 deps[name] 的deps 是获取了我的项目目录下的 package.json 中的 dependencies 里的依赖，并且与fs.readdirSync 办法获取的文件名来比对，如果文件名呈现在了 dependencies 就执行addPath 办法来获取实在门路并增加到最终后果中。

于是我发现，我应用 yarn link 的依赖的名字并没有呈现在我的package.json 中的dependencies 里，于是我在package.json 中的dependencies 里增加了本地依赖的名字

"dependencies": {"myPackageName" : "*"},

再次尝试react-native start，终于编译胜利。

One more thing

到这里就能够开始测试本人的本地依赖了，然而还有一个小小问题，可能会报错。本地依赖的依赖找不到了。这时候须要改一下配置

// metro.config.js

const {applyConfigForLinkedDependencies,} = require('@carimus/metro-symlinked-deps');

module.exports = applyConfigForLinkedDependencies(
    {
        transformer: {getTransformOptions: async () => ({
                transform: {
                    experimentalImportSupport: false,
                    inlineRequires: false,
                },
            }),
        },
    },
    {
        projectRoot: __dirname,
        blacklistLinkedModules: ['react-native'],
        // 新增这个
          resolveNodeModulesAtRoot: true 
    },
);

终于能够在 React Native 我的项目中调试本地依赖了～

最初

以上是我寻找在 React Native 我的项目中应用 yarn link 的解决办法的全过程。

参考

• metro-symlinked-deps
• get-dev-paths

本文作者：Roy Luo

本文链接：在 react-native 我的项目中应用 yarn link