问题描述
我正在尝试使用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']
之类的Generator函数
我正在批量使用:^ 3.20200625.2 和 @ angular / cli:〜9.1.0 版本。
我错过了什么吗?谁能帮我解决这个问题?
解决方法
我在电子+角度应用程序构建方面遇到了同样的问题,下一个解决方案对我有所帮助。
Blockly的参考文献says指出,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',{
from: 'node_modules/blockly/python_compressed.js',{
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"