75 lines
No EOL
3 KiB
Markdown
75 lines
No EOL
3 KiB
Markdown
# Dependency Extraction Webpack Plugin
|
|
|
|
扩展 WordPress [Dependency Extraction Webpack Plugin](https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin)，以自动包含 WooCommerce 依赖项以及 WordPress 依赖项。
|
|
|
|
## 安装
|
|
|
|
安装该模块
|
|
|
|
```bash
|
|
pnpm install @woocommerce/dependency-extraction-webpack-plugin --save-dev
|
|
```
|
|
|
|
## 用法
|
|
|
|
像使用 [Dependency Extraction Webpack Plugin](https://github.com/WordPress/gutenberg/tree/trunk/packages/dependency-extraction-webpack-plugin) 一样使用此插件。API 完全相同，只是 WooCommerce 包也会被自动处理。
|
|
|
|
```js
|
|
// webpack.config.js
|
|
const WooCommerceDependencyExtractionWebpackPlugin = require( '@woocommerce/dependency-extraction-webpack-plugin' );
|
|
|
|
module.exports = {
|
|
// …snip
|
|
plugins: [ new WooCommerceDependencyExtractionWebpackPlugin() ],
|
|
};
|
|
```
|
|
|
|
**注意：** 如果你计划使用 `WooCommerceDependencyExtractionWebpackPlugin` 来扩展 `@wordpress/scripts` 的 webpack 配置，请确保移除该插件的默认实例：
|
|
|
|
```js
|
|
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](https://github.com/WordPress/gutenberg/tree/trunk/packages/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-*` | |
|
|
|
|
### 选项
|
|
|
|
可以向构造函数传递一个对象来自定义行为，例如：
|
|
|
|
```js
|
|
module.exports = {
|
|
plugins: [
|
|
new WooCommerceDependencyExtractionWebpackPlugin( {
|
|
bundledPackages: [ '@woocommerce/components' ],
|
|
} ),
|
|
],
|
|
};
|
|
```
|
|
|
|
#### `bundledPackages`
|
|
|
|
- 类型: 数组
|
|
- 默认值: []
|
|
|
|
一个潜在的 WooCommerce 排除包列表，这会将排除的包包含在捆绑包中（上面的例子）。
|
|
|
|
要查看更多支持的选项，请参阅原始的 [依赖提取插件](https://github.com/WordPress/gutenberg/blob/trunk/packages/dependency-extraction-webpack-plugin/README.md#options)。 |
