tessl/npm-tarojs--webpack-runner

Webpack runner for Taro that transforms Taro compilation configurations into Webpack configurations for H5/web builds

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

@tarojs/webpack-runner

Name: tessl/npm-tarojs--webpack-runner
Author: tessl

@tarojs/webpack-runner is a Webpack runner for the Taro cross-platform development framework that transforms Taro compilation configurations into Webpack configurations for H5/web builds. It serves as the bridge between @tarojs/cli and Webpack, handling the complete compilation pipeline from Taro source code to web-ready applications.

Package Information

Package Name: @tarojs/webpack-runner
Package Type: npm
Language: TypeScript
Installation: npm install @tarojs/webpack-runner

Core Imports

// ES6 imports
import webpackRunner from "@tarojs/webpack-runner";
import { AppHelper } from "@tarojs/webpack-runner";

// Import utility functions
import { 
  addLeadingSlash, 
  addTrailingSlash, 
  stripBasename, 
  formatOpenHost, 
  parsePublicPath 
} from "@tarojs/webpack-runner";

// Import types (TypeScript only)
import type { BuildConfig, TEntry, IOptions } from "@tarojs/webpack-runner";

For CommonJS:

// CommonJS imports
const webpackRunner = require("@tarojs/webpack-runner").default;
const { AppHelper, addLeadingSlash, formatOpenHost } = require("@tarojs/webpack-runner");

For utility functions:

// Utility imports (from subdirectories)
import { makeConfig } from "@tarojs/webpack-runner/dist/utils/chain";

Basic Usage

import webpackRunner from "@tarojs/webpack-runner";

// Basic production build
await webpackRunner("/path/to/app", {
  buildAdapter: "h5",
  sourceRoot: "src",
  outputRoot: "dist",
  isWatch: false,
});

// Development build with watch
await webpackRunner("/path/to/app", {
  buildAdapter: "h5",
  sourceRoot: "src", 
  outputRoot: "dist",
  isWatch: true,
  devServer: {
    port: 3000,
    host: "localhost"
  }
});

Architecture

@tarojs/webpack-runner is built around several key components:

Main Runner: Default export function that orchestrates the entire build process
Configuration System: Modular webpack configuration generation for different build modes
App Helper: Utility class for parsing and managing Taro app configurations
Plugin System: Custom webpack plugins for Taro-specific transformations
Chain Customization: Support for webpack-chain based configuration customization

Capabilities

Main Build Runner

Primary function that executes the complete Taro H5 build process, handling both development and production modes.

function webpackRunner(appPath: string, config: BuildConfig): Promise<void>;

Main Build Runner

Path and URL Utilities

Utility functions for handling paths, URLs, and routing in Taro H5 applications.

/**
 * Adds leading slash to URL if missing
 */
function addLeadingSlash(url?: string): string;

/**
 * Adds trailing slash to URL if missing  
 */
function addTrailingSlash(url?: string): string;

/**
 * Removes leading basename from path
 */
function stripBasename(path?: string, prefix?: string): string;

/**
 * Removes trailing slash from path
 */
function stripTrailingSlash(path?: string): string;

/**
 * Adds .html suffix to path
 */
function addHtmlSuffix(path?: string): string;

/**
 * Formats host for opening in browser, converts 0.0.0.0 to local IP
 */
function formatOpenHost(host: string): string;

/**
 * Parses and normalizes public path configuration
 */
function parsePublicPath(publicPath?: string): string;

/**
 * Generates HTML script for responsive font-size based on pxtransform options
 */
function parseHtmlScript(pxtransformOption?: IPostcssOption['pxtransform']): string | undefined;

Webpack Chain Customization

Internal webpack chain customization system used by the build process.

function makeConfig(buildConfig: BuildConfig): Promise<BuildConfig & { sassLoaderOption: any }>;

Webpack Chain Customization

App Configuration Management

Helper class for parsing Taro app configurations, managing pages, components, and build entry points.

class AppHelper {
  constructor(entry: TEntry, options: Partial<IOptions>);
  readonly appEntry: string;
  readonly appConfig: AppConfig;
  readonly pages: Set<{ name: string; path: string }>;
  readonly comps: Set<{ name: string; path: string }>;
  readonly pagesConfigList: Map<string, string>;
  readonly compsConfigList: Map<string, string>;
  getConfigFilePath(filePath: string): string;
  clear(): void;
}

App Configuration Management

Build Configuration

Configuration interface and utilities for defining Taro H5 build parameters and webpack customization options.

interface BuildConfig extends IProjectBaseConfig, IH5Config {
  buildAdapter: string;
  entry?: webpack.Entry;
  entryFileName?: string;
  runtimePath?: string | string[];
  isBuildNativeComp?: boolean;
  withoutBuild?: boolean;
  onCompilerMake: (compilation: any) => Promise<any>;
  onParseCreateElement: (nodeName: any, componentConfig: any) => Promise<any>;
  modifyComponentConfig: Func;
}

Build Configuration

Types

type TEntry = string | string[] | webpack.Entry | webpack.EntryFunc;

type CustomWebpackConfig = FunctionLikeCustomWebpackConfig | webpack.Configuration;

type FunctionLikeCustomWebpackConfig = (
  webpackConfig: webpack.Configuration,
  webpack: any
) => webpack.Configuration;

interface IOptions {
  sourceDir: string;
  entryFileName: string;
  frameworkExts: string[];
  modifyAppConfig?: Func;
}

interface Option {
  [key: string]: any;
}

interface Chain {
  [key: string]: any;
}

// External types from @tarojs/taro
type Func = (...args: any[]) => any;

interface AppConfig {
  pages?: string[];
  components?: string[]; // For native component builds only
  window?: object;
  tabBar?: object;
  subPackages?: object[];
  subpackages?: object[]; // Alternative spelling
  entryPagePath?: string;
  [key: string]: any;
}

// Additional interfaces for utility functions
interface IPostcssOption {
  pxtransform?: {
    config?: {
      maxRootSize?: number;
      minRootSize?: number;
      baseFontSize?: number;
      designWidth?: number | ((input: any) => number);
      deviceRatio?: Record<number, number>;
      targetUnit?: 'rem' | 'px';
    };
  };
}