Program << Previous Next >> URL

Packages

Reeborg Javascript 程式碼的工具打包設定: package.json

{
  "scripts": {
    "build": "tape tests/unit_tests/**/*.js | faucet && browserify ./src/js/index.js -o ./build/reeborg.js",
    "only-build": "browserify ./src/js/index.js -o ./build/reeborg.js"
  },
  "dependencies": {
    "browserify": "^17.0.0"
  }
}

browserify：是一個模組打包工具，它將 Node.js 模組（CommonJS 格式）打包為可以在瀏覽器中執行的單一文件。
scripts：
build 腳本首先執行測試，然後使用 browserify 將 ./src/js/index.js 打包為 ./build/reeborg.js。
only-build 腳本僅執行打包步驟。

詳細打包過程

根據 package.json 的內容，Reeborg 專案的打包過程如下：

依賴管理：
- 使用 browserify 作為打包工具，用於將多個模組和依賴打包成單一的 JavaScript 文件。
- browserify 將處理 require() 語句，解析依賴並將它們嵌入到打包的文件中。
打包執行：
- 運行 npm run build 或 npm run only-build：
  - npm run build：執行單元測試，然後進行模組打包。
  - npm run only-build：僅進行模組打包。
- 這將把 ./src/js/index.js 中的代碼，以及所有的依賴模組，打包成一個名為 ./build/reeborg.js 的文件。

./src/js/index.js 的主要功能和結構：

簡介

這個文件是 Reeborg 應用程序的入口點，用於初始化整個應用並引入相關的模組。

主要功能

引入模組：
- 使用 require() 引入各種模組，這些模組負責實現特定功能。例如：
  - ./utils/cors.js：處理跨域問題。
  - ./rur.js：定義全局命名空間 RUR 和基本功能。
  - ./file_io/file_io.js、./storage/storage.js 等：處理文件 IO 和存儲功能。
  - ./gui_tools/world_editor.js：提供基於菜單的世界編輯器。
  - ./listeners/memorize_world.js、./listeners/onclick.js 等：為界面添加交互功能。
初始化 Brython：
- 使用 brython() 函數啟動 Brython，並設置 Python 路徑為 RUR.BASE_URL + '/src/python'。
初始化全局狀態：
- 定義和初始化應用的全局狀態，例如 RUR.state.session_initialized。
啟動會話：
- start_session()：設置應用的初始狀態，包括編輯器、語言、世界菜單等。
設置應用的初始狀態：
- set_initial_state()：根據 URL 或本地存儲的數據，設定輸入方式、人類語言、世界菜單等。
恢復 Blockly 狀態：
- restore_blockly()：從本地存儲中加載 Blockly 的配置，並恢復到工作區。
處理本地存儲：
- 恢復編輯器和庫的內容（set_editor() 和 set_library()）。
- 恢復自定義的顏色設置（get_red_green()）。
確認應用準備就緒：
- confirm_ready_to_start()：檢查是否所有資源和模組已準備好，然後啟動應用。

關鍵代碼摘錄

以下是一些關鍵代碼片段：

Brython 初始化

brython({debug:1, pythonpath:[RUR.BASE_URL + '/src/python']});

啟動 Brython 並設置 Python 路徑。

初始化應用狀態

function set_initial_state() {
    var url_query;
    url_query = RUR.permalink.parseUri(window.location.href);
    if (url_query.queryKey === undefined) {
        url_query.queryKey = {};
    }
    set_initial_input_method(url_query);
    set_initial_language(url_query);
    set_initial_menu(url_query);
    RUR.state.world_url = decodeURIComponent(url_query.queryKey.url);
    RUR.state.world_name = decodeURIComponent(url_query.queryKey.name);
    // 若 world_url 和 world_name 無效，則設置默認世界
    if (probably_invalid(RUR.state.world_url)) {
        set_default_world();
    }
}

根據 URL 或本地存儲的數據，設定應用的初始狀態。

恢復 Blockly 狀態

function restore_blockly () {
    try {
        _restore_blockly();
    } catch (e) {
        console.log("Could not restore blockly; will try once more in 500 ms.");
        setTimeout(_restore_blockly, 500);
    }
}

function _restore_blockly () {
    var xml, xml_text;
    xml_text = localStorage.getItem("blockly");
    if (xml_text) {
        xml = Blockly.Xml.textToDom(xml_text);
        Blockly.Xml.domToWorkspace(xml, RUR.blockly.workspace);
    }
}

恢復 Blockly 的工作區配置。

文件的作用

作為應用程序的入口點：
- 負責將所有模組組裝在一起，並啟動應用。
初始化應用的全局狀態：
- 確保應用的各種功能能夠根據用戶的需求進行初始化。
加載和配置模組：
- 根據應用的需求，動態加載模組並配置功能。

References:

Practical Node.js (2018)

Program << Previous Next >> URL