1

我正在尝试使用 Angular 构建一个 Blockly 应用程序。我使用 npm 安装了 Blockly。我还在 angular.json 中添加了以下脚本

"scripts": [
              "node_modules/blockly/blockly_compressed.js",
              "node_modules/blockly/blocks_compressed.js",
              "node_modules/blockly/python_compressed.js",
              "node_modules/blockly/msg/en.js"
            ]

虽然我可以使用import * as Blockly from 'blockly'在应用程序中导入块并使用其他功能，但我无法找到生成器功能，如Blockly.Python['text_indexOf']

我正在使用块状：^3.20200625.2和@angular/cli: ~9.1.0版本。

我是不是错过了什么。谁能帮我解决这个问题？

4

1 回答 1

0

我在电子+角度应用程序构建方面遇到了同样的问题，下一个解决方案对我有帮助。

Blockly 的参考资料说Python 的生成器类应该包含在文件python_compressed.js中blockly_compressed.js。所以我需要包含这些文件。

首先，我使用copy-webpack-plugin将所需文件从 Blockly 的安装目录复制node_modules/blockly到assets/js：

var CopyPlugin = require('copy-webpack-plugin');

module.exports = {
    ...
    plugins: [
        ...
            new CopyPlugin([
                {
                    from: 'node_modules/blockly/blockly_compressed.js',
                    to: 'assets/js/[name].[ext]'
                },
                {
                    from: 'node_modules/blockly/blocks_compressed.js',
                    to: 'assets/js/[name].[ext]'
                },
                {
                    from: 'node_modules/blockly/python_compressed.js',
                    to: 'assets/js/[name].[ext]'
                },
                {
                    from: 'node_modules/blockly/msg/en.js',
                    to: 'assets/js/msg/[name].[ext]'
                },
            ]),
        ...
    ]
    ...
}

在我添加了js/assets直接从index.html底部调用的脚本后：

<!DOCTYPE html>
<html>
    <head>...</head>
    <body><app-root>...</app-root></body>
    <script src="assets/js/blockly_compressed.js"></script>
    <script src="assets/js/blocks_compressed.js"></script>
    <script src="assets/js/python_compressed.js"></script>
    <script src="assets/js/msg/en.js"></script>
</html>

在 webpack 构建后，在控制台中检查 python 的生成器：

> typeof Blockly.Python
< "object"
于 2020-09-30T07:56:04.563 回答