配置结构
通用配置
- cacheStores
- cacheVersion
- projectRoot
- watchFolders
- transformerPath
- watch
- reporter
- resetCache
- stickyWorkers
- maxWorkers
服务器配置
- port
- useGlobalHotkey
- enhanceMiddleware
- enableVisualizer
- runInspectorProxy
转换器配置
- asyncRequireModulePath
- babelTransformerPath
- dynamicDepsInPackages
- enableBabelRCLookup
- enableBabelRuntime
- getTransformOptions
- postMinifyProcess
- minifierPath
- minifierConfig
- optimizationSizeLimit
仅支持React Native
- assetPlugins
- assetRegistryPath
解析器选项
- assetExts
- sourceExts
- resolverMainFields
- extraNodeModules
- resolveRequest
- useWatchman
- blacklistRE
- hasteImplModulePath
- platforms
序列化选项
- getRunModuleStatement
- createModuleIdFactory
- getPolyfills
- postProcessBundleSourcemap
- getModulesRunBeforeMainModule
- processModuleFilter
metro-config的合并

有如下三种方式配置Metro(按照优先级排序):

metro.config.js
metro.config.json
package.json中的metro字段

你也可以自定义一个配置文件，在执行bundle脚本时使用--config <path/to/config>来指定配置文件路径

配置结构

配置基于concepts，每个步骤都有一个单独的配置项，Metro中常见的配置结构如下：

module.exports = {resolver: {/* 解析配置 */},transformer: {/* 转换配置 */},serializer: {/* 序列化配置 */},server: {/* 服务器配置 */}/* 通用配置 */
};

通用配置

cacheStores

Type: Array<CacheStore<TransformResult<>>

列出我们存放缓存的地方

cacheVersion

Type: string

可用于生成一个将整个Metro缓存失效的key

projectRoot

Type: string

项目根目录

watchFolders

Type: Array<string>

指定要监视的根目录文件夹

transformerPath

Type: string

要使用转换器模块所在的路径

watch

Type: boolean

是否监视所有的文件

reporter

Type: {update: () => void}

打包过程中用于记录打包状态

resetCache

Type: boolean

就是构建时是否重置缓存

stickyWorkers

Type: boolean

是否基于文件名创建workers

maxWorkers

Type: number

转换时可以并行的最大值

服务器配置

Metro服务器所使用的配置

port

Type: number

指定监听的端口号

useGlobalHotkey

Type: boolean

是否启用CMD+R热键来刷新bundle

enhanceMiddleware

Type: (Middleware, Server) => Middleware

将自定义中间件添加到Metro服务器的响应链

enableVisualizer

Type: boolean

启用metro-visualizer中间件（可从/visualizer获得）。这需要在您的项目中安装metro-visualizer(译者注：这个库有问题)

runInspectorProxy

Type: boolean (default: true)

在Metro中运行Inspector代理服务器，以便能够检查React Native代码。

转换器配置

asyncRequireModulePath

Type: string

指定处理异步的模块

babelTransformerPath

Type: string

指定一个自定义的转换器(only relevant when using the default transformerPath)

dynamicDepsInPackages

Type: string (throwAtRuntime or reject)

当发现一个动态的依赖库时应该怎么处理

enableBabelRCLookup

Type: boolean (default: true)

是否使用.babelrc配置文件

enableBabelRuntime

Type: boolean (default: true)

转换器是否使用@babel/transform/runtime插件

getTransformOptions

Type: GetTransformOptions

获取转换器默认选项

postMinifyProcess

Type: PostMinifyProcess

压缩之后要做什么事情

minifierPath

Type: string

指定转换后混淆器的路径

minifierConfig

Type: {[key: string]: mixed}

代码混淆配置

optimizationSizeLimit

Type: number

为大文件定义一个阈值(以字节为单位)以禁用一些昂贵的优化

仅支持React Native

assetPlugins

Type: Array<string>

可以修改Asset资源的模块列表

assetRegistryPath

Type: string

在哪里获取资源文件

解析器选项

assetExts

Type: Array<string>

可以包含在bundle中的Asset扩展名列表。例如，如果你想在bundle中包含['ttf']类型的asset，该列表就包含这个扩展名

sourceExts

Type: Array<string>

可以包含在bundle中的source扩展名列表。例如，如果你想在bundle中包含['ts']类型的source，该列表就包含这个扩展名

resolverMainFields

Type: Array<string>

Specify the fields in package.json files that will be used by the module resolver to do redirections when requiring certain packages. For example, using ['browser', 'main'] will use the browser field if it exists and will default to main if it doesn’t.(译者注：不理解，提供两个链接package.json文件说明)和RN的require过程

extraNodeModules

Type: {[name:string]:string}

当前项目提供额外引入的模块，配置格式为[{ 模块名 : 路径 }]

resolveRequest

Type: ?CustomResolver

该配置可以为null，可以通过该函数来决定是否忽略此次解析，

useWatchman

Type: boolean

如果设置为false, 将禁止Metro使用watchman，即使它被安装。该配置仅仅对RN项目有用

blacklistRE

Type: RegExp

通过正则指定打包的黑名单

hasteImplModulePath

Type: string

指定haste resolver(译者注：我也不知道是什么鬼)

platforms

Type: Array<string>

需要注意的其他平台，例如，如果你想在这里添加"custom"平台并且模块使用.custom.js结尾，应该在这里加上custom

序列化选项

getRunModuleStatement

Type: (number | string) => string

指定附加在包末尾的出事初始require语句的格式，默认情况下是__r(${moduleId});

createModuleIdFactory

Type: () => (path: string) => number

用于为require语句生成模块id

getPolyfills

Type: ({platform: ?string}) => $ReadOnlyArray<string>

要包含在包中的可选Polyfill列表，默认有一些常用的Polyfill，比如Number,String,Array,Object…

postProcessBundleSourcemap

Type: PostProcessBundleSourcemap

该函数可以在bundle和sourcemap写入文件之前，修改内容，适用于整个bundle包

getModulesRunBeforeMainModule

Type: (entryFilePath: string) => Array<string>

在引用主模块前要引用的一些模块(要指定每个模块的绝对路径)，另外，当这些模块已经作为bundle的一部分时，才会加载其他的reqire语句

processModuleFilter

Type: (module: Array<Module>) => boolean

过滤掉特定模块

metro-config的合并

使用metro-config，可以将多个配置文件合并在一起。(译者注：并不是用于做bundle包的拆分，猜测用于将默认配置和自定义的配置合在一块，这样可以避免自定义配置里重复写一些默认的配置)

Method	Description
`mergeConfig(...configs): MergedConfig`	返回两个或多个配置对象的合并配置

注意:

基于数组和基于函数的配置参数不会深度合并，而是覆盖任何预先存在的配置参数

允许覆盖和删除在您的环境中可能不需要的默认配置参数，例如platforms或getModulesRunBeforeMainModule

举个栗子

// metro.config.js
const { mergeConfig } = require("metro-config");const configA = {resolver: {/* resolver options */},transformer: {/* transformer options */},serializer: {/* serializer options */},server: {/* server options */}/* general options */
};const configB = {resolver: {/* resolver options */},transformer: {/* transformer options */},serializer: {/* serializer options */},server: {/* server options */}/* general options */
};module.exports = mergeConfig(configA, configB);

metro-Configuration相关推荐

Ubuntu20.04安装zabbix以及Cannot create the configuration file解决
添加zabbix的扩展源 echo 'deb http://mirrors.aliyun.com/zabbix/zabbix/5.0/ubuntu/dists/ focal main' >> ...
参照STM32时钟树配置STM32CubeMX Clock Configuration（STM32L011G4U6为例）
微控制器(处理器)的运行必须要依赖周期性的时钟脉冲来驱动--往往由一个外部晶体振荡器提供时钟输入为始,最终转换为多个外部设备的周期性运作为末,这种时钟"能量"扩散流动的路径,犹如大 ...
SpringBoot复习：2（@Configuration注解）
@Configuration注解 @Configuration注解的作用是代替以前我们使用的xml配置文件,被注解的类就是配置类,其内部包含有一个或多个被@Bean注解的方法,这些方法将会被Annot ...
《深入理解Android：Wi-Fi，NFC和GPS》章节连载[节选]--第六章深入理解wi-Fi Simple Configuration...
为什么80%的码农都做不了架构师?>>> 首先感谢各位兄弟姐妹们的耐心等待.本书预计在4月上市发售.从今天开始,我将在博客中连载此书的一些内容.注意,此处连载的是未经出版社编辑 ...
Wireless-N Configuration
Wireless-N Configuration/Zh Cn Contents [hide] 1 关于Wireless N的一般信息 2 基本设置 2.1 20 MHz vs 40 MHz 2.1.1 ...
关闭Windows 8的metro UI的方法汇总
http://www.ssdax.com/570.html 上面就是windows8新出现的Metro UI,点击开始菜单就会出现,取代了windows长久以来的开始菜单,有了非常大的突破不过我发现 ...
检测到包降级: Microsoft.Extensions.Configuration.Abstractions 从 2.1.1 降 2.1.0
解决方法:工具-nuget管理包-程序管理控制台-选择项目- 执行 -Install-Package Microsoft.Extensions.Configuration.Abstractions ...
Could not apply the stored configuration for monitors 解决办法
Could not apply the stored configuration for monitors 解决办法: $ sudo rm -rf ~/.config/monitors.xml 重启电 ...
MahApps.Metro
ModernUI for WPF Mahapps.metro home Mahapps.metro Quick start Mahapps.metro controls 转载于:https://www ...
xx.xib: error: Illegal Configuration: Safe Area Layout Guide before iOS 9.0报错问题解决
之前是用xcode8.3.3创建的工程最近升级到Xcode9.0 遇见了这个问题在Xcode 9.0以上新建xib文件会报错 xx.xib: error: Illegal Configuratio ...

metro-Configuration

目录

配置结构

通用配置

cacheStores

cacheVersion

projectRoot

watchFolders

transformerPath

watch

reporter

resetCache

stickyWorkers

maxWorkers

服务器配置

port

useGlobalHotkey

enhanceMiddleware

enableVisualizer

runInspectorProxy

转换器配置

asyncRequireModulePath

babelTransformerPath

dynamicDepsInPackages

enableBabelRCLookup

enableBabelRuntime

getTransformOptions

postMinifyProcess

minifierPath

minifierConfig

optimizationSizeLimit

仅支持React Native

assetPlugins

assetRegistryPath

解析器选项

assetExts

sourceExts

resolverMainFields

extraNodeModules

resolveRequest

useWatchman

blacklistRE

hasteImplModulePath

platforms

序列化选项

getRunModuleStatement

createModuleIdFactory

getPolyfills

postProcessBundleSourcemap

getModulesRunBeforeMainModule

processModuleFilter

metro-config的合并

metro-Configuration相关推荐

最新文章

热门文章