打包之后无法使用

上一篇记录中的方法只能是临时的在当前目录结构中使用，一旦打包后就无法加载对应的文件。

一种新的解决方案

安装scratch-blocks库

npm install scratch-blocks

或者

yarn add scratch-blocks

移动scratch-blocks库

将node_modules中的scratch-blocks库移动到 public 目录中，然后将 HTML 文件中的脚本引用路径修改为这些脚本在 public 目录中的新位置。

例如，创建一个名为 libs 的目录在 public 下，然后将 scratch-blocks 文件夹复制到这个新的目录中。然后在你的 HTML 文件中，将引用路径修改为类似于 /libs/scratch-blocks/blockly_uncompressed_vertical.js 的路径。

<!-- index.html -->
<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>

    <!-- import scratch-blocks source -->
    <script src="/lib/scratch-blocks/blockly_uncompressed_vertical.js"></script>
    <script src="/lib/scratch-blocks/blocks_vertical/vertical_extensions.js"></script>
    <script src="/lib/scratch-blocks/blocks_common/math.js"></script>
    <script src="/lib/scratch-blocks/blocks_common/text.js"></script>
    
  </body>
  <script>
    var global = global || window;
  </script>
</html>

关于scratch-blocks的js文件这里不做过多解释，按需引入即可。或者参考上一篇记录中的推荐参考。

配置vite.config.js

这样vite在打包时会将其一起打包到dist文件夹下。之后需要使用 rollupOptions 配置将blockly视为外部依赖。

// vite.config.js
export default defineConfig({
  build: {
    rollupOptions: {
      external: ['blockly'],
    },
    //  /* 其他配置 */
  }
})

给scratch-blocks安装依赖

进入scratch-blocks文件夹下，直接使用npm install初始化安装依赖即可。因为我的项目只用到了显示blockly这一部分，不涉及生成程序。目前看来只用到了两个依赖，因单独安装了下面的两个库。

并且为了减小打包后的体积只保留了scratch-blocks文件夹下我需要用到的部分其余全部删掉了，package-lock也按照当前状态生成了新的。

不出意外，到这里项目中已经可以直接正常使用Blockly了。

media路径问题

我项目中的使用场景会导致url中间动态的插入一个id，导致定义workspaceConfig的media时没法写固定的路径。于是从scratch-blocks源码中copy了一个检查当前Blockly路径的方法。media路径不对的问题就是声音文件和图标文件加载不上。

//检查BLOCKLY路径
window.BLOCKLY_DIR = (function() {
    if (!isNodeJS) {
      // Find name of current directory.
      var scripts = document.getElementsByTagName('script');
      var re = new RegExp('(.+)[\/]blockly_uncompressed(_vertical|_horizontal|)\.js$');
      for (var i = 0, script; script = scripts[i]; i++) {
        var match = re.exec(script.src);
        if (match) {
          return match[1];
        }
      }
      alert('Could not detect Blockly\'s directory name.');
    }
    return '';
  })();
  
  //workspace配置项，可以参考下。
  export const workspaceCongif = {
    media: window.BLOCKLY_DIR + '/media/',
    toolbox: '',// 工具栏的XML定义，包含可用的块和工具
    scrollbars: true, // 是否显示滚动条
    readOnly: false, // 是否为只读模式
    trashcan: false, // 是否显示垃圾桶图标，用于删除块
    zoom: {
        controls: true, // 是否显示缩放控件
        wheel: true, // 是否允许使用鼠标滚轮进行缩放
        startScale: 1.0, // 初始缩放比例
        maxScale: 2, // 最大缩放比例
        minScale: 0.3, // 最小缩放比例
        scaleSpeed: 1.1, // 缩放速度
    },
    grid: {
        spacing: 20, // 网格间距
        length: 3, // 网格线长度
        colour: '#ccc', // 网格线颜色
        snap: true, // 块是否捕捉到网格
    },
    renderer: 'zelos', // 渲染器，可选项：'zelos'（默认）、'geras'、'thrasos'
    rtl: false, // 是否从右到左显示（适用于某些语言）
    move: {
        scrollbars: true, // 是否在拖动时自动滚动
        drag: true, // 是否允许拖动块和连接线
        wheel: false, // 是否允许使用鼠标滚轮拖动
    },
    toolboxOptions: {
        color: true, // 工具栏块的颜色是否与分类相匹配
        inverted: false, // 工具栏块是否倒置显示
    },
    extensions: [], // 扩展Blockly的功能，如自定义块或工具
    rendererOverrides: {}, // 用于自定义渲染器的覆盖选项
            
}

vue3+vite中使用scratch-blocks 记录2