GoJS 模块化

The GoJS kit contains examples of using GoJS with ES6 modules.

Using GoJS as an ES6 module

By default the GoJS library does not use the export keyword, for compatibility reasons. So we have had to provide different libraries that are ES6 modules. In the release folder, they are the go-module.js and go-debug-module.js libraries. In addition, there is an ES6 module-specific TypeScript definition file: go-module.d.ts.

In samplesTS, the minimalModule.html sample uses ES6. It references:

import { go } from '../release/go-module.js';

In order to load GoJS and other ES6 modules, the HTML page also uses the type="module" script tag:

<!-- requires minimalModule.js, built from minimalModule.ts -->
<script type="module">
import { init } from "./minimalModule.js";
// lib needs: export const go = self.go;
window.onload = function() {
    init();
}
</script>

Most browsers will not display resources with <script type="module"> if they are served from a local file system, so you may need to open minimalModule.html from a server to see the results.

GoJS Extensions as ES6 Modules

The extension classes can also be loaded as ES6 modules if you modify the tsconfig.json configuration in the extensionsTS folder, and then rebuild.

{
    "compilerOptions": {
        "target": "es6",
        "strict": true
    }
}

Recompiling those TypeScript classes will then produce module-friendly JS libraries.

Depending on your toolchain, you could also include compiler options directly into your project, as is done in the vue-webpack GoJS project. In its webpack.config.js file, we specify new compiler options for the TypeScript loader so that Webpack + Vue compiles the extensions with ES6 module support instead of the extensionsTS defaults.

/* ... in webpack.config.ts in the vue-webpack project ... */
// files with `.ts` or `.tsx` extension will be handled by `ts-loader`
{ 
    test: /\.tsx?$/,
    loader: 'ts-loader',
    options: {
        // We want to override the tsconfig file currently in:
        // vue-webpack\node_modules\gojs\extensionsTS
        // Because it uses ES5 + umd modules and we want to use ES6 + ES6.
        compilerOptions: {
            "module": "ES6",
            "target": "ES6",
            "noImplicitAny": true
        }
    }

GoJS 与 RequireJS

Both the go.js library and the go-debug.js library can be loaded via require. The extensionsTS directory contains all of the extension classes from the extensions directory, but in TypeScript and pre-compiled as UMD modules. This is reflected in that directory's tsconfig.json:

{
    "compilerOptions": {
        "module": "umd",
        "target": "es5",
        "strict": true
    }
}

The generated JavaScript can then be loaded as UMD modules via require.

<script src="../samples/assets/require.js"></script>
<script id="code">
function init() {
    require(["CheckBoxesScript"], function (app) {
        app.init();
    });
}
</script>