如何让Metro(React Native打包工具)忽略特定目录

11 浏览
0 Comments

如何让Metro(React Native打包工具)忽略特定目录

问题:

在命令行中运行react-native run-ios时,我的项目出现了一个@providesModule命名冲突的问题。这与另一个npm包esdoc自动生成的dist/目录冲突。我希望能够保留这个自动生成的目录,并让React Native packager忽略dist/目录。

错误信息:

[01/23/2017, 13:17:07]  构建Haste Map
    无法构建DependencyGraph: @providesModule命名冲突:
      重复的模块名称: ann
      路径: /Users/thurt/projects/example/package.json 与 /Users/thurt/projects/example/dist/esdoc/package.json 冲突
这个错误是由两个不同文件中具有相同名称的@providesModule声明引起的。
错误: @providesModule命名冲突:
  重复的模块名称: ann
  路径: /Users/thurt/projects/example/package.json 与 /Users/thurt/projects/example/dist/esdoc/package.json 冲突
这个错误是由两个不同文件中具有相同名称的@providesModule声明引起的。
    at HasteMap._updateHasteMap (/Users/thurt/projects/example/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:158:13)
    at p.getName.then.name (/Users/thurt/projects/example/node_modules/react-native/packager/react-packager/src/node-haste/DependencyGraph/HasteMap.js:133:31)

0
0 Comments

原因:在使用Metro(React Native packager)时,有时候我们希望忽略某些特定的目录,不包括在打包的范围内。然而,Metro默认会包含所有的文件和目录进行打包,因此我们需要找到一种方法来让Metro忽略指定的目录。

解决方法:在Expo中,我们可以使用以下代码来让Metro忽略指定的目录。

const { getDefaultConfig } = require('expo/metro-config');
const config = getDefaultConfig(__dirname);
module.exports = {
  ...config,
  resolver: {
    ...config.resolver,
    blockList: [config.resolver.blockList, /(\/amplify\/.*)$/],
  },
};

以上代码将在Metro的配置中添加一个`blockList`属性,用于指定需要忽略的目录。在这个例子中,我们忽略了名为`amplify`的目录。这样,当我们运行Metro打包时,它将忽略`amplify`目录的内容。

通过以上的解决方法,我们可以让Metro忽略指定的目录,从而更好地控制打包的范围。

0
0 Comments

如何使Metro(React Native packager)忽略某些目录

问题出现的原因:

在不同的React Native版本中,对于此配置的处理方式有所不同。在0.60版本中,将帮助函数“blacklist”重命名为“exclusionList”,在0.61版本中,配置条目“blacklistRE”改为“blockList”。在0.64.0版本中,这两个更改已经在React Native中实现。

解决方法:

1. 对于React Native >= 0.64至0.71(+?)版本:

在项目根目录创建metro.config.js文件,内容如下:

const exclusionList = require('metro-config/src/defaults/exclusionList');
module.exports = {
  resolver: {
    blockList: exclusionList([/dist\/.*/])
  }
};

2. 对于React Native >= 0.59,< 0.64版本:

在项目根目录创建metro.config.js文件,内容如下:

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  resolver: {
    blacklistRE: blacklist([/dist\/.*/])
  }
};

3. 对于React Native >= 0.57,< 0.59版本:

在项目根目录创建rn-cli.config.js文件,内容如下:

const blacklist = require('metro-config/src/defaults/blacklist');
module.exports = {
  resolver: {
    blacklistRE: blacklist([/dist\/.*/])
  }
};

4. 对于React Native >= 0.52,< 0.57版本:

在项目根目录创建rn-cli.config.js文件,内容如下:

const blacklist = require('metro').createBlacklist;
module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

5. 对于React Native >= 0.46,< 0.52版本:

在项目根目录创建rn-cli.config.js文件,内容如下:

const blacklist = require('metro-bundler').createBlacklist;
module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

6. 对于React Native < 0.46版本:

在项目根目录创建rn-cli.config.js文件,内容如下:

const blacklist = require('react-native/packager/blacklist');
module.exports = {
  getBlacklistRE: function() {
    return blacklist([/dist\/.*/]);
  }
};

除了0.59版本之前的所有版本外,还需要在CLI命令中使用--config选项来指定配置文件:

react-native run-ios --config=rn-cli.config.js

请注意,你的黑名单项可能已经被打包程序缓存中包含,因此如果你使用了黑名单,第一次运行打包程序时可能需要使用--reset-cache选项来重置缓存。

以上是关于如何使Metro(React Native packager)忽略某些目录的解决方法。根据不同的React Native版本,你可以选择相应的配置文件和配置项进行设置。希望这篇文章对你有所帮助!

0