React版Excel加载项整合自定义函数后构建无相关文件如何解决

1 修复构建不生成自定义函数相关文件问题 #

默认React版Office加载项的webpack配置仅处理任务窗格入口，未包含自定义函数的编译规则，需手动修改webpack.config.js补充配置：

• 新增自定义函数入口配置：

// entry节点新增functions入口
entry: {
  taskpane: './src/taskpane/index.js',
  functions: './src/function/function.js'
}

• 新增自定义函数页面与元数据生成插件：

const HtmlWebpackPlugin = require('html-webpack-plugin');
const CustomFunctionsMetadataPlugin = require('office-addin-customfunctions-webpack-plugin');

// plugins节点新增以下配置
plugins: [
  // 原有任务窗格相关插件保留
  new HtmlWebpackPlugin({
    filename: 'function.html',
    template: './src/function/function.html',
    chunks: ['functions'],
    inject: true
  }),
  new CustomFunctionsMetadataPlugin({
    output: 'functions.json',
    input: './src/function/function.js'
  })
]

修改完成后重新执行npm run build，dist目录将自动生成function.html、functions.js、functions.json三个自定义函数相关文件。

2 manifest与自定义函数资源关联配置 #

你manifest中已定义自定义函数的resid标识，只需在<Resources>节点补全resid与实际资源路径的映射即可：

<Resources>
  <bt:Urls>
    <!-- 关联自定义函数运行页面 -->
    <bt:Url id="MyCustFunctions.Page.Url" DefaultValue="https://localhost:3000/function.html" />
    <!-- 关联自定义函数元数据文件 -->
    <bt:Url id="MyCustFunctions.Metadata.Url" DefaultValue="https://localhost:3000/functions.json" />
    <!-- 原有任务窗格相关的Url配置保留 -->
  </bt:Urls>
  <bt:ShortStrings>
    <!-- 自定义函数命名空间，调用时格式为[命名空间].[函数名] -->
    <bt:String id="MyCustFunctions.Namespace" DefaultValue="MYFUNC" />
    <!-- 原有任务窗格相关的String配置保留 -->
  </bt:ShortStrings>
</Resources>

生产环境部署时需将DefaultValue的地址替换为实际部署的域名路径，确保和资源访问地址完全一致

补充注意事项 #

• 确认src/function/function.html中已引入自定义函数运行时依赖：<script src="https://appsforoffice.microsoft.com/lib/1.1/hosted/custom-functions-runtime.js" type="text/javascript"></script>
• 每次修改自定义函数逻辑后需重新构建，元数据文件会自动更新
• 自定义函数运行时独立于任务窗格，无需依赖任务窗格加载即可正常调用

内容的提问来源于stack exchange，提问作者Shailesh Patel