Haul项目配置详解：从基础到高级应用-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_01197/article/details/148575031

Haul项目配置详解：从基础到高级应用

haul Haul is a command line tool for developing React Native apps, powered by Webpack 项目地址: https://gitcode.com/gh_mirrors/ha/haul

什么是Haul配置

Haul是一个React Native应用的打包工具，它通过haul.config.js配置文件来定义打包行为。这个文件是整个打包过程的核心，开发者可以通过它来定制化各种打包参数和功能。

基础配置解析

当你运行haul init命令时，系统会自动生成一个默认的配置文件模板：

import {makeConfig, withPolyfills} from '@haul-bundler/preset-0.59';

export default makeConfig({
  bundles: {
    index: {
      entry: withPolyfills('./index.js'),
    },
  },
});

这个基础配置包含了几个关键部分：

makeConfig函数：用于创建和规范化配置
bundles对象：定义应用的所有打包入口
withPolyfills函数：为入口文件添加React Native必要的polyfills

核心配置函数详解

makeConfig函数

makeConfig是配置系统的核心，它接收一个项目配置对象，并返回规范化后的配置：

makeConfig(projectConfig: ProjectConfig): NormalizedProjectConfig

projectConfig：开发者提供的配置对象
返回值：经过规范化处理、带有默认值的完整配置对象

withPolyfills函数

这个函数用于为入口文件添加React Native运行所需的polyfills：

withPolyfills(entry: string | string[], options?: {
  initializeCoreLocation?: string;
  additionalSetupFiles?: string[];
}): string[]

参数说明：

entry：入口文件路径或路径数组
options.initializeCoreLocation：自定义InitializeCore.js文件路径
options.additionalSetupFiles：额外的启动文件（仅适用于多包模式v2）

项目配置详解

服务器配置

server: {
  host?: string;  // 服务器主机，默认localhost
  port?: number;  // 服务器端口，默认8081
}

平台配置

platforms?: string[];  // 支持的平台列表，默认['ios', 'android']

模板配置

templates: {
  filename?: { 
    [platform: string]: string  // 各平台的打包文件名模板
  }
}

文件名模板支持以下占位符：

[bundleName]：包名
[platform]：平台
[mode]：模式（dev或prod）
[type]：包类型（default、app或dll）

包配置详解

每个包配置可以是一个对象或函数，支持以下属性：

基本属性

entry：入口文件路径（必需）
type：包类型（basic-bundle、indexed-ram-bundle或file-ram-bundle）
platform：目标平台
root：项目根目录
dev：是否为开发模式
minify：是否压缩代码
sourceMap：是否生成source map

多包模式专用属性

dll：是否为动态链接库
app：是否为应用包
dependsOn：依赖的DLL包列表

高级配置

transform：Webpack配置转换函数
maxWorkers：最大工作线程数
looseMode：严格模式控制

实用配置技巧

1. 支持自定义平台

要为项目添加自定义平台支持，需要配置platforms和templates.filename：

import {makeConfig, withPolyfills} from '@haul-bundler/preset-0.59';

export default makeConfig({
  platforms: ['custom', 'ios', 'android'],
  templates: {
    filename: {
      custom: '[bundleName].[platform].bundle',
    },
  },
  bundles: {
    index: {
      entry: withPolyfills('./index.js'),
    },
  },
});

2. 自定义Webpack配置

通过transform函数可以修改Webpack配置：

import path from 'path';

export default makeConfig({
  bundles: {
    index: {
      entry: withPolyfills('./index.js'),
      transform({ bundleName, env, runtime, config }) {
        config.resolve.alias = {
          ...config.resolve.alias,
          'my-alias': path.join(__dirname, 'src/myAlias.js'),
        };
      },
    },
  },
});

3. 多包模式配置

多包模式允许将应用拆分为多个独立包：

export default makeConfig({
  bundles: {
    host: {
      entry: withPolyfills('./src/host.js'),
      dependsOn: ['base_dll'],
    },
    base_dll: {
      entry: withPolyfills(['react', 'react-native']),
      dll: true,
      type: 'indexed-ram-bundle',
    },
    app1: {
      entry: './src/app1',
      dependsOn: ['base_dll'],
      app: true,
    },
  },
});