前端 - react umi打包成jssdk 嵌入到其他项目里？

Question

有没有大哥懂 react umi打包成jssdk 嵌入到其他项目里 script标签引入这样 类似iframe效果阿！！！！！

类型这种效果

爆红

Answer 1

你要打包成sdk 修改.umirc.ts配置文件中的

chainWebpack: (config, { env }) => {
     config.output
      .jsonpFunction(`webpackJsonp_${packageName}`)
      .library(`${packageName}-[name]`) // 设置库的名称
      .libraryTarget(`umd`);// 设置库的输出格式为umd
}

Answer 2

在 React 和 Umi（一种基于 Webpack 的前端构建和开发框架）的环境下，将应用打包成可嵌入其他项目的 JS SDK，并通过 <script> 标签引入，通常涉及几个关键步骤。这种需求类似于创建一个可以在其他网页中通过 <script> 标签直接使用的库或框架。下面是一些基本的步骤和建议：

1. 设置 Umi 项目

确保你的 Umi 项目配置正确，能够生成适合嵌入的打包产物。这通常涉及到配置 Webpack 以生成 UMD (Universal Module Definition) 或 IIFE (Immediately Invoked Function Expression) 格式的 bundle。

2. 配置 Webpack

在 Umi 中，你可能需要自定义 Webpack 配置。可以通过修改 .umirc.js 或 config/config.js（取决于你的 Umi 版本和配置方式）来实现。你可以使用 extraBabelPlugins、extraWebpackConfig 等选项来扩展 Webpack 配置。

例如，你可以添加一个配置来设置 output 的 library 和 libraryTarget：

// .umirc.js
export default {
  // 其他配置...
  extraWebpackConfig: {
    output: {
      // 输出的文件名
      filename: 'your-sdk.js',
      // 库的全局变量名
      library: 'YourSDK',
      // 打包格式
      libraryTarget: 'umd',
      // 全局变量名称
      umdNamedDefine: true,
    },
    // 确保打包时包括所有依赖
    externals: {
      // 这里可以排除不需要打包进SDK的依赖
      react: 'React',
      'react-dom': 'ReactDOM',
    },
  },
};

3. 打包你的应用

使用 Umi 的打包命令（如 umi build）来生成你的 SDK。这将根据你的配置生成一个或多个 JavaScript 文件。

4. 在其他项目中引入 SDK

在其他 HTML 文件中，你可以通过 <script> 标签引入你的 SDK：

<script src="path/to/your-sdk.js"></script>
<script>
  // 现在你可以使用 YourSDK 这个全局变量了
  YourSDK.init(/* 初始化参数 */);
</script>

5. 确保 SDK 的可访问性和初始化

• 确保 SDK 暴露必要的 API 和方法，以便在其他项目中调用。
• 如果需要，在 SDK 内部处理 DOM 插入或样式加载，确保这些操作不会影响到宿主页面的布局或样式。

6. 测试和调试

在不同的环境和浏览器中测试你的 SDK，确保它在各种情况下都能正常工作。

通过以上步骤，你应该能够成功地将一个 React + Umi 应用打包成一个可以通过 <script> 标签引入的 JS SDK，并在其他项目中嵌入和使用它。注意，具体实现可能需要根据你的具体需求和项目配置进行调整。