woocommerce/packages/js/dependency-extraction-webpack-plugin/zh-cn/README.md
2026-04-15 10:18:01 +08:00

3 KiB

Dependency Extraction Webpack Plugin

扩展 WordPress Dependency Extraction Webpack Plugin,以自动包含 WooCommerce 依赖项以及 WordPress 依赖项。

安装

安装该模块

pnpm install @woocommerce/dependency-extraction-webpack-plugin --save-dev

用法

像使用 Dependency Extraction Webpack Plugin 一样使用此插件。API 完全相同,只是 WooCommerce 包也会被自动处理。

// webpack.config.js
const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );

module.exports = {
 // …snip
 plugins: [ new WooCommerceDependencyExtractionWebpackPlugin() ],
};

注意: 如果你计划使用 WooCommerceDependencyExtractionWebpackPlugin 来扩展 @wordpress/scripts 的 webpack 配置,请确保移除该插件的默认实例:

const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
const webpackConfig = {
	...defaultConfig,
	plugins: [
		...defaultConfig.plugins.filter(
			( plugin ) =>
				plugin.constructor.name !== 'DependencyExtractionWebpackPlugin'
		),
		new WooCommerceDependencyExtractionWebpackPlugin(),
	],
};

在 WordPress Dependency Extraction Webpack Plugin 基础上额外处理的模块请求如下:

请求 全局 脚本句柄 备注
@woocommerce/data wc['data'] wc-store-data
@woocommerce/csv-export wc['csvExport'] wc-csv
@woocommerce/blocks-registry wc['wcBlocksRegistry'] wc-blocks-registry
@woocommerce/block-data wc['wcBlocksData'] wc-blocks-data-store 此依赖项没有关联的 npm 包
@woocommerce/settings wc['wcSettings'] wc-settings
@woocommerce/* wc['*'] wc-*

选项

可以向构造函数传递一个对象来自定义行为,例如:

module.exports = {
 plugins: [
  new WooCommerceDependencyExtractionWebpackPlugin( {
   bundledPackages: [ '@woocommerce/components' ],
  } ),
 ],
};

bundledPackages

  • 类型: 数组
  • 默认值: []

一个潜在的 WooCommerce 排除包列表,这会将排除的包包含在捆绑包中(上面的例子)。

要查看更多支持的选项,请参阅原始的 依赖提取插件