OpenMCT自定义视图插件开发报错求助：import与define未定义

Hey there, let's work through this OpenMCT custom view plugin issue step by step—those module errors are super common when switching between ES modules and OpenMCT's AMD-based plugin system, so we'll get you sorted.

First, Let's Break Down Your Errors #

• "Cannot use import statement outside a module": The SimpleVuePlugin example likely uses ES module syntax (import/export), but OpenMCT's core plugin system relies on AMD modules (using define). Running this directly in your express-based tutorial project won't work because the environment isn't set up for ES modules here.
• "define is not defined": This happens because you're trying to run AMD-style code outside of OpenMCT's browser-based loader. define is provided by OpenMCT's AMD runtime in the browser, not by Node.js/Express directly.

Correct Way to Build a Custom View Plugin (Starting with Vanilla JS) #

Since you're extending the openmct-tutorial project, let's start with a minimal working custom view, then add Vue if you want it.

Step 1: Set Up Your Plugin Folder #

In your project root, create a new folder at plugins/my-custom-view/. Inside it, make two files: plugin.js (the core plugin logic) and you can add a View.js later if you want to split code, but we'll keep it simple first.

Step 2: Write AMD-Style Plugin Code #

OpenMCT plugins are AMD modules, so wrap everything in define and declare dependencies (like openmct). Here's a basic working example for plugin.js:

define(['openmct'], function (openmct) {
    // Your custom view class
    class CustomObjectView {
        constructor(domainObject) {
            this.domainObject = domainObject;
            this.element = document.createElement('div');
            this.element.innerHTML = `
                <h3>My Custom View</h3>
                <p>Viewing object: <strong>${domainObject.name}</strong></p>
                <p>Object type: ${domainObject.type}</p>
            `;
        }

        // Required method to render the view
        show(containerElement) {
            containerElement.appendChild(this.element);
        }

        // Required method to clean up the view
        destroy() {
            this.element.remove();
        }
    }

    // The plugin installation function
    return function install() {
        openmct.objectViews.addProvider({
            key: 'my.custom.view', // Unique identifier for your view
            name: 'Custom View', // Name shown in the view switcher
            // Define which domain objects can use this view
            canView: function (domainObject) {
                // Allow all objects for testing—adjust this to your needs
                return true;
            },
            // Return an instance of your view when requested
            view: function (domainObject) {
                return new CustomObjectView(domainObject);
            }
        });
    };
});

Step 3: Register the Plugin in Your Server #

Open your server.js file, and add this line after the existing plugin loads:

openmct.loadPlugin('./plugins/my-custom-view/plugin.js');

Step 4: Test It #

Start your server with node server.js, open localhost:8080, create any domain object, and you'll see "Custom View" in the view switcher dropdown.

Adding Vue to Your Custom View (Fixing the Vue Module Issues) #

If you still want to use Vue, you need to make it compatible with OpenMCT's AMD system:

Step 1: Include Vue's UMD Build #

Open your index.html file and add this script tag (UMD builds work with AMD, CommonJS, or browser globals):

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>

Step 2: Rewrite the Vue Plugin as AMD #

Modify your plugin.js to use define with Vue as a dependency:

define(['openmct', 'vue'], function (openmct, Vue) {
    class VueCustomView {
        constructor(domainObject) {
            this.domainObject = domainObject;
            // Initialize your Vue app
            this.vueInstance = new Vue({
                template: `
                    <div class="vue-view">
                        <h3>Vue-Powered Custom View</h3>
                        <p>Object Name: {{ domainObject.name }}</p>
                        <p>Last Updated: {{ new Date().toLocaleString() }}</p>
                    </div>
                `,
                data() {
                    return {
                        domainObject: this.domainObject
                    };
                }
            });
        }

        show(containerElement) {
            this.vueInstance.$mount(containerElement);
        }

        destroy() {
            this.vueInstance.$destroy();
        }
    }

    return function install() {
        openmct.objectViews.addProvider({
            key: 'my.vue.custom.view',
            name: 'Vue Custom View',
            canView: () => true,
            view: (domainObject) => new VueCustomView(domainObject)
        });
    };
});

Now when you run your server, the Vue view will load without module errors—OpenMCT's AMD loader will handle the define call, and the UMD Vue build will be available as a dependency.

内容的提问来源于stack exchange，提问作者Deathbat219