外部化WordPress站点上作为共享脚本或模块可用的依赖项。 为每个入口点添加一个资产文件，该文件使用入口点的WordPress脚本或模块依赖项列表声明一个对象。 资产文件还包含为当前源代码计算的当前版本。
安装
npm install@wordpress/dependency-extraction-webpack-plugin--保存-dev 用法
网络包
//webpack.config.js const DependencyExtractionWebpackPlugin=require（'@wordpress/dependence extraction webpack-plugin'）； 模块导出={ //…剪刀 插件：[new DependencyExtractionWebpackPlugin（）]， }; const defaultConfig=require（'@wordpress/scripts/config/webpack.config'）； const webpackConfig={ …默认配置， 插件：[ …defaultConfig.plugins.filter（默认配置插件过滤器）( （插件）=> plugin.constructor.name！==' DependencyExtractionWebpackPlugin' ), 新的DependencyExtractionWebpackPlugin（{ 注入聚合物：真， requestToExternal（请求）{ /*我的外衣*/ }, } ), ], }; 脚本行为
//源文件入口点.js 从'react'导入{Component}； //Webpack将生成输出output/entrypoint.js /*捆绑的JavaScript输出*/ //Webpack还将生成output/entrypoint.asset.php，声明脚本依赖项 <? php返回数组（“dependencies”=>数组（“react”），“version”=>“dd4c2dc50d046ed9d4c063a7ca95702f”）； |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
脚本模块的行为
const webpackConfig={ …默认配置， //这些行是在编写时启用模块编译所必需的： 输出：{module:true}， 实验：{outputModule:true}， 插件：[ …默认配置.plugins.filter( （插件）=> plugin.constructor.name！==' 依赖项提取WebpackPlugin ), 新的DependencyExtractionWebpackPlugin（{ //对于模块，使用`requestToExternalModule`： 请求到外部模块（请求）{ if（请求===“my-registered-module”）{ 退货请求； } }, } ), ], }; //源文件入口点.js 从“@wordpress/interactivity”导入{store，getContext}； //Webpack将生成输出output/entrypoint.js /*捆绑的JavaScript输出*/ //Webpack还将生成output/entrypoint.asset.php，声明脚本依赖项 <? php返回数组（'dependencies'=>数组（'@wordpress/interactive'），'version'=>'dd4c2dc50d046ed9d4c063a7ca95702f'）； |
选项
模块导出={ 插件：[ 新的DependencyExtractionWebpackPlugin（{injectPolyfill:true}）， ], }; 输出格式
类型：字符串 违约： php（电话）
输出文件名
类型：字符串|函数 默认值：null
组合资产
类型：布尔型 违约： 假
组合输出文件
类型：字符串 违约： 无效的
使用默认值
类型：布尔型 违约： 真的
注射聚乙烯
类型：布尔型 违约： 假
外部化报表
类型：boolean | string 违约： 假
请求到外部
类型：功能
/** *外部化“my-module” * *@param{string}request请求的模块 * *@return{（字符串|未定义）}脚本全局 */ 函数requestToExternal（请求）{ //处理导入，例如“从my-module导入myModule”` if（请求===“my-module”）{ //期望在全局范围内找到“my-module”作为myModule： return'myModule'； } } 模块导出={ 插件：[new DependencyExtractionWebpackPlugin（{requestToExternal}）]， }; 请求到外部模块
类型：功能
/** *外部化“my-module” * *@param{string}request请求的脚本模块 * *@return{（string|boolean|undefined）}脚本模块ID */ 函数requestToExternalModule（请求）{ //处理导入，例如“从my-module导入myModule”` if（请求===“my-module”）{ //导入的格式应为`Import{something}from“myModule”；` 在最后的捆绑中。 return'myModule'； } //如果源中的脚本模块ID与外部脚本模块相同，则可以返回“true”。 return request===“external-module-id-no-change-required”； } 模块导出={ 插件：[ 新的DependencyExtractionWebpackPlugin（｛requestToExternalModule｝）， ], }; 请求处理
类型：功能
/** *将“my-module”请求映射到“my-model-script-handle” * *@param{string}request请求的模块 * *@return｛（string|undefined）｝编写全局脚本 */ 函数requestToHandle（请求）{ //处理导入，例如“从my-module导入myModule”` if（请求===“my-module”）{ //“my-module”依赖于带有“my-mmodule-script-handle”句柄的脚本。 return“my-module-script-handle”； } } 模块导出={ 插件：[new DependencyExtractionWebpackPlugin（{requestToHandle}）]， }; 请求到外部 和 请求处理
WordPress（文字出版社）
$script_path='path/to/script.js'； $script_asset_path=“路径/to/script.asset.php”； $script_asset=文件存在（$script_aasset_path） ? 需要（$script_asset_path） ：array（“dependencies”=>array（），“version”=>filemtime（$script_path））； $script_url=插件url（$script_path，__FILE_）； wp_enqueue_script（'script'，$script_url，$script_asset['dependencies']，$script_asset['版本']）； $module_path='path/to/module.js'； $module_asset_path=“路径/to/module.asset.php”； $module_asset=文件存在（$module_asset_path） ? 需要（$module_asset_path） ：array（“dependencies”=>array（），“version”=>filemtime（$module_path））； $module_url=插件_url（$module_path，__FILE__）； wp_register_script_module（'my-module'，$module_url，$modulate_asset['dependencies']，$module_asset['版本']）； wp_enqueue_script_module（“我的模块”）；