tessl/npm-dcloudio--uni-mp-baidu
Baidu Mini Program runtime and compiler support for the uni-app cross-platform development framework
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
Securityby
Pending
The risk profile of this skill
build-configuration.mddocs/
Build Configuration
Configuration and compilation utilities for transforming Vue.js applications into Baidu Mini Program format during the build process. This module provides webpack integration, file processing, and platform-specific build optimizations.
Capabilities
Build Configuration Options
Core configuration object defining build parameters and platform-specific settings.
/**
* Baidu Mini Program build configuration options
*/
const options: BuildOptions;
interface BuildOptions {
/** CSS custom properties for platform styling */
cssVars: CSSVariables;
/** File extension mappings */
extnames: FileExtensions;
/** Template filter tag name */
filterTag: string;
/** Project configuration file name */
project: string;
/** Subpackage support flag */
subPackages: boolean;
}
interface CSSVariables {
/** Status bar height variable */
'--status-bar-height'?: string;
/** Window top position */
'--window-top'?: string;
/** Window bottom position */
'--window-bottom'?: string;
/** Safe area top inset */
'--safe-area-inset-top'?: string;
/** Safe area bottom inset */
'--safe-area-inset-bottom'?: string;
/** Safe area left inset */
'--safe-area-inset-left'?: string;
/** Safe area right inset */
'--safe-area-inset-right'?: string;
/** Additional custom properties */
[key: string]: string | undefined;
}
interface FileExtensions {
/** Style file extension */
style: string;
/** Template file extension */
template: string;
/** Filter script extension */
filter: string;
}Webpack Integration
Functions for integrating with webpack build process and configuring file copying.
/**
* Generate webpack copy plugin options for Baidu Mini Program assets
* @param platformOptions - Platform-specific options
* @param vueOptions - Vue CLI options
* @returns Webpack copy plugin configuration
*/
function copyWebpackOptions(platformOptions: PlatformOptions, vueOptions: VueOptions): WebpackCopyOptions;
interface PlatformOptions {
/** Platform name */
name: 'mp-baidu';
/** Platform-specific configuration */
[key: string]: any;
}
interface VueOptions {
/** Source directory */
srcDir?: string;
/** Output directory */
outputDir?: string;
/** Asset directory */
assetsDir?: string;
/** Public path */
publicPath?: string;
/** Additional Vue CLI options */
[key: string]: any;
}
interface WebpackCopyOptions {
/** Array of copy patterns */
patterns: CopyPattern[];
/** Copy plugin options */
options?: CopyPluginOptions;
}
interface CopyPattern {
/** Source path or glob pattern */
from: string;
/** Destination path */
to: string;
/** Transform function for file content */
transform?: (content: Buffer, path: string) => string | Buffer;
/** Context for resolving from path */
context?: string;
/** Glob options */
globOptions?: {
ignore?: string[];
dot?: boolean;
};
}
interface CopyPluginOptions {
/** Concurrency limit */
concurrency?: number;
/** Copy unmodified files */
copyUnmodified?: boolean;
}Usage Example:
import { copyWebpackOptions } from "@dcloudio/uni-mp-baidu";
// Configure webpack for Baidu Mini Program
const platformOptions = {
name: 'mp-baidu',
subPackages: true,
optimization: {
splitChunks: true
}
};
const vueOptions = {
srcDir: 'src',
outputDir: 'dist/mp-baidu',
assetsDir: 'static'
};
const copyOptions = copyWebpackOptions(platformOptions, vueOptions);
// Use in webpack config
module.exports = {
plugins: [
new CopyWebpackPlugin(copyOptions)
]
};Default Configuration
Standard configuration values used for Baidu Mini Program builds.
/**
* Default build configuration for Baidu Mini Program
*/
const defaultOptions: BuildOptions = {
cssVars: {
'--status-bar-height': '24px',
'--window-top': '0px',
'--window-bottom': '0px',
'--safe-area-inset-top': '0px',
'--safe-area-inset-bottom': '0px',
'--safe-area-inset-left': '0px',
'--safe-area-inset-right': '0px'
},
extnames: {
style: '.css',
template: '.swan',
filter: '.filter.js'
},
filterTag: 'filter',
project: 'project.swan.json',
subPackages: true
};CSS Variable Processing
Automatic CSS custom property injection for platform-specific styling.
/**
* CSS variables automatically injected into stylesheets
*/
interface InjectedCSSVars {
/** Status bar height (dynamic based on device) */
'--status-bar-height': string;
/** Window top position (accounts for navigation) */
'--window-top': string;
/** Window bottom position (accounts for tab bar) */
'--window-bottom': string;
/** Safe area insets for notched devices */
'--safe-area-inset-top': string;
'--safe-area-inset-bottom': string;
'--safe-area-inset-left': string;
'--safe-area-inset-right': string;
}Usage in CSS:
/* Use CSS variables in your stylesheets */
.status-bar {
height: var(--status-bar-height);
background: #000;
}
.main-content {
padding-top: var(--window-top);
padding-bottom: var(--window-bottom);
padding-left: var(--safe-area-inset-left);
padding-right: var(--safe-area-inset-right);
}
.full-screen-modal {
top: var(--safe-area-inset-top);
bottom: var(--safe-area-inset-bottom);
}File Extension Mapping
Configuration for mapping Vue.js file types to Baidu Mini Program equivalents.
/**
* File extension mappings for build process
*/
interface ExtensionMapping {
/** Vue single file components */
'.vue': ['.swan', '.css', '.js'];
/** Style files */
'.scss': '.css';
'.sass': '.css';
'.less': '.css';
'.stylus': '.css';
/** Template files */
'.html': '.swan';
/** Script files */
'.ts': '.js';
'.coffee': '.js';
/** Filter files */
'.filter.js': '.filter.js';
'.filter.ts': '.filter.js';
}Subpackage Configuration
Configuration for code splitting and subpackage support.
/**
* Subpackage configuration for large applications
*/
interface SubpackageConfig {
/** Enable subpackage support */
enabled: boolean;
/** Main package size limit (2MB) */
mainPackageLimit: number;
/** Subpackage size limit (2MB each) */
subpackageLimit: number;
/** Automatic splitting rules */
splitRules: SplitRule[];
}
interface SplitRule {
/** Rule name */
name: string;
/** Pages or modules to include */
includes: string[];
/** Root directory for subpackage */
root: string;
/** Preload priority */
preload?: boolean;
}Example subpackage configuration:
const subpackageConfig = {
enabled: true,
mainPackageLimit: 2 * 1024 * 1024, // 2MB
subpackageLimit: 2 * 1024 * 1024, // 2MB
splitRules: [
{
name: 'user',
includes: ['pages/user/*', 'pages/profile/*'],
root: 'subpackages/user/',
preload: false
},
{
name: 'shop',
includes: ['pages/shop/*', 'pages/cart/*'],
root: 'subpackages/shop/',
preload: true
}
]
};Build Process Integration
Integration points for the build process with Vue CLI and uni-app build tools.
/**
* Build process hooks and integration points
*/
interface BuildHooks {
/** Before build starts */
beforeBuild?(options: BuildOptions): void | Promise<void>;
/** After build completes */
afterBuild?(result: BuildResult): void | Promise<void>;
/** Transform individual files */
transformFile?(content: string, filePath: string): string | Promise<string>;
/** Process assets */
processAssets?(assets: AssetMap): AssetMap | Promise<AssetMap>;
}
interface BuildResult {
/** Build success status */
success: boolean;
/** Output directory */
outputDir: string;
/** Generated files */
files: string[];
/** Build statistics */
stats: BuildStats;
}
interface BuildStats {
/** Total build time */
buildTime: number;
/** Bundle sizes */
bundleSizes: {
main: number;
subpackages: Record<string, number>;
};
/** Asset counts */
assetCounts: {
pages: number;
components: number;
images: number;
styles: number;
};
}
interface AssetMap {
[fileName: string]: {
content: string | Buffer;
size: number;
type: 'page' | 'component' | 'style' | 'script' | 'asset';
};
}Advanced Build Configuration
Custom Webpack Configuration
// webpack.config.js for Baidu Mini Program
const { copyWebpackOptions } = require('@dcloudio/uni-mp-baidu');
module.exports = {
configureWebpack: {
plugins: [
// Copy platform-specific assets
new CopyWebpackPlugin(copyWebpackOptions({
name: 'mp-baidu',
customAssets: ['static/icons/*', 'static/fonts/*']
}, {
srcDir: 'src',
outputDir: 'dist/mp-baidu'
}))
]
},
chainWebpack: config => {
// Add platform-specific loaders
config.module
.rule('swan-template')
.test(/\.swan$/)
.use('swan-loader')
.loader('swan-template-loader');
// Configure CSS variables
config.plugin('define')
.tap(args => {
args[0]['process.env.UNI_PLATFORM'] = '"mp-baidu"';
return args;
});
}
};Environment-specific Configuration
// Different configurations for different environments
const buildConfigs = {
development: {
cssVars: {
'--status-bar-height': '44px', // iOS simulator
'--safe-area-inset-top': '44px'
},
subPackages: false, // Disable for faster dev builds
minify: false
},
production: {
cssVars: {
'--status-bar-height': '24px', // Default Android
'--safe-area-inset-top': '0px'
},
subPackages: true,
minify: true,
optimization: {
treeShaking: true,
codeSpiltting: true
}
}
};Custom File Processing
// Custom file transformation during build
const customCopyOptions = copyWebpackOptions({
name: 'mp-baidu',
transforms: [
{
test: /\.vue$/,
transform: (content, path) => {
// Custom Vue SFC processing
return processVueSFC(content, {
platform: 'mp-baidu',
features: ['composition-api', 'typescript']
});
}
},
{
test: /\.css$/,
transform: (content, path) => {
// Inject platform-specific CSS variables
return injectCSSVars(content, {
'--platform-name': '"mp-baidu"',
'--supports-flex': 'true'
});
}
}
]
});Install with Tessl CLI
npx tessl i tessl/npm-dcloudio--uni-mp-baidu