如何让Metro(React Native打包工具)忽略特定目录
如何让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)
原因:在使用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忽略指定的目录,从而更好地控制打包的范围。
如何使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版本,你可以选择相应的配置文件和配置项进行设置。希望这篇文章对你有所帮助!